如何在Dart Flutter中设计启动屏幕

huangapple go评论56阅读模式
英文:

How can i design my splash screen in dart flutter

问题

这是我的启动屏幕外观,那么如何使徽标填充圆形形状,以及如何添加背景图像?

英文:

如何在Dart Flutter中设计启动屏幕

This is how my splash screen appears, so how can I make it that the logo is filling up the rounded circle shape, and how can i make it that so I can add a background image

答案1

得分: 1

如果你想根据你写的代码获得反馈,
你必须附上代码的那部分。

或者,如果你可以使用全新的方法,
请使用下面链接中的 flutter_native_splash

https://pub.dev/packages/flutter_native_splash

英文:

If you want feedback based on the code you wrote,
you must attach that part of the code.

Or, if you can apply a completely new method,
use flutter_native_splash in the link below.

https://pub.dev/packages/flutter_native_splash

答案2

得分: 0

你可以使用 flutter_native_splash 插件来完成此操作,或者从头开始手动创建一个完整的启动画面。我在这里提供了一个示例。ClipOval 将使图像完全变为圆形,因为我们需要背景图像,所以我将一切都设置在一个 Stack 小部件中。在 initState 中,我调用了处理导航的导航函数。

navigation() async {
  Timer(const Duration(milliseconds: 3000), () {
    Navigator.pushReplacement(
      context,
      MaterialPageRoute(
        builder: (context) => MyHomePage(), /// 3 秒后导航到你所需的屏幕
      ),
    );
  });
}

@override
void initState() {
  // TODO: implement initState
  super.initState();
  navigation();
}

@override
Widget build(BuildContext context) {
  mq = MediaQuery.of(context).size;
  return Scaffold(
    body: Container(
      height: mq.height, /// 全屏高度
      width: mq.width, /// 全屏宽度
      child: Stack(
        children: [
          Align(
            alignment: const Alignment(0.0, 0.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  height: mq.height,
                  width: mq.width,
                  child: Image.asset(
                    "你的背景图像路径",
                  ),
                ),
                ClipOval(
                  child: Image.asset(
                    "你的图像路径",
                    width: "你需要的宽度",
                    fit: BoxFit.cover,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  );
}
英文:

Either you can use flutter_native_splash plugin for this operation or make a splash screen full manually from scratch. I have given an example here. ClipOval will make the image fully rounded and as we need background image I have set everything in a Stack widget. in initState I have called the navigation function which handles the navigation.

navigation() async {
Timer(const Duration(milliseconds: 3000), () {
   Navigator.pushReplacement(
          context,
          MaterialPageRoute(
            builder: (context) => MyHomePage(), ///navigate to your 
                                                 ///desired 
                                                 ///screen after 3 
                                                 ///seconds
             ),
           );
       }
        )
      }

    @override
    void initState() {
    // TODO: implement initState
     super.initState();
     navigation();
     }

   @override
   Widget build(BuildContext context) {
     mq = MediaQuery.of(context).size;
    return Scaffold(
   body: Container(
     height: mq.height, ///full screen height
     width: mq.width, ///full screen width
     child: Stack(
      children: [
        Align(
          alignment: const Alignment(0.0, 0.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                height: mq.height,
                width: mq.width,
                child: Image.asset(
                  "your background image path",
                ),
              ),
              ClipOval(
                child: Image.asset(
                "Your Image path",
                width: "how much you need",
                fit: BoxFit.cover,
              ),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
  );
}

答案3

得分: 0

尝试自己编写代码,我会为您提供有关如何构建此类型的启动屏幕的基本想法。

首先,使用 Scaffold 组件。
将 Scaffold 的背景颜色设置为您的启动屏幕的背景颜色。
然后,在 Scaffold 的正文中添加一个 Center Widget。
之后,将 Container 指定为 Center Widget 的子元素。
现在,通过指定背景颜色、BorderRadius 等来装饰 Container。
然后,在 Container 的子元素中放置一张图片。

SafeArea ->
Scaffold ->
Center ->
Container ->
AssetImage  NetworkImage
英文:

Try to write Code by yourself I will give you a basic idea about how this type of SplashScreens can be built.

First Take Scaffold
Make the Scaffold background color to the background color of your SplashScreen.
Then add a Center Widget in the body of the Scaffold
After that specify Container as a child of Center Widget
Now Decorate the Container by specifying background color, BorderRadius etc
Then place an image in the child of the Container.

Safearea ->
Scaffold ->
Center ->
Container ->
AssetImage or NetworkImage

huangapple
  • 本文由 发表于 2023年5月28日 10:48:04
  • 转载请务必保留本文链接:https://go.coder-hub.com/76349745.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定