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

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

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 中，我调用了处理导航的导航函数。

  1. navigation() async {
  2.   Timer(const Duration(milliseconds: 3000), () {
  3.     Navigator.pushReplacement(
  4.       context,
  5.       MaterialPageRoute(
  6.         builder: (context) => MyHomePage(), /// 3 秒后导航到你所需的屏幕
  7.       ),
  8.     );
  9.   });
  10. }
  12. @override
  13. void initState() {
  14.   // TODO: implement initState
  15.   super.initState();
  16.   navigation();
  17. }
  19. @override
  20. Widget build(BuildContext context) {
  21.   mq = MediaQuery.of(context).size;
  22.   return Scaffold(
  23.     body: Container(
  24.       height: mq.height, /// 全屏高度
  25.       width: mq.width, /// 全屏宽度
  26.       child: Stack(
  27.         children: [
  28.           Align(
  29.             alignment: const Alignment(0.0, 0.0),
  30.             child: Column(
  31.               mainAxisAlignment: MainAxisAlignment.center,
  32.               children: [
  33.                 Container(
  34.                   height: mq.height,
  35.                   width: mq.width,
  36.                   child: Image.asset(
  37.                     "你的背景图像路径",
  38.                   ),
  39.                 ),
  40.                 ClipOval(
  41.                   child: Image.asset(
  42.                     "你的图像路径",
  43.                     width: "你需要的宽度",
  44.                     fit: BoxFit.cover,
  45.                   ),
  46.                 ),
  47.               ],
  48.             ),
  49.           ),
  50.         ],
  51.       ),
  52.     ),
  53.   );
  54. }
英文:

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.

  1. navigation() async {
  2. Timer(const Duration(milliseconds: 3000), () {
  3.    Navigator.pushReplacement(
  4.           context,
  5.           MaterialPageRoute(
  6.             builder: (context) => MyHomePage(), ///navigate to your 
  7.                                                  ///desired 
  8.                                                  ///screen after 3 
  9.                                                  ///seconds
  10.              ),
  11.            );
  12.        }
  13.         )
  14.       }
  16.     @override
  17.     void initState() {
  18.     // TODO: implement initState
  19.      super.initState();
  20.      navigation();
  21.      }
  23.    @override
  24.    Widget build(BuildContext context) {
  25.      mq = MediaQuery.of(context).size;
  26.     return Scaffold(
  27.    body: Container(
  28.      height: mq.height, ///full screen height
  29.      width: mq.width, ///full screen width
  30.      child: Stack(
  31.       children: [
  32.         Align(
  33.           alignment: const Alignment(0.0, 0.0),
  34.           child: Column(
  35.             mainAxisAlignment: MainAxisAlignment.center,
  36.             children: [
  37.               Container(
  38.                 height: mq.height,
  39.                 width: mq.width,
  40.                 child: Image.asset(
  41.                   "your background image path",
  42.                 ),
  43.               ),
  44.               ClipOval(
  45.                 child: Image.asset(
  46.                 "Your Image path",
  47.                 width: "how much you need",
  48.                 fit: BoxFit.cover,
  49.               ),
  50.               ),
  51.             ],
  52.           ),
  53.         ),
  54.       ],
  55.     ),
  56.   ),
  57.   );
  58. }

答案3

得分: 0

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

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

  1. SafeArea ->
  2. Scaffold ->
  3. Center ->
  4. Container ->
  5. 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.

  1. Safearea ->
  2. Scaffold ->
  3. Center ->
  4. Container ->
  5. AssetImage or NetworkImage

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

发表评论

匿名网友

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

确定