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

現在就可以打開設備運行查看效果了。