flutter 入口文件配置路由+加载页面

入口文件配置路由

1、路由信息

-- 加载页面 ，通常用于显示新的内容或者广告，加载完成之后进入主页面

-- 主页面 /app

2、配置页面  main.dart

main.dart

// main 入口文件
import 'package:flutter/material.dart';
import './app.dart';
import './loading.dart';


// 应用程序入口

void main() => runApp(MaterialApp(
      debugShowCheckedModeBanner: false,  //去除右上角的Debug标签
      title: '测试',
      // 自定义主题
      theme: mDefaultTheme,
      // 添加路由
      routes: <String, WidgetBuilder>{
        "/app": (BuildContext context) => new App(),  //主页面
      },
      // 首页
      home: new LoadingPage(),  //加载页面
    ));

// 自定义主题
final ThemeData mDefaultTheme = new ThemeData(
    primaryColor: Colors.green,
    scaffoldBackgroundColor: Color(0xFFebebeb),
    cardColor: Colors.green);
/// 首先配置了1个路由，然后就开始显示home页面（加载页面）

3、加载页面loading.dart

loading.dart

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

// 加载页面
class LoadingPage extends StatefulWidget {
  @override
  _LoadingState createState() => new _LoadingState();
}

class _LoadingState extends State<LoadingPage> {
  @override
  void initState() {
    super.initState();
    // 加载页面停顿3s
    new Future.delayed(Duration(seconds: 3), () {
      print("loading.....");
    　Navigator.of(context).pushReplacementNamed("/app");
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Center(
      child: Stack(
        children: <Widget>[
          Image.asset(
            "images/loading.png",
            fit: BoxFit.cover,
          )
        ],
      ),
    );
  }
}

///加载页面，显示图片3s后就开始跳转到主页面/app
// 图片需要在pubspec.yaml里面配置

 

 4、主页面 app.dart

app.dart

import 'package:flutter/material.dart';

// 应用页面使用有状态Widget
class App extends StatefulWidget {
  @override
  AppState createState() => AppState();
}
class AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: new Center(
        child: new Text(
          '主页面',
          textAlign: TextAlign.center,
          style: new TextStyle(
            color: Colors.red[500],
            fontSize: 24.0,
            fontWeight: FontWeight.bold
          ),
        ),
      ),
    );
  }
}
/// 主页面

5、效果图

1、打开设备

2、点击开始

 

3、安装完成后进入加载页面

 4、加载图片3s后，进入主页面

效果比较简单，所以用的截图，复杂的以后可以考虑gif图更直观。