flutter html 加载_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: {"/app": (BuildContext context) => new App(), //主页面

},//首页

home: new LoadingPage(), //加载页面

));//自定义主题

final ThemeData mDefaultTheme = newThemeData(

primaryColor: Colors.green,

scaffoldBackgroundColor: Color(0xFFebebeb),

cardColor: Colors.green);

加载页面

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

import 'package:flutter/material.dart';

import'dart:async';//加载页面

classLoadingPage extends StatefulWidget {

@override

_LoadingState createState()=> new_LoadingState();

}class _LoadingState extends State{

@overridevoidinitState(){

super.initState();//在加载页面停顿3秒

new Future.delayed(Duration(seconds: 3),(){

print("Flutter即时通讯APP界面实现...");

Navigator.of(context).pushReplacementNamed("/app");

});

}

@override

Widget build(BuildContext context){return newCenter(

child: Stack(

children:[//加载页面居中背景图 使用cover模式

Image.asset("images/loading.png",fit:BoxFit.cover,),

]

),

);

}

}

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

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

import 'package:flutter/material.dart';//应用页面使用有状态Widget

classApp extends StatefulWidget {

@override

AppState createState()=>AppState();

}class AppState extends State{

@override

Widget build(BuildContext context) {//TODO: implement build

returnScaffold(

body:newCenter(

child:newText('主页面',

textAlign: TextAlign.center,

style:newTextStyle(

color: Colors.red[500],

fontSize:24.0,

fontWeight: FontWeight.bold

),

),

),

);

}

}///主页面

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