Hello World
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Hello World'),
),
body: Center(
child: Text('Hello World - Welcome'),
)
)
);
}
}
TextWidget
1、常用属性
① textAlign
enum TextAlign {
left,
right,
center,
justify,
start,
end,
}
② overflow
enum TextOverflow {
clip,
fade,
ellipsis,
}
③ maxLines
【demo】
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome - Flutter freshman'),
),
body: Center(
child: Text('Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。',
textAlign: TextAlign.left,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
)
)
);
}
}
2、TextStyle
① fontSize
② color
③ decoration
static const TextDecoration none = const TextDecoration._(0x0);
static const TextDecoration underline = const TextDecoration._(0x1);
static const TextDecoration overline = const TextDecoration._(0x2);
static const TextDecoration lineThrough = const TextDecoration._(0x4);
④ decorationStyle
enum TextDecorationStyle {
solid,
double,
dotted,
dashed,
wavy
}
【demo】
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome - Flutter freshman'),
),
body: Center(
child: Text('Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 18.0,
color: Color.fromARGB(255, 255, 180, 180),
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dotted
),
),
)
)
);
}
}
Container
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome - Flutter freshman'),
),
body: Center(
child: Container(
child: new Text(
'Hello Imooc',
style:TextStyle(fontSize:40.0),
),
alignment: Alignment.center,
width: 300,
height: 200,
color: Colors.lightBlue,
)
)
)
);
}
}
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome - Flutter freshman'),
),
body: Center(
child: Container(
child: new Text(
'Hello Flutter freshman -- Hi',
style:TextStyle(fontSize:40.0),
),
alignment: Alignment.topLeft,
width: 300,
height: 200,
padding: const EdgeInsets.fromLTRB(40.0, 0.0, 5.0, 0.0),
margin: const EdgeInsets.all(10.0),
decoration: new BoxDecoration(
gradient: const LinearGradient(
colors: [
Colors.lightBlue,
Colors.greenAccent,
Colors.purple
]
)
),
)
)
)
);
}
}
Debug模式介绍
BoxFit
enum BoxFit {
fill,
contain,
cover,
fitWidth,
fitHeight,
none,
scaleDown,
}
colorBlendMode
enum BlendMode {
clear,
src,
dst,
srcOver,
dstOver,
srcIn,
dstIn,
srcOut,
dstOut,
srcATop,
dstATop,
xor,
plus,
modulate,
screen,
overlay,
darken,
lighten,
colorDodge,
colorBurn,
hardLight,
softLight,
difference,
exclusion,
multiply,
hue,
saturation,
color,
luminosity,
}
[demo]
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome - Flutter freshman'),
),
body: Center(
child: Container(
child: new Image.network(
'http://bpic.588ku.com/element_banner/20/19/02/de831517a93623a756dbe0ad2da9199d.jpg',
scale: 2.0,
color: Colors.greenAccent,
colorBlendMode: BlendMode.difference,
fit: BoxFit.fitWidth
),
width: 400,
height: 200,
)
)
)
);
}
}
ListView
1、ListTile
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build (BuildContext context) {
return MaterialApp(
title: 'List_View Demo',
home: Scaffold(
appBar: new AppBar(
title: new Text('ListView Widget'),
),
body: new ListView(
children: <Widget>[
new ListTile(
leading: new Icon(Icons.border_right),
title:new Text('border_right'),
),
new ListTile(
leading: new Icon(Icons.android),
title: new Text('Android'),
),
new ListTile(
leading: new Icon(Icons.arrow_forward_ios),
title: new Text('iOS'),
),
],
),
),
);
}
}
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build (BuildContext context) {
return MaterialApp(
title: 'List_View Demo',
home: Scaffold(
appBar: new AppBar(
title: new Text('ListView Widget'),
),
body: new ListView(
children: <Widget>[
new Image.network('http://bpic.588ku.com/element_banner/20/19/02/de831517a93623a756dbe0ad2da9199d.jpg'),
new Image.network('http://bpic.588ku.com/element_banner/20/19/02/9d2749b406d01a9641bacfdfc628425d.jpg'),
new Image.network('http://bpic.588ku.com/element_banner/20/19/02/3d0fc3d8478a476a4cb6887d31ba0126.jpg'),
new Image.network('http://bpic.588ku.com/element_banner/20/19/03/04356e5e5bcf7567eb6a52787c0ff8f3.jpg'),
new Image.network('http://bpic.588ku.com/element_banner/20/19/02/de831517a93623a756dbe0ad2da9199d.jpg'),
new Image.network('http://bpic.588ku.com/element_banner/20/19/02/9d2749b406d01a9641bacfdfc628425d.jpg'),
new Image.network('http://bpic.588ku.com/element_banner/20/19/02/3d0fc3d8478a476a4cb6887d31ba0126.jpg'),
new Image.network('http://bpic.588ku.com/element_banner/20/19/03/04356e5e5bcf7567eb6a52787c0ff8f3.jpg'),
],
),
),
);
}
}
横向列表及自定义组件
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build (BuildContext context) {
return MaterialApp(
title: 'List_View Demo',
home: Scaffold(
appBar: new AppBar(
title: new Text('ListView Widget'),
),
body: Center(
child: Container(
height: 200.0,
child: MyList()
),
)
),
);
}
}
class MyList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
new Container(
width: 300.0,
color: Colors.lightBlue,
),
new Container(
width: 50.0,
color: Colors.yellow,
),
new Container(
width: 100.0,
color: Colors.greenAccent,
),
new Container(
width: 500.0,
color: Colors.redAccent,
)
]);
}
}
动态列表
创建方式
- 不固定长度: new List();
- 固定长度 new List(2);
- 固定长度和类型 new List(2);
- items:[1, 2, 3, 4];
import 'package:flutter/material.dart';
void main() => runApp(MyApp(
items:new List<String>.generate(12, (i)=>"Item:$i")
));
class MyApp extends StatelessWidget {
final List<String> items;
MyApp({Key key,
@required this.items
}):super(key:key); // 构造方法
@override
Widget build (BuildContext context) {
return MaterialApp(
title: 'List_View Demo',
home: Scaffold(
appBar: new AppBar(
title: new Text('ListView Widget'),
),
body: new ListView.builder(
itemCount: items.length,
itemBuilder: (context, index){
return new ListTile(
title: new Text('${items[index]}'),
);
}
)
),
);
}
}
GridView网格列表
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '电影院',
home: Scaffold(
appBar: new AppBar(
title: Text('挑选电影'),
),
body: GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 2.0,
crossAxisSpacing: 2.0,
childAspectRatio: 0.7
),
children: <Widget>[
new Image.network('https://img.alicdn.com/bao/uploaded/i2/TB1plvqDSzqK1RjSZFjXXblCFXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i3/TB1ef7oExTpK1RjSZFGXXcHqFXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i3/TB14hYPAVzqK1RjSZFCXXbbxVXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i1/TB105jXDCzqK1RjSZFpXXakSXXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i1/TB1ca7QDIfpK1RjSZFOXXa6nFXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i1/TB1JVy.FzDpK1RjSZFrXXa78VXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i4/TB1j2qVEMTqK1RjSZPhXXXfOFXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i2/TB1plvqDSzqK1RjSZFjXXblCFXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i3/TB1ef7oExTpK1RjSZFGXXcHqFXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i3/TB14hYPAVzqK1RjSZFCXXbbxVXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i1/TB105jXDCzqK1RjSZFpXXakSXXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i1/TB1ca7QDIfpK1RjSZFOXXa6nFXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i1/TB1JVy.FzDpK1RjSZFrXXa78VXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i4/TB1j2qVEMTqK1RjSZPhXXXfOFXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i2/TB1plvqDSzqK1RjSZFjXXblCFXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i3/TB1ef7oExTpK1RjSZFGXXcHqFXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i3/TB14hYPAVzqK1RjSZFCXXbbxVXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i1/TB105jXDCzqK1RjSZFpXXakSXXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i1/TB1ca7QDIfpK1RjSZFOXXa6nFXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i1/TB1JVy.FzDpK1RjSZFrXXa78VXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i4/TB1j2qVEMTqK1RjSZPhXXXfOFXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i2/TB1plvqDSzqK1RjSZFjXXblCFXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i3/TB1ef7oExTpK1RjSZFGXXcHqFXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i3/TB14hYPAVzqK1RjSZFCXXbbxVXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i1/TB105jXDCzqK1RjSZFpXXakSXXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i1/TB1ca7QDIfpK1RjSZFOXXa6nFXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i1/TB1JVy.FzDpK1RjSZFrXXa78VXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
),
new Image.network('https://img.alicdn.com/bao/uploaded/i4/TB1j2qVEMTqK1RjSZPhXXXfOFXa_.jpg_300x300.jpg',
fit: BoxFit.cover,
)
],
)
),
);
}
}