7. Material主题的基础-MaterialApp
简介
为了简化大家的使用,虽然flutter推荐所有的widget都有自己来进行搭建,但是在大框架上面,flutter提供了Material和Cupertino两种主题风格的Widgets集合,大家可以在这两种风格的继承上进行个性化定制和开发。
这两种风格翻译成中文就是:材料和库比蒂诺?什么鬼....我们还是使用默认的英文名来称呼它们吧。
本文我们将会深入讲解Material主题的基础-MaterialApp。
MaterialApp初探
如果你使用最新的android Studio创建一个flutter项目的话,android Studio会自动为你创建一个基于flutter的应用程序。
我们来看下自动创建的main.dart文件:
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
)
}
这个build方法返回的widget就是这个flutter应用程序的根Widget。可以看到,默认情况下是返回一个MaterialApp。
在上面的样例代码中,为MaterialApp设置了tile,theme和home属性。
title是MaterialApp的标题,theme是整个MaterialApp的主题,home表示的是app进入时候应该展示的主页面。
默认情况下MyHomePage会返回一个类似下面代码的Scaffold:
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Text(
'home page',
),
],
),
),
);
这样我们可以得到常见的MaterialApp界面:
MaterialApp详解
有了上面的框架,我们就可以在home中构建自己的组件,从而开始flutter的愉快app之旅。