flutter 启动页设置

素颜马尾好姑娘i 2021-07-24 11:20 784阅读 0赞

1、在main.dart的MaterialApp内,将home对应的组件内容设置成,启动页所在组件
    2、在启动页所在路由设置启动图片等
    3、在initState()生命周期函数中设置延迟函数,n秒后跳转到其他路由页面即可

代码示例:  
main.dart:

import 'package:flutter/material.dart';
    import 'app.dart';
    import 'loading.dart';
    import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
    import 'dart:async';
    
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatefulWidget { 
      MyApp({ Key key}) : super(key: key);
    
      @override
      _AppState createState() => _AppState();
    }
    
    class _AppState extends State<MyApp> { 
      @override
      Widget build(BuildContext context) { 
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          //启动页组件
          home:Loading(),
    
          theme: ThemeData(
            //主题色
            primaryColor: Color(0xff303030),
            //中间的屏幕背景色
            // scaffoldBackgroundColor: Color(0xFFebebeb),
            cardColor: Color(0xff393a3f)
          ),
          routes: <String,WidgetBuilder>{ 
            "/app":(context)=>MyApps(),
          },
        
        );
      }
    }

启动页组件:

import 'package:flutter/material.dart';
    import 'dart:async';
    
    class Loading extends StatefulWidget { 
      Loading({ Key key}) : super(key: key);
    
      @override
      _LoadingState createState() => _LoadingState();
    }
    
    class _LoadingState extends State<Loading> { 
    
      @override
      void initState() { 
        // TODO: implement initState
        super.initState();
    
        new Future.delayed(Duration(seconds: 3),(){ 
            //3秒后跳转到其他路由
            Navigator.of(context).pushReplacementNamed("/app");
        });
    
      }
    
      @override
      Widget build(BuildContext context) { 
     	//启动图片
        return Container(
           child: Image.asset("images/4.0x/qd.jpg",fit: BoxFit.cover)
        );
      }
    }