Text
文档 https://api.flutter.dev/flutter/widgets/Text-class.html
class ContainerDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text('文本控件'),
),
body: new Column(
children: [
new Text('红色+黑色删除线+25号',
style: new TextStyle(
color: const Color(0xffff0000),
decoration: TextDecoration.lineThrough,
decorationColor: const Color(0xff000000),
fontSize: 25.0
),),
],
),
);
}
}
void main(){
runApp(new MaterialApp(
title: 'text demo',
home: new ContainerDemo(),
));
}
图片.png
image
https://flutter-io.cn/docs/development/ui/widgets/assets
class ImageDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Center(
child: new Image.network('http://pic15.nipic.com/20110628/1369025_192645024000_2.jpg',fit: BoxFit.fitWidth,),
);
}
}
void main(){
runApp(new MaterialApp(
title: 'text demo',
home: new ImageDemo(),
));
}
图片.png
容器控件 Container class
https://api.flutter.dev/flutter/widgets/Container-class.html
class ContainerDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Center(
child: new Container(width: 300.0,
height: 400.0,
decoration: new BoxDecoration(
color: Colors.amberAccent,
border:new Border.all(
color: const Color(0xff6d9eeb),
width: 8.0,
),
borderRadius: const BorderRadius.all(const Radius.circular(48.0))
),
child: new Text('hello',textAlign: TextAlign.center,),
),
);
}
}
void main(){
runApp(new MaterialApp(
title: 'text demo',
home: new ContainerDemo(),
));
}
图片.png
ListViwe
https://api.flutter.dev/flutter/widgets/ListView-class.html
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
final title = "LsitView Demo";
// TODO: implement build
return new MaterialApp(
title: title,
home: new Scaffold(
appBar: new AppBar(
title: new Text(title),
),
body: new ListView(
children: [
new ListTile(
leading: new Icon(Icons.alarm),
title: new Text('Alarm'),
),
new ListTile(
leading: new Icon(Icons.phone),
title: new Text('Phone'),
),
new ListTile(
leading: new Icon(Icons.airplay),
title: new Text('Airplay'),
),
new ListTile(
leading: new Icon(Icons.airplay),
title: new Text('Airplay'),
),
new ListTile(
leading: new Icon(Icons.airplay),
title: new Text('Airplay'),
),
new ListTile(
leading: new Icon(Icons.airplay),
title: new Text('Airplay'),
),
new ListTile(
leading: new Icon(Icons.alarm),
title: new Text('Alarm'),
),
new ListTile(
leading: new Icon(Icons.phone),
title: new Text('Phone'),
),
new ListTile(
leading: new Icon(Icons.airplay),
title: new Text('Airplay'),
),
new ListTile(
leading: new Icon(Icons.airplay),
title: new Text('Airplay'),
),
new ListTile(
leading: new Icon(Icons.airplay),
title: new Text('Airplay'),
),
new ListTile(
leading: new Icon(Icons.airplay),
title: new Text('Airplay'),
),
new ListTile(
leading: new Icon(Icons.alarm),
title: new Text('Alarm'),
),
new ListTile(
leading: new Icon(Icons.phone),
title: new Text('Phone'),
),
new ListTile(
leading: new Icon(Icons.airplay),
title: new Text('Airplay'),
),
new ListTile(
leading: new Icon(Icons.airplay),
title: new Text('Airplay'),
),
new ListTile(
leading: new Icon(Icons.airplay),
title: new Text('Airplay'),
),
],
),
),
);
}
void main()=> runApp(new MyApp());
图片.png
横着的ListView
class MyApp1 extends StatelessWidget{
@override
Widget build(BuildContext context) {
final title = "Horizontal List Demo";
// TODO: implement build
return new MaterialApp(
title: title,
home: new Scaffold(
appBar: new AppBar(
title: new Text(title),
),
body: new Container(
margin: new EdgeInsets.symmetric(vertical: 20.0),
height: 200.0,
child: new ListView(
scrollDirection: Axis.horizontal,
children: [
new Container(
width: 160.0,
color: Colors.lightBlue,
),
new Container(
width: 160.0,
color: Colors.black12,
child: new Column(
children: [
new Text("简介"
,style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 36.0,
),),
new Text("评论" ,style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 36.0,
),),
new Icon(Icons.phone),
],),
),
new Container(
width: 160.0,
color: Colors.amberAccent,
child: new Text("哈哈哈"),
),
new Container(
width: 160.0,
color: Colors.deepOrangeAccent,
),
new Container(
width: 160.0,
color: Colors.orange,
),
new Container(
width: 160.0,
color: Colors.red,
),
],
),
) ),
);
}}
void main()=> runApp(new MyApp1());
图片.png
长列表
class MyApp2 extends StatelessWidget{
final List items;
MyApp2({Key key,@required this.items}) : super(key:key);
@override
Widget build(BuildContext context) {
final title = "长列表 Demo";
// TODO: implement build
return new MaterialApp(
title: title,
home: new Scaffold(
appBar: new AppBar(
title: new Text(title),
),
body:new ListView.builder(
itemCount: items.length,
itemBuilder: (context,index){
return new ListTile(
leading: new Icon(Icons.phone),
title: new Text('${items[index]}'),
);
})
),
);
}}
void main()=> runApp(new MyApp2(
items:new List.generate(1000, (i) =>"Item $i"),
));
图片.png
GridView 网格布局
https://api.flutter.dev/flutter/widgets/GridView-class.html
class MyApp3 extends StatelessWidget{
@override
Widget build(BuildContext context) {
final title = "网格列表 Demo";
// TODO: implement build
return new MaterialApp(
title: title,
home: new Scaffold(
appBar: new AppBar(
title: new Text(title),
),
body:new GridView.count(
primary: false,
padding: const EdgeInsets.all(20.0),
crossAxisSpacing: 10.0,
crossAxisCount: 3,
children: [
const Text("第一行第一列"),
const Text("第一行第二列"),
const Text("第一行第三列"),
const Text("第二行第一列"),
const Text("第二行第二列"),
const Text("第二行第三列"),
const Text("第三行第一列"),
const Text("第三行第二列"),
const Text("第三行第三列"),
],
)
),
);
}}
图片.png
包装控件
https://api.flutter.dev/flutter/widgets/Row-class.html
void main()=> runApp(
new MaterialApp(
title: '包装控件',
home: new LayoutDemo(),
),
);
@override
Widget build(BuildContext context) {
Widget packedRow = new Row(
mainAxisSize: MainAxisSize.min,
children: [
new Icon(Icons.star,color: Colors.green[500],),
new Icon(Icons.star,color: Colors.green[500],),
new Icon(Icons.star,color: Colors.green,),
new Icon(Icons.star,color: Colors.black,),
new Icon(Icons.star,color: Colors.black,),
],
);
return new Scaffold(
appBar: new AppBar(
title: new Text('包装控件'),
),
body: packedRow,
);
}}
图片.png
AppBar 滴滴出行例子
https://api.flutter.dev/flutter/material/AppBar-class.html
void main()=> runApp(new DidiSample());
class DidiSample extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new DefaultTabController(
length: choices.length,
child: new Scaffold(
appBar: new AppBar(
title: const Text('滴滴出行'),
bottom: new TabBar(
tabs: choices.map((Choice choice){
return new Tab(
text: choice.title,
icon: new Icon(choice.icon),
);
}).toList()
),
),
body: new TabBarView(
children: choices.map((Choice choice){
return new Padding(
padding: const EdgeInsets.all(16.0),
child:new ChoiceDidi(choice: choice,) ,);
}).toList()
),
)
),
);
}
}
class Choice{
const Choice({this.title,this.icon});
final String title;
final IconData icon;
}
const List choices = [
Choice(title: '自驾',icon: Icons.directions_car),
Choice(title: '自行车',icon: Icons.directions_bike),
Choice(title: '乘船',icon: Icons.directions_boat),
Choice(title: '公交车',icon: Icons.directions_bus),
Choice(title: '火车',icon: Icons.directions_railway),
Choice(title: '步行',icon: Icons.directions_walk),
];
class ChoiceDidi extends StatelessWidget{
const ChoiceDidi({Key key,this.choice}):
super(key:key);
final Choice choice;
@override
Widget build(BuildContext context) {
final TextStyle textStyle= Theme.of(context).textTheme.display1;
return Card(
color: Colors.white,
child:Center(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(choice.icon,size: 128.0,color: textStyle.color,),
Text(choice.title ,style: textStyle,)
],
)
)
);
}
}
图片.png
水平布局示例
https://api.flutter.dev/flutter/widgets/Row-class.html
void main()=> runApp(
new MaterialApp(
title: '水平布局示例',
home: new LayoutDemo1(),
)
);//AppBar的
class LayoutDemo1 extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('水平布局示例'),
),
body: new Row(
children: [
/* const FlutterLogo(),
//文本太长需要包裹一下 能自动还行
new Expanded(child: new Text('Flutter\'s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bug faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.'))
// const Text('Flutter\'s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bug faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.'),
Icon(Icons.sentiment_very_satisfied),*/
Expanded(
child: Text('Deliver features faster', textAlign: TextAlign.center),
),
Expanded(
child: Text('Craft beautiful UIs', textAlign: TextAlign.center),
),
Expanded(
child: FittedBox(
fit: BoxFit.contain, // otherwise the logo will be tiny
child: const FlutterLogo(),
),
),
],
),
);
}
}
图片.png
垂直布局示例
https://api.flutter.dev/flutter/widgets/Column-class.html
void main()=> runApp(
new MaterialApp(
title: '垂直布局示例',
home: new LayoutDemo2(),
)
);
class LayoutDemo2 extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('垂直布局示例'),
),
body: Column(
// start center end 表示文字左对齐 居中 右对齐
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text('We move under cover and we move as one'),
Text('Through the night, we have one shot to live another day'),
Text('We cannot let a stray gunshot give us away'),
Text('We will fight up close, seize the moment and stay in it'),
Text('It’s either that or meet the business end of a bayonet'),
Text('The code word is ‘Rochambeau,’ dig me?'),
Text('Rochambeau!', style: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 2.0)),
],
),
);
}
}
图片.png
Container布局容器示例
https://api.flutter.dev/flutter/widgets/Container-class.html
void main()=> runApp(
new MaterialApp(
title: 'Container布局容器示例',
home: new LayoutDemo3(),
)
);
class LayoutDemo3 extends StatelessWidget{
@override
Widget build(BuildContext context) {
Widget container = new Container(
decoration: new BoxDecoration(
color: Colors.black26,
),
child: new Column(
children: [
new Row(
children: [
new Expanded(
child: new Container(
width:150.0,
height: 150.0,
decoration: new BoxDecoration(
border: new Border.all(width: 10.0,color: Colors.black38),
borderRadius: const BorderRadius.all(const Radius.circular(8.0)),
),
margin: const EdgeInsets.all(4.0),
child: new Image.asset('images/1.png'),
),
),
new Expanded(
child: new Container(
width:150.0,
height: 150.0,
decoration: new BoxDecoration(
border: new Border.all(width: 10.0,color: Colors.black38),
borderRadius: const BorderRadius.all(const Radius.circular(8.0)),
),
margin: const EdgeInsets.all(4.0),
child: new Image.asset('images/2.jpg'),
),
),
],
),
new Row(
children: [
new Expanded(
child: new Container(
width:150.0,
height: 150.0,
decoration: new BoxDecoration(
border: new Border.all(width: 10.0,color: Colors.black38),
borderRadius: const BorderRadius.all(const Radius.circular(8.0)),
),
margin: const EdgeInsets.all(4.0),
child: new Image.asset('images/1.png'),
),
),
new Expanded(
child: new Container(
width:150.0,
height: 150.0,
decoration: new BoxDecoration(
border: new Border.all(width: 10.0,color: Colors.black38),
borderRadius: const BorderRadius.all(const Radius.circular(8.0)),
),
margin: const EdgeInsets.all(4.0),
child: new Image.asset('images/2.jpg'),
),
),
],
)
],
),
);
return new Scaffold(
appBar: new AppBar(
title: new Text('Container布局容器示例'),
),
body:container,
);
}
}
图片.png
GridView
https://api.flutter.dev/flutter/widgets/GridView-class.html
title: 'GridView布局示例',
home: new GridViewDemo(),
));
class GridViewDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
List _buildGridTitleList(int count) {
return new List.generate(
count,
(int index) => Container(
child: new Image.asset('images/${index + 1}.jpg'),
));
}
Widget buildGrid(){
return new GridView.extent(maxCrossAxisExtent: 150.0,
padding: const EdgeInsets.all(4.0),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
children: _buildGridTitleList(9));
}
return new Scaffold(
appBar: new AppBar(
title: new Text('GridView布局示例'),
),
body: new Center(
child: buildGrid(),
),
);
}
}
图片.png
ListView
https://api.flutter.dev/flutter/widgets/ListView-class.html
void main() => runApp(new MaterialApp(
title: 'ListView布局示例',
home: new ListViewDemo(),
));
class ListViewDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
List list = [
new ListTile(
title: new Text(
'深圳',
style: new TextStyle(fontWeight: FontWeight.w400, fontSize: 18.0),
),
subtitle: new Text('南京市福田区国际大厦'),
leading: new Icon(
Icons.wifi,
color: Colors.pinkAccent,
),
),
new ListTile(
title: new Text(
'哈哈哈深圳',
style: new TextStyle(fontWeight: FontWeight.w400, fontSize: 18.0),
),
subtitle: new Text('啦啦南京市福田区国际大厦'),
leading: new Icon(
Icons.airplay,
color: Colors.green,
),
),
new ListTile(
title: new Text(
'嗯呢呢深圳',
style: new TextStyle(fontWeight: FontWeight.w400, fontSize: 18.0),
),
subtitle: new Text('嗯嗯南京市福田区国际大厦啦啦啦啦嗯安哈的啊大家说法咳咳咳打算减肥的客户合法就开始对方'),
leading: new Icon(
Icons.wifi,
color: Colors.yellow,
),
),
new ListTile(
title: new Text(
'北京市',
style: new TextStyle(fontWeight: FontWeight.w400, fontSize: 18.0),
),
subtitle: new Text('嘿嘿嘿南京市福田区国际大厦'),
leading: new Icon(
Icons.title,
color: Colors.deepPurple,
),
),
];
return new Scaffold(
appBar: new AppBar(
title: new Text('ListView布局示例'),
),
body: new Center(
child: new ListView(
children: list,
),
),
);
}
}
图片.png
Stack层叠布局
https://api.flutter.dev/flutter/widgets/Stack-class.html
void main() => runApp(new MaterialApp(
title: 'Stack层叠布局示例',
home: new StackDemo(),
));
class StackDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
var stack = new Stack(
alignment: const FractionalOffset(0.5, 0.5),//偏移量
children: [
new CircleAvatar(
backgroundImage: new AssetImage('images/1.jpg'),
radius: 100.0,
),
new Container(
decoration: new BoxDecoration(
color: Colors.black38,
),
child: new Text(
"hello",
style: new TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.bold,
color:Colors.white,
),
),
)
],
);
return new Scaffold(
appBar: new AppBar(
title: new Text('ListView布局示例'),
),
body: new Center(
child: stack,
),
);
}
}
图片.png
Card布局
https://api.flutter.dev/flutter/material/Card-class.html
void main() => runApp(new MaterialApp(
title: 'Card布局示例',
home: new CardDemo(),
));
class CardDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
var card = new SizedBox(
height: 250.0,
child: new Card(
child: new Column(
children: [
new ListTile(
title: new Text('北京市海淀区哈哈哈哈',style: new TextStyle(fontWeight: FontWeight.w300),
),
subtitle: new Text('嘿嘿嘿'),
leading: new Icon(
Icons.account_box,
color: Colors.lightBlue,
),
),
new Divider(),
new ListTile(
title: new Text('北京市海淀区哈哈哈哈',style: new TextStyle(fontWeight: FontWeight.w300),
),
subtitle: new Text('嘿嘿嘿'),
leading: new Icon(
Icons.account_box,
color: Colors.lightBlue,
),
),
new Divider(),
],
),
),
);
return new Scaffold(
appBar: new AppBar(
title: new Text('Card布局示例'),
),
body: new Center(
child: card,
),
);
}
}
图片.png
层叠定位布局
https://api.flutter.dev/flutter/widgets/Positioned-class.html
void main() => runApp(new MaterialApp(
title: '层叠定位布局示例',
home: new PositionedDemo(),
));
class PositionedDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('层叠定位布局示例'),
),
body: new Center(
child: new Stack(
children: [
new Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569843692185&di=6cbb7ed1b64ecb57892e4a64467eb884&imgtype=0&src=http%3A%2F%2Fimg.redocn.com%2Fsheying%2F20140731%2Fqinghaihuyuanjing_2820969.jpg'),
new Positioned(
bottom: 50.0,
right: 50.0,
child: new Text(
'嘿嘿嘿',
style:new TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
fontFamily: 'serif',
color: Colors.pink,
)))
],
),
),
);
}
}
图片.png