flutter 注意点

界面控制路由

void main() {
  runApp(MaterialApp(
    home: MyAppHome(), // becomes the route named '/'
    routes: <String, WidgetBuilder> {
      '/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

资源

ldpi	0.75x
mdpi	1.0x
hdpi	1.5x
xhdpi	2.0x
xxhdpi	3.0x
xxxhdpi	4.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: <Widget>[
      Text('Row One'),
      Text('Row Two'),
      Text('Row Three'),
      Text('Row Four'),
    ],
  );
Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text('Column One'),
      Text('Column Two'),
      Text('Column Three'),
      Text('Column Four'),
    ],
  );
ListView(
    children: <Widget>[
      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 = <Widget>[];
 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

https://flutterstudio.app/

应用市场

https://startflutter.com/

例子

https://github.com/CarGuo/GSYGithubAppFlutter https://github.com/alibaba/flutter-go

flutter web 版本开发配置

https://flutter.dev/docs/get-started/web

https://flutter-io.cn/

转载于:https://my.oschina.net/zdglf/blog/3083220