界面控制路由

void main() {

runApp(MaterialApp(

home: MyAppHome(), // becomes the route named '/'

routes: {

'/a': (BuildContext context) => MyPage(title: 'page A'),

'/b': (BuildContext context) => MyPage(title: 'page B'),

'/c': (BuildContext context) => MyPage(title: 'page C'),

},

));

}

Navigator.of(context).pushNamed('/b');

页面消息数据传递

Map coordinates = await Navigator.of(context).pushNamed('/location');

Navigator.of(context).pop({"lat":43.821757,"long":-79.226392});

异步线程调用

async await

或

Isolate

资源

ldpi0.75x

mdpi1.0x

hdpi1.5x

xhdpi2.0x

xxhdpi3.0x

xxxhdpi4.0x

images/my_icon.png // Base: 1.0x image

images/2.0x/my_icon.png // 2.0x image

images/3.0x/my_icon.png // 3.0x image

//pubspec.yaml

assets:

- images/my_icon.jpeg

//调用

return AssetImage("images/my_icon.jpeg");

return Image.asset("images/my_image.png");

界面布局

//多使用Column,Row,Stack,ListView

https://flutter.dev/docs/development/ui/layout

Row(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Text('Row One'),

Text('Row Two'),

Text('Row Three'),

Text('Row Four'),

],

);

Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Text('Column One'),

Text('Column Two'),

Text('Column Three'),

Text('Column Four'),

],

);

ListView(

children: [

Text('Row One'),

Text('Row Two'),

Text('Row Three'),

Text('Row Four'),

],

);

事件触发

//1. 控件构造函数包含事件触发函数

RaisedButton(

onPressed: () {

print("click");

},

child: Text("Button"));

}

//2. 使用GestureDetector

GestureDetector(

child: FlutterLogo(

size: 200.0,

),

onTap: () {

print("tap");

},

)

Listviews & adapters

List widgets = [];

ListView(children: _getListData());

_getListData() {

for (int i = 0; i < 100; i++) {

widgets.add(GestureDetector(

child: Padding(

padding: EdgeInsets.all(10.0),

child: Text("Row $i")),

onTap: () {

print('row tapped');

},

));

}

return widgets;

}

//更新数据

setState(() {

widgets = List.from(widgets);

widgets.add(getRow(widgets.length + 1));

print('row $i');

});

EditText Hint

TextField(

decoration: InputDecoration(hintText: "This is a hint"),

)

地理位置

geolocator

相机

image_picker

数据存储

shared_preferences

sqflite

主题

MaterialApp 有个ThemeData对象。

MaterialApp(

title: 'Sample App',

theme: ThemeData(

primarySwatch: Colors.blue,

textSelectionColor: Colors.red

),

home: SampleAppPage(),

)

编译Android

flutter build apk

编译iOS

flutter build ios

在线预览flutter

应用市场

例子

flutter web 版本开发配置