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圖更直觀。