0

Есть код во flutter - он работает, выводит эмблему посередине экрана. Я не могу понять, как добавить посередине, под ним, чуть ниже текст приветствия?

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import '../ConstantDatas.dart';

import 'SizeConfig.dart';
import 'main.dart';

class SplashScreeen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _SplashScreeen();
  }
}

class _SplashScreeen extends State<SplashScreeen> {
  @override
  void initState() {
    Timer(Duration(seconds: 3), () {
      Navigator.of(context).push(MaterialPageRoute(
        builder: (context) => MyApp(),
      ));
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return WillPopScope(

          child: Scaffold(
          backgroundColor: Colors.white,
          body: Center(
            child: Image.asset(
              ConstantDatas.assetPath + "splash_bg.png",
              width: SizeConfig.safeBlockVertical! * 20,
              height: SizeConfig.safeBlockVertical! * 20,
              fit: BoxFit.fill,
            ),
          ),
        ),

        onWillPop: () async {
          Future.delayed(const Duration(milliseconds: 100), () {
            SystemChannels.platform.invokeMethod('SystemNavigator.pop');
          });
          return false;
        });
  }
}

Пробовал так в процессе обучения, но выходит конкретная ахинея, подскажите пожалуйста с этим вопросом

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_story_app_online_2_8_22/main.dart';


class SplashScreeen extends StatefulWidget {
  @override
  _SplashScreeen createState() => _SplashScreeen();
}

class _SplashScreeen extends State<SplashScreeen> {
  @override
  void initState() {
    super.initState();
    Timer(
        Duration(seconds: 3),
            () => Navigator.of(context).pushReplacement(MaterialPageRoute(
            builder: (BuildContext context) => MyApp())));
  }

  // @override
  // Widget build(BuildContext context) {
  //   return Scaffold(
  //     body: Container(
  //       width: MediaQuery.of(context).size.width,
  //       height: MediaQuery.of(context).size.height,
  //       decoration: BoxDecoration(
  //         image: DecorationImage(
  //           image: AssetImage("assets/splash_bg.png"),
  //           fit: BoxFit.cover,
  //         ),
  //
  //       ),
  //       child:  Center(
  //         child: Container(child: Text('Привет!', style: TextStyle(color: Colors.white,fontWeight: FontWeight.w800,fontSize: 40),)),
  //       ),
  //     ),
  //   );
  // }
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Sample App',
      home: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Card(
              child: new Column(
                children: <Widget>[
                  new Row(
                    children: <Widget>[
                      new Container(
                        child: new Image.asset(
                          'assets/splash_bg.png',
                          height: 60.0,
                          fit: BoxFit.cover,
                        ),
                      ),
                      new Container(
                        child: new Text('Привет!'),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
  // @override
  // Widget build(BuildContext context) {
  //   return Scaffold(
  //
  //     body: Container(
  //         child: CircleAvatar(
  //
  //           child: ClipRRect(
  //               child: Image.asset('assets/splash_bg.png'),
  //               borderRadius: BorderRadius.circular(100.0)),
  //         )),
  //
  //   );
  //
  // }

}

1 ответ 1

1

Чтобы расположить элементы друг под другом - вам нужно использовать виджет Column. В его дочерние элементы добавляется все необходимые вам элементы - в вашем случае, это картинка и текст. Чтобы расположить по центру - mainAxisAlignment: MainAxisAlignment.center . Но, тогда элементы будут в плотную прижаты, чтобы добавить отступ, либо оберните один из дочерних виджетов Column в Container и добавьте отступ, или использую SizedBox в качестве отступа.

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset('image'),
            SizedBox(height: 30,), // ----> margin 
            Text('your text')
          ],
        ),
      ),
    );
  }
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.