Как добавить приветствие в splash screen(flutter)

Question

Как добавить приветствие в splash screen(flutter)

Рейтинг: 0Ответов: 1Опубликовано: 20.01.2023

Есть код во 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)),
  //         )),
  //
  //   );
  //
  // }

}

flutter dart

Источник: Stack Overflow на русском

Answer 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')
          ],
        ),
      ),
    );
  }
}

Как добавить приветствие в splash screen(flutter)

Ответы