入口程序
所有的应用都有一个入口程序,通常是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
),
),
),
);
}
}///主页面
现在就可以打开设备运行查看效果了。