1、
MaterialApp:他是一个材料设计的app组件，通常用于放在界面的根节点
Scaffold:是flutter封装的一个带有AppBar、底部的导航栏BottomNavigationBar、侧边栏等这些效果的一个组件，也就是说借助Scaffold，可以轻松地实现一个flutter的页面
AppBar: 就是App顶部的导航栏
BotomNavigationBar:是App底部的导航栏
RefreshIndication:刷新的指示器
Image:图片组件
TextField:输入框组件
PageView: PageView组件
2、
MaterialApp:通过它可以很轻松地设计一个材料设计的App
继承自StatefulWidget,允许设置标题title、主题theme、home节点（就是整个页面）、
3、
Scaffold:通过Scaffold可以很轻松地实现app的appBar的设置、body的设置、右侧的悬浮按钮floatingActionButton的设置、侧边栏drawer的设置、底部的导航栏bottomNavigationBar的设置
它是一个完整的页面
4、
BottomNavigationBar:底部导航栏
至少设置两个BottomNavigationBarItem
改变底部导航栏的状态
界面切换：
5、
FloatingActionButton:右侧的悬浮框
6、
RefreshIndicator:刷新组件，一定要配合列表一起使用
7、
ImageView:网上加载图片
8、
TextField:输入框
9、
PageView:可以左右滑动
10、
代码：
import 'package:flutter/material.dart'; import 'package:flutter_color_plugin/flutter_color_plugin.dart'; void main() => runApp(LessGroupPage()); //StatefulWidget与基础组件 class StateFulGroup extends StatefulWidget{ @override State<StatefulWidget> createState() => _StateFulGroupState(); } class _StateFulGroupState extends State<StateFulGroup>{ int _currentIndex=0; Future<Null> _handleRefresh()async{ await Future.delayed(Duration(milliseconds: 200)); return null; } _item(String title,Color color){ return Container( alignment: Alignment.center, decoration: BoxDecoration(color: color), child: Text(title,style: TextStyle(fontSize: 22,color:Colors.white)), ); } @override Widget build(BuildContext context) { TextStyle textStyle=TextStyle(fontSize: 20); return MaterialApp( title: 'StatefulWidget与基础组件', theme: ThemeData( primarySwatch: Colors.yellow, ), home: Scaffold( appBar: AppBar(title: Text('StatefulWidget与基础组件')), bottomNavigationBar: BottomNavigationBar( //默认选中第0个 currentIndex: _currentIndex, onTap: (index){ setState(() { //当点击后回调该方法，改变点击的index _currentIndex=index; }); }, items:[ BottomNavigationBarItem( icon: Icon(Icons.home,color: Colors.grey), activeIcon: Icon(Icons.home,color: Colors.blue), title:Text('首页') ), BottomNavigationBarItem( icon: Icon(Icons.list,color: Colors.grey), activeIcon: Icon(Icons.list,color: Colors.blue), title:Text('列表') ) ]), floatingActionButton: FloatingActionButton( onPressed: null, child: Text('点我') ), body: _currentIndex==0? RefreshIndicator( child: ListView( children: <Widget>[ Container( decoration: BoxDecoration(color: Colors.blue), alignment: Alignment.center, child: Column( children: <Widget>[ //网上加载图片 Image.network('http://www.devio.org/img/avatar.png', width: 100, height: 100,), TextField( //输入文本的样式 decoration: InputDecoration( contentPadding: EdgeInsets.fromLTRB(5, 0, 0, 0), hintText: '请输入', hintStyle: TextStyle(fontSize: 15) ), ), Container( height: 100, margin: EdgeInsets.only(top: 10), decoration: BoxDecoration(color: Colors.lightBlueAccent), child: PageView( children: <Widget>[ _item("Page1", Colors.deepPurple), _item("Page2", Colors.green), _item("Page3", Colors.red), ], ), ) ], ), ) ] ), onRefresh: _handleRefresh) :Text("列表"), ), ); } } //StateLessWidget与基础组件 class LessGroupPage extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { TextStyle textStyle=TextStyle(fontSize: 20); return MaterialApp( title: 'StatelessWidget与基础组件', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( appBar: AppBar(title: Text('StatelessWidget与基础组件')), body: Container( decoration: BoxDecoration(color: Colors.blue), alignment: Alignment.center, child: Column( children: <Widget>[ Text('I am an Text',style: textStyle), Icon(Icons.android,size: 50,color: Colors.red), CloseButton(), BackButton(), Chip( //材料设计中一个非常有趣的小部件 avatar: Icon(Icons.people), label: Text('StatelessWidget与基础组件'), ), Divider( height: 10,//容器高度，不是线的高度 indent: 10,//左侧间距 color: Colors.orange ), Card( color: Colors.red, elevation: 5,//阴影 margin: EdgeInsets.all(10), child: Container( padding: EdgeInsets.all(10), child: Text('I am Card',style: textStyle,), ), ), AlertDialog( title: Text('盘它'), content: Text('你这个糟老头子坏得很'), ) ], ), ), ), ); } }
