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

入口程序

所有的应用都有一个入口程序，通常是main函数引导进入应用程序，入口程序主要做一下几个方面的处理：

1、自定义主题：通过自定义将主题定义为XX风格，定义导航栏、弹出菜单等。

2、定义路由表：为整个应用程序作导航使用。例如：整个应用分三块需要路由，分别是：应用程序app、好友动态frends、搜索页面search。

3、指定首页：打开应用的第一个页面即为首页。通常首页并不是应用程序的主页面，而是加载页面。

指定方式：  home:new LoadingPage()

4、打开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);

加载页面

其实加载页面和普通的页面并没有什么两样，唯一的区别是，加载页面是伴随着应用程序的加载完成的。由于这个过程是需要时间处理的，所以这个页面需要停留一定的时间，通常设置成几秒即可。

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();
    //在加载页面停顿3秒
    new Future.delayed(Duration(seconds: 3),(){
      print("Flutter即时通讯APP界面实现...");
      Navigator.of(context).pushReplacementNamed("/app");
    });
  }

  @override
  Widget build(BuildContext context){
    return new Center(
      child: Stack(
        children: <Widget>[
          //加载页面居中背景图 使用cover模式
          Image.asset("images/loading.png",fit:BoxFit.cover,),
        ]
      ),
    );
  }

}

5、应用页面：为加载页面跳转后进入的页面。应用页面为整个程序的核心页面。

先写个测试的主页面，后续再添加相关功能。

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
          ),
        ),
      ),
    );
  }
}
/// 主页面

现在就可以打开设备运行查看效果了。