Flutter-UI-基础控件-组件大全
一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。
下面介绍一下Flutter热门控件.
小知识
1.int _currentIndex = 0; 创建带有下划线属性 是一个私有属性
StatefulWidget
状态组件 因为它有一个setState方法
如果想改变页面中的数据就用StatefulWidget
class HomeContent extends StatefulWidget {
HomeContent({Key key}) : super(key: key);
//构造函数 固定写法
_HomeContentState createState() => _HomeContentState();
}
class _HomeContentState extends State<HomeContent> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return null;
}
}
StatelessWidget
无状态组件 不能改变控件里面的值，需要传入builder属性惊醒构造组件，在guilder中可以使用stateSetter改变构造子组件的状态，既可以不用创建类而实现一个局部刷新的组件。
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return null;
}
}
MaterialApp 应用
是一个根组件 作为App的根组件 相当于每个页面都要加的 加了之后页面默认是白色的。不然是黑色的，MaterialApp作为一个顶级组件，包含路由生成器，主题，语言，主页等属性。
属性
| 属性 | 注释 |
|---|---|
| home | 主页[Widget] |
| theme | 主题 |
| title | 任务栏标题 例如: ThemeData[] 下面有主题代码 |
| debugShowCheckedModeBanner | 开启角标 例如: true false |
| showPerformanceOverlay | 开启性能浮层 例如: true false |
| debugShowMaterialGrid | 开启网络 例如: true false |
| onGenerateRoute | 路由生成器 |
主题代码：
ThemeData(
primarySwatch: Colors.blue,//颜色
visualDensity: VisualDensity.adaptivePlatformDensity,//视觉
),
固定页面结构
return MaterialApp(
// debugShowCheckedModeBanner: true,
// showPerformanceOverlay: true,
// debugShowMaterialGrid: true,
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Demol'),
),
body: HomeContent(),
),
theme: ThemeData(
primarySwatch: Colors.blue,//修改主题颜色 想导航栏的颜色
visualDensity: VisualDensity.adaptivePlatformDensity,
),
);
效果
Scaffold 手脚架
说明：一个通用app结构，包括上，下，左，右，中，浮动按键补位，对应位置可盛放组件。
属性：
| 属性 | 注释 |
|---|---|
| appBar | 头部组件 AppBar(里面包含的属性非常多,点进去就能查看) 常用title 例如：下面有代码 |
| body | 内容组件(当前界面所显示的主要内容) 【widget】 |
| drawer | 左右滑动组件，抽屉菜单控件 |
| bottomNavigationBar | 底部组件 例如：下面有代码 |
| endDrawer | 右侧滑动组件 例如：下面有代码 |
| backgroundColor | 背景颜色 例如：下面有代码 |
| floatingActionButton | 浮动按键 例如：下面有代码 |
| floatingActionButtonLocation | 浮动按键位置 FloatingActionButtonLocation.endFloat, |
floatingActionButtonLocation 用法：
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: (){},
),
endDrawer / drawer 用法：
endDrawer: Drawer(
elevation: 1,
child: Image.asset('https://www.itying.com/images/flutter/2.png',
width: 100,
height: 100,
fit: BoxFit.cover,),
),
AppBar 用法
appBar: AppBar(
title: Text('Flutter Demo'),
backgroundColor: Colors.amber,
centerTitle：true,
actions: <Widget>[Icon(Icons.star),Icon(Icons.add)],
bottom: TabBar(//底部导航栏
isScrollable: true,
indicatorColor: Colors.orangeAccent,
tabs: _tabController,
),
),
Scaffold 全部代码
home:Scaffold(
endDrawer: Drawer(
elevation: 1,
child: Image.asset('https://www.itying.com/images/flutter/2.png',
width: 100,
height: 100,
fit: BoxFit.cover,),
),
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: (){},
),
appBar: AppBar(
title: Text('Flutter Demo'),
backgroundColor: Colors.amber,
actions: <Widget>[Icon(Icons.star),Icon(Icons.add)],
),
body: Center(
child: Container(
child: Text(
'i am is text',
textAlign: TextAlign.center,
overflow: TextOverflow.clip,
softWrap:false,
style: TextStyle(
backgroundColor: Colors.amber,
color: Colors.blue,
fontSize: 20,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
letterSpacing: 10,
fontFamily: 'DancingScript',
decoration: TextDecoration.underline,
decorationThickness: 3,
decorationStyle: TextDecorationStyle.wavy,
decorationColor: Colors.red,
shadows: [
Shadow(
color: Colors.cyanAccent,
offset:Offset(1,1),
blurRadius: 10,
),
Shadow(
color: Colors.blue,
offset:Offset(1,1),
blurRadius: 10,
),
],
),
),
),
),
),
Divider 水平分割线
说明：水平分割线可以指定粗细，高度，颜色，左右边距信息。
| 属性 | 注释 |
|---|---|
| color | 颜色 |
| thickness | 粗细 |
| indent | 前面空缺长度 |
| endIndent | 后面空缺长度 |
| height | 站位高 |
Divider(),//相当于ios的line，是一条线来的
例子：
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
var dataColor = [Colors.red, Colors.yellow, Colors.blue, Colors.green];
var dataLineWidth = [1.0,2.0,3.0,4.0];
var data = Map.fromIterables(dataColor, dataLineWidth);
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home:Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
body: Column(
children: dataColor.map((e) => Divider(
color: e,
thickness: data[e],
indent: 100,
endIndent: 10,
height: 30,
)).toList(),
),
),
);
}
}
效果：
Center 居中容器
作用:用于中心对齐文字，可容纳一个子组件，并使其居中于父组件，是Align组件的一种精简模式。
属性
| 属性 | 注释 |
|---|---|
| child | 孩子组件【Widget】 |
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
var dataColor = [Colors.red, Colors.yellow, Colors.blue, Colors.green];
var dataLineWidth = [1.0,2.0,3.0,4.0];
var data = Map.fromIterables(dataColor, dataLineWidth);
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home:Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
body: Center(
child: Container(
width: 50,
height: 50,
color: Colors.red,
),
),
),
);
}
}
效果
Text 文本
用于显示文字组件。
| 属性 | 说明 |
|---|---|
| textAlign | 对齐方式：leftright，center，justify，start，end |
| overflow | TextOverflow.clip ellipsis 超出一行3个点 fade 超出一行渐变 clip 超出一行裁剪） |
| maxLines | 设置Label的行数 例如：3 |
| textScaleFactor | 字体放大两倍 例如：2 |
| textDirection | 文字方向 TextDirection.ltr TextDirection.rtl |
| softWrap | 是否换行 true, false |
| 属性 style | 说明: 文字样式 TextStyle() |
|---|---|
| backgroundColor | 背景颜色 例如：Colors.amber |
| color | 文字颜色 例如：Colors.blue |
| fontSize | 文字大小 例如： 20 |
| fontWeight | 字重 normal bold w100 w200 … w900 例如：FontWeight.bold |
| fontStyle | 字体样式 italic, normal 例如：FontStyle.italic |
| letterSpacing | 字距 例如：10 |
| fontFamily | 文字字体 例如：‘DancingScript’ |
| shadows | 文字【List】 例如：下面的阴影代码 |
| decoration | 装饰线 none，underline，overline，lineThrough 例如：TextDecoration.underline |
| decorationThickness | 装饰线粗 例如：3 |
| decorationStyle | 装饰线样式 solid，double，dotted，dashed，wavy 例如：TextDecorationStyle.wavy |
| decorationColor | 颜色 例如：Colors.red |
阴影代码：
shadows: [
Shadow(
color: Colors.cyanAccent,
offset:Offset(1,1),
blurRadius: 10,
),
Shadow(
color: Colors.blue,
offset:Offset(1,1),
blurRadius: 10,
),
],
例子：
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
var dataColor = [Colors.red, Colors.yellow, Colors.blue, Colors.green];
var dataLineWidth = [1.0,2.0,3.0,4.0];
var data = Map.fromIterables(dataColor, dataLineWidth);
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home:Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
body: Center(
child: Container(
child: Text(
'i am is text',
textAlign: TextAlign.center,
overflow: TextOverflow.clip,
softWrap:false,
style: TextStyle(
backgroundColor: Colors.amber,
color: Colors.blue,
fontSize: 20,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
letterSpacing: 10,
fontFamily: 'DancingScript',
decoration: TextDecoration.underline,
decorationThickness: 3,
decorationStyle: TextDecorationStyle.wavy,
decorationColor: Colors.red,
shadows: [
Shadow(
color: Colors.cyanAccent,
offset:Offset(1,1),
blurRadius: 10,
),
Shadow(
color: Colors.blue,
offset:Offset(1,1),
blurRadius: 10,
),
],
),
),
),
),
),
);
}
}
效果：
Container 容器
容器组件，用于容纳单个子组件。集成了若干个单子组件的功能，入内外边框，变形，装饰，约束等.
| 属性 | 注释 |
|---|---|
| child | 子组件【Widget】 |
| width | 宽 |
| height | 高 |
| color | 颜色 例如：Colors.grey |
| transform | 旋转 例如: Matrix4.skew(3.14/10,0) |
| alignment | 对齐定位 例如: Alignment.bottomRight |
| padding | 内边距 例如：EdgeInsets.all(10) |
| margin | 外边距 例如：EdgeInsets.all(10) |
| decoration | 装饰 边线，圆弧，颜色，渐变色，阴影，图片等内容 |
decoration 使用
decoration: BoxDecoration(
gradient: LinearGradient(
stops: stops,
colors: rainbow.map((e) => Color(e)).toList()
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
bottomRight: Radius.circular(50)
),
boxShadow: [
BoxShadow(
color: Colors.grey,
offset: Offset(1,1),
blurRadius: 10,
spreadRadius: 1
)
]
),
效果
Container的使用
child: Container(
child: Text('fenghanxuqwertyuiopasdfgjkgh'),
height: 300,
width: 300,
decoration: BoxDecoration(
color: Colors.blue,//容器背景颜色
border: Border.all(
color: Colors.green,//边框颜色
width: 2//边框宽度
),
borderRadius: BorderRadius.all(Radius.circular(10.0),),//设置容器圆角
),
//padding: EdgeInsets.all(20),//容器之间的内边距
padding: EdgeInsets.fromLTRB(20, 20, 20, 20),//容器之间的内边距
//margin: EdgeInsets.all(20), //容器之间的外距离
margin: EdgeInsets.fromLTRB(20, 20, 20, 20),//容器之间的外距离
//transform: Matrix4.translationValues(10, 10, 10),//容器位移
//transform: Matrix4.rotationZ(0.3),//旋转 Matrix4.rotationX(0.3), Matrix4.rotationY(0.3),
//transform: Matrix4.diagonal3Values(0.5, 0.5, 0.5),//缩放倍数
alignment: Alignment.bottomRight,//内容相对容器的对齐方式
),
Image 图片
用于显示一张图片，可以从文件，内存，网络，资源里加载，可以指定适应方式，样式，颜色混合模式，重复模式等.
| 属性 | 注释 |
|---|---|
| asset | 加载资源图片 例如：本地图片 网络图片 |
| color | 图片背景颜色 例如: Colors.yellow |
| colorBlendMode | 图片混合模式 BlendMode.colorBurn |
| fit | 显示效果 例如: BoxFit.cover cover:自适应 fill:铺满可能变形 fitWidth:宽充满 filHright:高充满 repeat:多张图片平铺 |
| alignment | 图片相对容器的对齐方式 例如: Alignment.bottomRight |
| centerSlice | 保留区域 例如：Rect.fromLTRB(9, 27, 60, 27 + 1.0) |
| repeat | 图片重复模式 ImageRepeat |
fit属性
大图：
小图
repeat属性 图片重复模式
centerSlice属性 保留区域
alignment属性
网络图片加载不成功两个问题：
1.是否连接wifi
2.重新烧录需要点击是否同意访问网络
3.url是否有效
加载网络图片
child: Image.network(
'https://www.itying.com/images/upload/Image/3333333.png',
alignment: Alignment.bottomRight,//图片相对容器的对齐方式
color: Colors.yellow,//图片背景颜色
colorBlendMode: BlendMode.colorBurn,//图片混合模式
fit: BoxFit.cover,//显示效果 cover 自适应 fill 铺满可能变形 fitWidth 宽充满 filHright 高充满 repeat 多张图片平铺
),
图片切圆方法
加载网络图片
child: Container(
child: ClipOval(
child: Image.asset('https://www.itying.com/images/flutter/2.png',
width: 100,
height: 100,
fit: BoxFit.cover,),
),
),
导入本地图片
child: Container(
child: ClipOval(
child: Image.asset('images/NahuoLogo1024.png',
width: 100,
height: 100,
fit: BoxFit.cover,),
),
),
ListView 列表
列表显示的核心控件，容纳多个子组件，可以通过builder,separeted,custom等构造.有内边距，是否反向，滑动控制器等属性。
| 属性 | 注释 |
|---|---|
| separatorBuilder | 条目构造器 |
| children | 子组件列表 |
| padding | 内边距 例如：EdgeInsets.all(10) |
| itemCount | 条目个数 |
| itemBuilder | 条目构造器 |
| scrollDirection | 滑动方向 例如：Axis.horizontal |
| reverse | 是否反向滑动 |
| shrinkWrap | 无边界时是否包裹 |
separatorBuilder | 条目构造器 的用法：
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final data = <Color>[
Colors.purple[50],
Colors.purple[100],
Colors.purple[200],
Colors.purple[300],
Colors.purple[400],
Colors.purple[500],
Colors.purple[600],
Colors.purple[700],
Colors.purple[800],
Colors.purple[900],
];
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home:Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
backgroundColor: Colors.blue,
),
body: Container(
height: 200,
child: ListView.separated(
itemBuilder: (content, index) => _buildItem(data[index]),
separatorBuilder: (context, index) => Divider(
thickness: 1,
height: 1,
color: Colors.orangeAccent,
),
itemCount: data.length),
),
),
);
}
String colorString(Color color) => "#${color.value.toRadixString(16).padLeft(8,'0').toUpperCase()}";
Widget _buildItem(Color color) => Container(
alignment: Alignment.center,
width: 100,
height: 50,
color: color,
child: Text(
colorString(color),
style: TextStyle(color: Colors.white, shadows: [Shadow(color: Colors.black, offset: Offset(0.5, 0.5),blurRadius: 2)]),
),
);
}
效果：
children | 子组件列表用法：
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final data = <Color>[
Colors.orange[50],
Colors.orange[100],
Colors.orange[200],
Colors.orange[300],
Colors.orange[400],
Colors.orange[500],
Colors.orange[600],
Colors.orange[700],
Colors.orange[800],
Colors.orange[900],
];
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home:Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
backgroundColor: Colors.blue,
),
body: ListView(
padding: EdgeInsets.symmetric(horizontal: 5),
children: data.map((color) => Container(
alignment: Alignment.center,
width: 100,
height: 50,
color: color,
child: Text(
colorString(color),
style: TextStyle(color: Colors.white,shadows: [
Shadow(color: Colors.black, offset: Offset(0.5, 0.5),blurRadius: 2)
]),
),
)).toList(),
),
),
);
}
String colorString(Color color) => "#${color.value.toRadixString(16).padLeft(8,'0').toUpperCase()}";
}
itemBuilder | 条目构造器 用法
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final data = <Color>[
Colors.purple[50],
Colors.purple[100],
Colors.purple[200],
Colors.purple[300],
Colors.purple[400],
Colors.purple[500],
Colors.purple[600],
Colors.purple[700],
Colors.purple[800],
Colors.purple[900],
];
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home:Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
backgroundColor: Colors.blue,
),
body: ListView.builder(
itemCount: data.length,
itemBuilder: (context, index) => _buildItem(data[index]),
),
),
);
}
String colorString(Color color) =>
"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
Widget _buildItem(Color color) => Container(
alignment: Alignment.center,
width: 100,
height: 50,
color: color,
child: Text(
colorString(color),
style: TextStyle(color: Colors.white, shadows: [
Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)
]),
),
);
}
最简单的列表
return ListView(
// scrollDirection: Axis.horizontal,//设置水平列表
padding: EdgeInsets.all(10),//设置上下左右间距20
children: <Widget>[
ListTile(
leading: Icon(Icons.home,color: Colors.blue,size: 40,),//加载系统图标
title: Text(
'fenghanxu',
style: TextStyle(
fontSize: 20,
),
),
subtitle: Text('subtitleFenghanxu'),
trailing: Icon(Icons.search,color: Colors.blue,size: 40,),
),
ListTile(
leading: Image.network('https://www.itying.com/images/flutter/1.png'),//加载网络图片
title: Text('fenghanxu'),
subtitle: Text('subtitleFenghanxu'),
),
],
);
效果：
通过for循环实现动态遍历ListItem列表
class _MyHomePageState extends State<MyHomePage> {
List<Widget> _getData(){
List<Widget> list = new List();
for(var i = 0; i < 20; i++){
list.add(ListTile(
title: Text('i am is $i list'),
));
}
return list;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: ListView(
// scrollDirection: Axis.horizontal,//设置水平列表
padding: EdgeInsets.all(10),//设置上下左右间距20
children: _getData(),
),
),
);
}
}
效果：
GridView 网格
说明：容纳多个组件，并以网格的方式。可以通过count，extent,count,builder等构造方法。有内边距，是否反向，滑动控制器的属性。
| 属性 | 注释 |
|---|---|
| maxCrossAxisExtent | box轴向长度【double】 |
| reverse | 是否反向滑动【bool】 |
| shrinkWrap | 无边界时是否包裹【bool】 |
| children | 子组件列表【List】 |
| crossAxisCount | 主轴一行box数量【int】 |
| mainAxisSpacing | 主轴每行间距【double】 |
| crossAxisSpacing | 交叉轴每行间距【double】 |
| childAspectRatio | box主长/交叉轴长【double】 |
| itemCount | 条目数量【int】 |
| gridDelegate | 【网格代理】 |
| itemBuilder | 【条目构造器】 |
GridView. extent 构造
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home:Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
backgroundColor: Colors.blue,
),
body: ExtentGridView(),
),
);
}
}
class ExtentGridView extends StatelessWidget {
final data = List.generate(128, (i) => Color(0xFF00FFFF - 2*i));
@override
Widget build(BuildContext context) {
return Container(
height: 200,
child: GridView.extent(
scrollDirection: Axis.horizontal,
maxCrossAxisExtent: 80.0,
mainAxisSpacing: 2,
crossAxisSpacing: 2,
childAspectRatio: 0.618,
children: data
.map((color) => _buildItem(color))
.toList(),
),
);
}
Container _buildItem(Color color) => Container(
alignment: Alignment.center,
width: 100,
height: 30,
color: color,
child: Text(
colorString(color),
style: TextStyle(color: Colors.white, shadows: [
Shadow(
color: Colors.black,
offset: Offset(.5, .5),
blurRadius: 2)
]),
),
);
String colorString(Color color) =>
"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}
GridView.count 静态网格布局
class CustomGridView extends StatelessWidget {
final data = List.generate(128, (i) => Color(0xFFFF00FF - 2*i));
@override
Widget build(BuildContext context) {
return Container(
height: 200,
child: GridView.count(
crossAxisCount: 4,
mainAxisSpacing: 2,
crossAxisSpacing: 2,
childAspectRatio: 1/0.618,
children: data
.map((color) => _buildItem(color))
.toList(),
),
);
}
Container _buildItem(Color color) => Container(
alignment: Alignment.center,
width: 100,
height: 30,
color: color,
child: Text(
colorString(color),
style: TextStyle(color: Colors.white, shadows: [
Shadow(
color: Colors.black,
offset: Offset(.5, .5),
blurRadius: 2)
]),
),
);
String colorString(Color color) =>
"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}
GridView.builder 动态网格布局
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home:Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
backgroundColor: Colors.blue,
),
body: BuilderGridView(),
),
);
}
}
class BuilderGridView extends StatelessWidget {
final data = List.generate(128, (i) => Color(0xFF33FFF - 2*i));
@override
Widget build(BuildContext context) {
return Container(
height: 200,
child: GridView.builder(
itemCount: data.length,
scrollDirection: Axis.vertical,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(//网格代理：定交叉轴数目
crossAxisCount: 4,//条目个数
mainAxisSpacing: 5,//主轴间距
crossAxisSpacing: 5,//交叉轴间距
childAspectRatio:1/0.618),
itemBuilder: (_, int position)=> _buildItem(data[position])
),
);
}
Container _buildItem(Color color) => Container(
alignment: Alignment.center,
width: 100,
height: 30,
color: color,
child: Text(
colorString(color),
style: TextStyle(color: Colors.white, shadows: [
Shadow(
color: Colors.black,
offset: Offset(.5, .5),
blurRadius: 2)
]),
),
);
String colorString(Color color) =>
"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}
BoxDecoration 边框
BoxDecoration(
color: Colors.blue,//容易背景颜色
border: Border.all(
color: Colors.green,//边框颜色
width: 2//边框宽度
),
borderRadius: BorderRadius.all(Radius.circular(10.0),),//设置容器圆角
)
SizedBox 定尺寸盒
可容纳一个子组件，通过制定宽高限定子组件容身区域
| 属性 | 注释 |
|---|---|
| child | 孩子组件【Widget】 |
| width | 宽【double】 |
| height | 高【double】 |
SizedBox( height: 20,)//图片跟文字的间距是20
Padding 外边框控件
可容纳一个子组件，添加自身内边距来限制孩子组件的站位，核心属性未padding
| 属性 | 注释 |
|---|---|
| child | 孩子组件【Widget】 |
| EdgeInsets.only(top:10,left: 10) | 单独边距 |
| EdgeInsets.symmetric(vertical: 30,horizontal: 10) | 方向边距 |
| EdgeInsets.all(20) | 四面等边距 |
| EdgeInsets.fromLTRB(10, 10, 0, 0) | 四周单独设置 |
单独边距
child: Padding(
padding: EdgeInsets.only(top:10,left: 10),
child: _buildChild(),
),
方向边距
child: Padding(
padding: EdgeInsets.symmetric(vertical: 30,horizontal: 10),
child: _buildChild(),
),
四面等边距
child: Padding(
padding: EdgeInsets.all(20),
child: _buildChild(),
),
四周单独设置
return Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network(
'https://www.itying.com/images/flutter/1.png', fit: BoxFit.cover),
);
Row 水平布局控件
排布方向为横向的flex布局，可容纳多个组件，其他属性全部一致
| 属性 | 注释 |
|---|---|
| children | 组件列表【List】 |
| mainAxisAlignment | 主轴对齐 例如：MainAxisAlignment.spaceEvenly |
| crossAxisAlignment | 交叉轴对齐 例如：CrossAxisAlignment.end |
| textBaseline | 文字基线 |
| verticalDirection | 竖直方向 例如：VerticalDirection.down |
| mainAxisSize | 主轴尺寸 例如：MainAxisSize.max MainAxisSize.min |
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home:Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
backgroundColor: Colors.blue,
),
body: CustomRow(),
),
);
}
}
class CustomRow extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 70,
color: Color(0x4484FFFF),
child: Row(
children: <Widget>[
Padding(
child: Icon(
Icons.add_location,
size: 30,
color: Colors.pink,
),
padding: EdgeInsets.only(left: 25, right: 20),
),
Expanded(
child: Text(
"附近",
style: TextStyle(fontSize: 18),
),
),
Padding(
child: Icon(Icons.keyboard_arrow_right, color: Colors.black38),
padding: EdgeInsets.only(right: 25),
),
],
));
}
}
Column 垂直布局控件
排布方向为竖向的flex布局，可容纳多个组件，其他属性全部一致
| 属性 | 注释 |
|---|---|
| children | 组件列表【List】 |
| mainAxisAlignment | 主轴对齐 例如：MainAxisAlignment.spaceEvenly |
| crossAxisAlignment | 交叉轴对齐 例如：CrossAxisAlignment.end |
| textBaseline | 文字基线 |
| verticalDirection | 竖直方向 例如：VerticalDirection.down |
| mainAxisSize | 主轴尺寸 例如：MainAxisSize.max MainAxisSize.min |
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home:Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
backgroundColor: Colors.blue,
),
body: CustomColumn(),
),
);
}
}
class CustomColumn extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
_buildTitle(),
_buildContent(context),
],
);
}
Widget _buildTitle() {
return Container(
height: 70,
color: Color(0x4484FFFF),
child: Row(
children: <Widget>[
Padding(
child: Icon(
Icons.add_location,
size: 30,
color: Colors.pink,
),
padding: EdgeInsets.only(left: 25, right: 20),
),
Expanded(
child: Text(
"附近",
style: TextStyle(fontSize: 18),
),
),
Padding(
child: Icon(Icons.keyboard_arrow_right, color: Colors.black38),
padding: EdgeInsets.only(right: 25),
),
],
));
}
Widget _buildContent(ctx) => Container(
width: MediaQuery.of(ctx).size.width,
color: Colors.orangeAccent,
height: 100,
child: Icon(
Icons.android,
size: 50,
color: Colors.white,
),
);
}
Expanded 延展组件
父类是Flexble，相当于一个fit类型为tight的Flexble组件，可嵌套孩子利用剩余空间对站位空间进行延展。
| 属性 | 注释 |
|---|---|
| child | 孩子【Widget】 |
| flex | 剩余控件分配占比【int】 |
return Container(
width: 400,
height: 100,
color: Colors.pink,
child: Row(
//center start end spaceAround 两边留固定空隙 spaceBetween 中间留空隙 spaceEvenly 两边留平均空隙
mainAxisAlignment: MainAxisAlignment.spaceEvenly,//X轴的显示方式
//crossAxisAlignment: CrossAxisAlignment.end,//Y轴的显示方式 要用一个参考物用的比较小
children: <Widget>[
Expanded(
flex: 1,
child: IconContainer(Icons.search,color: Colors.blue,size: 30,),
),
Expanded(
flex: 2,
child: IconContainer(Icons.home,color: Colors.yellow,size: 30,),
),
],
),
);
Stack 堆叠布局
可容纳多个组件，以堆叠的方式摆放组件，后者居中，拥有alignment属性，可与Positioned组件联合使用，精确定位。
| 属性 | 注释 |
|---|---|
| children | 组件列表【List】 |
| textDirection | 孩子的布局方向 例如：TextDirection.rtl |
| alignment | 对齐方式 例如：Alignment.topRight |
| overflow | 溢出模式 |
| fit | 适应模式 例如：StackFit.loose |
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home:Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
backgroundColor: Colors.blue,
),
body: CustomStack(),
),
);
}
}
class CustomStack extends StatelessWidget {
@override
Widget build(BuildContext context) {
var yellowBox = Container(
color: Colors.yellow,
height: 100,
width: 100,
);
var redBox = Container(
color: Colors.red,
height: 90,
width: 90,
);
var greenBox = Container(
color: Colors.green,
height: 80,
width: 80,
);
var cyanBox = Container(
color: Colors.cyanAccent,
height: 70,
width: 70,
);
return Container(
width: 200,
height: 120,
color: Colors.grey.withAlpha(33),
child: Stack(
textDirection: TextDirection.rtl,
fit: StackFit.loose,
alignment: Alignment.topRight,
// overflow: Overflow.clip, // 1.22.0 被去除
children: <Widget>[yellowBox, redBox, greenBox, cyanBox],
),
);
}
}
Stack配合Align 使用 Stack 它可以控制子组件的位置
return Center(
child: Container(
height: 400.0,
width: 300.0,
color: Colors.red,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Align(
alignment: Alignment.topLeft,
child: Icon(Icons.home,size: 40,color: Colors.white),
),
Align(
alignment: Alignment.center,
child: Icon(Icons.search,size: 40,color: Colors.white),
),
Align(
alignment: Alignment.bottomRight,
child: Icon(Icons.select_all,size: 40,color: Colors.white),
),
Align(
alignment: Alignment(1.0,-0.2),
child: Icon(Icons.security,size: 40,color: Colors.white),
),
],
),
),
);
Positioned组件只能用于Stack 中，可以指定左右上下的距离对某个组件进行位置精确安放。
Stack配合Positioned 使用 Stack 它可以控制子组件的位置
return Center(
child: Container(
height: 400.0,
width: 300.0,
color: Colors.red,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Positioned(
left: 10,
child: Icon(Icons.home,size: 40,color: Colors.white),
),
Positioned(
bottom: 0,
left: 100,
child: Icon(Icons.search,size: 40,color: Colors.white),
),
Positioned(
right: 10,
top: 10,
child: Icon(Icons.select_all,size: 40,color: Colors.white),
),
Positioned(
bottom: 10,
left: 10,
child: Icon(Icons.security,size: 40,color: Colors.white),
),
],
),
),
);
AspectRatio 比例盒
可容纳一个子组件，通过指定宽高比AspectRatio，来限定子组件容身区域。
用于设置子控件是父控件的屏幕比例
AspectRatio的作用是调整child到设置的宽高比
| 属性 | 注释 |
|---|---|
| child | 孩子组件【Widget】 |
| aspectRatio | 宽高比例【double】 |
import 'package:flutter/material.dart';
class CustomAspectRatio extends StatefulWidget {
@override
_CustomAspectRatioState createState() => _CustomAspectRatioState();
}
class _CustomAspectRatioState extends State<CustomAspectRatio> {
var _ratio = 0.75;
@override
Widget build(BuildContext context) {
var child = Container(
alignment: Alignment.center,
color: Colors.cyanAccent,
width: 50,
height: 50,
child: Text("Static"),
);
var box = AspectRatio(
aspectRatio: _ratio,
child: Container(
color: Colors.orange,
child: Icon(
Icons.android,
color: Colors.white,
)),
);
return Column(
children: <Widget>[
_buildSlider(),
Container(
color: Colors.grey.withAlpha(22),
width: 300,
height: 100,
child: Row(
children: <Widget>[child, box, child],
),
),
],
);
}
Widget _buildSlider() => Slider(
divisions: 20,
min: 0.1,
max: 2.0,
label: _ratio.toStringAsFixed(2),
value: _ratio,
onChanged: (v) => setState(() => _ratio = v));
}
Card 卡片组件 底部带阴影组件
基于Material组件实现，用于将单个组件卡片化，并使其具有投影效果。可加外边框，可以自定义卡片形状。
| 属性 | 注释 |
|---|---|
| shape | 形状 |
| margin | 外边距【double】 |
| color | 颜色 |
| child | 孩子 |
| elevation | 影深【double】 |
shape 形状属性的使用
import 'package:flutter/material.dart';
import '../../../../app/utils/pather.dart';
class ShapeCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Card(
color: Color(0xffB3FE65),
elevation: 6,
shape: StarShapeBorder(),
child: Container(
alignment: Alignment.center,
width: 100,
height: 100,
child: Text("Card", style: TextStyle(fontSize: 20)),
),
);
}
}
class StarShapeBorder extends ShapeBorder {
@override
EdgeInsetsGeometry get dimensions => null;
@override
Path getInnerPath(Rect rect, {TextDirection textDirection}) {
return null;
}
@override
Path getOuterPath(Rect rect, {TextDirection textDirection}) =>
Pather.create.nStarPath(9, 50, 40, dx: 50, dy: 50);
@override
void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {
}
@override
ShapeBorder scale(double t) {
return null;
}
}
效果
elevation | 影深【double】 属性的使用
import 'package:flutter/material.dart';
class CustomCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Card(
color: Color(0xffB3FE65),
elevation: 4,
margin: EdgeInsets.all(10),
child: Container(
alignment: Alignment.topLeft,
width: 200,
height: 0.618*200,
margin: EdgeInsets.all(10),
child: Text("Card", style: TextStyle(fontSize: 20)),
),
);
}
}
效果
return Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
ListTile(
title: Text('张三',style: TextStyle(fontSize: 28)),
subtitle: Text('高级工程师'),
),
ListTile(
title: Text('电话：15989954385'),
),
ListTile(
title: Text('地址： 逢简冯家大街'),
)
],
),
);
效果
RaisedButton 浮起按钮
有阴影的浮起按钮，基于MaterialButton实现，所有属性和MaterialButton类似。
| 属性 | 注释 |
|---|---|
| color | 颜色 |
| splashColor | 水波纹颜色 |
| elevation | 影深 |
| child | 子组件 |
| textColor | 子组件颜色 |
| highlightColor | 长按高亮色 |
| padding | 内边距 |
| onPressed | 点击事件 例如： onPressed: (){} |
import 'package:flutter/material.dart';
class CustomRaisedButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RaisedButton(
color: Colors.blue,
splashColor: Colors.green,
onPressed: () {},
child: Text("RaisedButton"),
textColor: Color(0xffFfffff),
padding: EdgeInsets.all(8),
elevation: 5,
highlightColor: Color(0xffF88B0A),
);
}
}
Wrap 滑页栏
可容纳多个组件，按照指定方向依次排布，可以很方便处理孩子的间距，当越界时可以自动换行，拥有主轴和交叉轴的对齐方式，比较灵活。
可以做不等宽按键布局
| 属性 | 注释 |
|---|---|
| child | 子组件 【Widget】 |
| spacing | 主轴条目间距 【double】 |
| runSpacing | 交叉轴条目间距 【double】 |
| direction | 主轴对齐【Axis】 |
| verticalDirection | 竖值方向 |
| textDirection | 文字方向 |
| alignment | 主轴对齐 |
| crossAxisAlignment | 交叉轴对齐 |
import 'package:flutter/material.dart';
class DirectionWrap extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Wrap(
children: Axis.values
.map((mode) => Column(children: <Widget>[
Container(
margin: EdgeInsets.all(5),
width: 160,
height: 100,
color: Colors.grey.withAlpha(33),
child: _buildItem(mode)),
Text(mode.toString().split('.')[1])
]))
.toList());
}
final yellowBox = Container(
color: Colors.yellow,
height: 30,
width: 50,
);
final redBox = Container(
color: Colors.red,
height: 40,
width: 40,
);
final greenBox = Container(
color: Colors.green,
height: 40,
width: 20,
);
final blackBox = Container(
color: Colors.black,
height: 10,
width: 10,
);
final purpleBox = Container(
color: Colors.purple,
height: 20,
width: 20,
);
final orangeBox = Container(
color: Colors.orange,
height: 80,
width: 20,
);
final cyanBox = Container(
color: Colors.cyanAccent,
height: 10,
width: 20,
);
_buildItem(mode) => Wrap(
direction: mode,
runSpacing: 10,
spacing: 10,
children: <Widget>[
yellowBox, redBox, greenBox, cyanBox,
blackBox, purpleBox, orangeBox,
],
);
}
verticalDirection | 竖值方向 的属性使用
textDirection | 文字方向 的属性使用
alignment | 主轴对齐 的属性使用
crossAxisAlignment | 交叉轴对齐 的属性使用
BarNavigationView 底部导航栏
import 'package:flutter/material.dart';
import 'res/listData.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Tabs(),
);
}
}
//StatefulWidget
class Tabs extends StatefulWidget {
Tabs({Key key}) : super(key: key);
_TabsState createState() => _TabsState();
}
class _TabsState extends State<Tabs> {
int _currentIndex = 0;
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(title: Text('Flutter Demol'),),
body: HomePage(),
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._currentIndex,
onTap: (int index){
setState(() {
this._currentIndex = index;
});
},
iconSize:36.0,//icon大小
fixedColor:Color.red,//icon颜色
type:BottomNavigationBarType.fixed,//设置tabbar可以有多个按钮
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('首页'),
),
BottomNavigationBarItem(
icon: Icon(Icons.category),
title: Text('分类'),
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text('设置'),
),
],
),
);
}
}
class HomePage extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Text('fenghanxu'),
);
}
}
缺小：tabbar底部导航栏切换控制器Demol 30视频。
route 路由
基本路由 不带参数
return Container(
child: Center(
child: RaisedButton(
child: Text('按键-搜索'),
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
onPressed: (){
//路由
Navigator.of(context).push(
MaterialPageRoute(
builder: (context)=>searchPage()
)
);
},),
),
);
基本路由 带参数
return Container(
child: Center(
child: RaisedButton(
child: Text('按键-搜索'),
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
onPressed: (){
//路由
Navigator.of(context).push(
MaterialPageRoute(
builder: (context)=>searchPage(title: 'sendToTitle',)
)
);
},),
),
);
返回pop
Navigator.of(content).pop();
命名路由
搜索控制器代码
路由代码
跳转 不带参数
跳转 带参数
路由替换
路由替换 用下一个控制器替换当前控制器 不断替换回来根目录 就是跳转之后返回的时候上一个控制器被销毁了
Navigator.of(context).pushReplacementNamed('/login');
普通路由跳转回根目录
Navigator.of(context).pushAndRemoveUntil(
new MaterialPageRoute(builder: (context) => new Tabs(index: 0,)),
(route) => route == null
);
AppBar 应用头栏
一个应用顶部栏的通用结构，可在指定的部位放置相应的组件，常用于Scaffold组件中。
| 属性 | 注释 |
|---|---|
| leading | 左侧组件【Widget】 |
| title | 中间组件【Widget】 |
| actions | 右侧组件【LIstanbul】 |
| elevation | 影深 【double】 |
| shape | 形状【ShapBorder】 |
| backgroundColor | 影深-背景颜色 |
| centerTitle | 中间是否居中【bool】 |
| bottom | 底部组件 |
return Scaffold(
appBar: AppBar(
title: Text('Hello Flutter'),
backgroundColor: Colors.red,
centerTitle: true,//标题居中显示
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: (){
print('点击左边按键');
}),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: (){
print('点击右边按键1');
}),
IconButton(
icon: Icon(Icons.settings),
onPressed: (){
print('点击右边按键2');
}),
],
),
body: Center(
child: Container(
child: Text('hello flutter'),
),
),
);
TabBar切换 普通控制器顶部
可滑动和点击标签栏，通常用于AppBar的底部，可与TabBarView联用，实现滑页效果。
TabBar基础使用
| 属性 | 注释 |
|---|---|
| contorller | 控制器 |
| indictiorColor | 指示器颜色 |
| indicatorWeight | 指示器高 |
| indicatorPadding | 指示器边距【EdgensetsGeometry】 |
| indicatorSize | 指示器大小计算方式，TabbarIndicatorSize.label跟文字等宽 TabbarIndicatorSize.tab跟每个tab等宽 |
| labekStyle | 页签文字样式 |
| labelColor | 选中label颜色 |
| labelPadding | 每个label的padding值 |
| unselectedLabelColor | 未选中文字颜色 |
| unselectedLabelStyle | 未选中文字样式 |
| isScrollable | 是否可滑动 |
| onTap | 页签点击回调 |
| tabs | 标签组件 |
注意：通常设置Theme可实现无水波纹，讲Theme关于水波纹的颜色设置为透明即可。
class _categoryPageState extends State<categoryPage> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Row(
children: <Widget>[
Expanded(
child: TabBar(
indicatorColor: Colors.white,//选中Label颜色
labelColor: Colors.white,//选中文字颜色
unselectedLabelColor: Colors.white,//未选中文字颜色
indicatorSize: TabBarIndicatorSize.label,//指示器长度
isScrollable: true,//如果多个按钮的话可以滑动
tabs: <Widget>[
Tab(text: '军事'),
Tab(text: '经济'),
]))
],
),
centerTitle: true, //标题居中显示
),
body: TabBarView(children: <Widget>[
ListView(
children: <Widget>[
ListTile(
title: Text('第一行'),
),
ListTile(
title: Text('第二行'),
),
ListTile(
title: Text('第三行'),
),
],
),
ListView(
children: <Widget>[
ListTile(
title: Text('第一行'),
),
ListTile(
title: Text('第二行'),
),
ListTile(
title: Text('第三行'),
),
],
)
]),
));
}
}
视频35(看3分之一) 有一个更好的tabbar切换方式 没有写源码
Drawer 侧边栏
一般用于Scaffold中的draw和endDraw属性作为左右的滑页栏，可以容纳一个子组件，能指定影深。
属性：
| 属性 | 注释 |
|---|---|
| child | 子组件 |
| elevation | 影深【double】 |
DrawerHeader
class _formPageState extends State<formPage> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
floatingActionButton: FloatingActionButton(
child: Text('Back'),
onPressed: () {
Navigator.of(context).pop();
}),
appBar: AppBar(
title: Text('from'),
),
body: Container(
child: Center(
child: RaisedButton(
child: Text('按键-登录2'),
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
onPressed: () {
Navigator.pushNamed(context, '/login');
// Navigator.of(context).pushReplacementNamed('/login');
},
),
),
),
drawer: Drawer(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: DrawerHeader(
child: Text('hello flutter'),
decoration: BoxDecoration(
color: Colors.blue,//设置头部背景颜色
image: DecorationImage(
image: NetworkImage(
'https://www.itying.com/images/flutter/2.png'),//设置头部背景图片
fit: BoxFit.cover)),//图片平铺
))
],
),
ListTile(
title: Text('我的空间'),
leading: CircleAvatar(
child: Icon(Icons.home),
),
),
Divider(),
ListTile(
title: Text('我的收藏'),
leading: CircleAvatar(
child: Icon(Icons.search),
),
),
Divider(),
ListTile(
title: Text('我的记录'),
leading: CircleAvatar(
child: Icon(Icons.settings),
),
),
Divider(),
ListTile(
title: Text('我的订单'),
leading: CircleAvatar(
child: Icon(Icons.headset),
),
),
],
),
),
);
}
}
UserAccountsDrawerHeader 侧边栏里面的属性(固定样式)
class _formPageState extends State<formPage> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
floatingActionButton: FloatingActionButton(
child: Text('Back'),
onPressed: () {
Navigator.of(context).pop();
}),
appBar: AppBar(
title: Text('from'),
),
body: Container(
child: Center(
child: RaisedButton(
child: Text('按键-登录2'),
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
onPressed: () {
Navigator.pushNamed(context, '/login');
// Navigator.of(context).pushReplacementNamed('/login');
},
),
),
),
drawer: Drawer(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: UserAccountsDrawerHeader(
accountName: Text('Hello Flutter'),//设置标题
accountEmail: Text('Hello Flutter'),//设置副标题
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage('https://www.itying.com/images/flutter/3.png'),//设置头像
),
decoration: BoxDecoration(
color: Colors.green[900],//设置背景颜色
image: DecorationImage(image: NetworkImage('https://www.itying.com/images/flutter/4.png'),fit: BoxFit.cover)//设置背景图片
),
otherAccountsPictures: <Widget>[
Image.network('https://www.itying.com/images/flutter/5.png'),//图片到右上角
Image.network('https://www.itying.com/images/flutter/1.png')//图片到右上角
],
))
],
),
ListTile(
title: Text('我的空间'),
leading: CircleAvatar(
child: Icon(Icons.home),
),
),
Divider(),
ListTile(
title: Text('我的收藏'),
leading: CircleAvatar(
child: Icon(Icons.search),
),
),
Divider(),
ListTile(
title: Text('我的记录'),
leading: CircleAvatar(
child: Icon(Icons.settings),
),
),
Divider(),
ListTile(
title: Text('我的订单'),
leading: CircleAvatar(
child: Icon(Icons.headset),
),
),
],
),
),
);
}
}
侧边栏的路由跳转
