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 ), ), ), ); } } /// 主页面
现在就可以打开设备运行查看效果了。