Flutter从零到∞学习笔记

1. 有状态widget：StatefulWidget和无状态widget：StatelessWidget 前者不需要实现Widget build(BuildContext context)。
   具体的选择取决于widget是否需要管理一些状态
2. 在Dart语言中使用下划线前缀标识符，会强制其变成私有的。
3. Icons.favorite Icons类里面有很多默认图标
4. isOdd 是否奇数 2.isOdd -> false 1.isOdd -> true
5. _pushSaved " _ " 开头的自动转成私有（方法和变量）
6. 导航栏添加按钮和事件

@override
Widget build(BuildContext context) {
  return new Scaffold(
    appBar: new AppBar(
      title: new Text('Startup Name Generator'),
      actions: <Widget>[
        // AppBar 添加一个按钮 样式为list 事件是_pushSaved
        new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved)
      ],
    ),
    body: _buildSuggestions(),
  );
}

// tooltip 长时间按下的提示文字

IconButton(icon: new Icon(Icons.search), tooltip: 'Search', onPressed: null)

7. 界面跳转方法

Navigator.of(context).push(
  new MaterialPageRoute(
      builder: (context) {
      },
  ),
);

8. 一行函数写法
   // 多行

void main() {
  runApp(
      new Center(
        child: new Text(
          'Hello, world!',
          textDirection: TextDirection.ltr,
        ),
      )
  )
}

// 一行

  void main() => runApp(new MyApp());

9. // Material 是UI呈现的“一张纸”
10. 请确保在pubspec.yaml文件中，将flutter的值设置为：uses-material-design: true。这允许我们可以使用一组预定义Material icons。
11. Row（横向排列）和Column（纵向排列）

    child: new Row(
      children: <Widget>[
        new ...,
        new ...,
        new ...,
      ],
    )

    child: new Column(
      children: <Widget>[
        new ...,
        new ...,
        new ...,
      ],
    ),

2. cached_network_image 图片占位和淡入淡出

3. push

    Navigator.push(
      context,
      new MaterialPageRoute(builder: (context) => new 新界面),
    );

// 如果需要传值：
新界面({Key key, @required this.接收字段的名字}) : super(key: key);
pop
Navigator.pop(context);

4. dio网络请求 https://github.com/flutterchina/dio
5. import 'dart:convert'; // package将响应内容转化为一个json Map
6. // 使用fromJson工厂函数，将json Map 转化为一个Post对象

    new Post.fromJson(json);

7. future参数是一个异步的网络请求

8. import 'dart:io'; // 添加请求的headers

9. // 长连接

   import 'package:web_socket_channel/io.dart';

   import 'package:multi_server_socket/multi_server_socket.dart';

10. // 网络请求

    Future<Post> fetchPost() async {
      final response = await http.get('[http://jsonplaceholder.typicode.com/posts/1](http://jsonplaceholder.typicode.com/posts/1)');
      final responseJson = json.decode(response.body);
      return new Post.fromJson(responseJson);
    }
    // 请求添加headers
    /*
    Future<Post> fetchPost() async {
      final response = await http.get(
        '[https://jsonplaceholder.typicode.com/posts/1](https://jsonplaceholder.typicode.com/posts/1)',
        headers: {HttpHeaders.AUTHORIZATION: "Basic your_api_token_here"},
      );
      final json = jsonDecode(response.body);
      return new Post.fromJson(json);
    }
    */
    new FutureBuilder<Post>(
      future: fetchPost(),
      builder: (context, snapshot) {
        return new CircularProgressIndicator();
      }
    )

11. 长连接

    // 连接长连接
    IOWebSocketChannel.connect('[ws://echo](ws://echo/).[websocket.org](http://websocket.org/)’)
    // 接收消息
    new StreamBuilder(
        stream: widget.channel.stream,
        builder: (context, snapshot) {
          return new Padding(
            child: new Text(snapshot.hasData ? '${snapshot.data}' : ''),
              padding: const EdgeInsets.symmetric(vertical: 20.0)
          );
        }
    )

// 发送消息
widget.channel.sink.add(_textController.text);

    // 关闭长连接
    widget.channel.sink.close();

12. 在Flutter中添加资源和图片

https://flutterchina.club/assets-and-images/

14. 标准widget：

Container

添加 padding, margins, borders, background color, 或将其他装饰添加到widget.

GridView

将 widgets 排列为可滚动的网格.

ListView

将widget排列为可滚动列表

Stack

将widget重叠在另一个widget之上.

Material Components：

Card

将相关内容放到带圆角和投影的盒子中。

ListTile

将最多3行文字，以及可选的行前和和行尾的图标排成一行

15. pubspec.yaml中添加字体 注意缩进对齐 注意缩进对齐 注意缩进对齐

-asset 路径是与pubspec.yaml平级的文件路径
flutter:
  # Include the Material Design fonts.
  uses-material-design: true
  fonts:
    - family: Rock Salt
      fonts:
        # [https://fonts.google.com/specimen/Rock+Salt](https://fonts.google.com/specimen/Rock+Salt)
      - asset: fonts/Arial-Unicode.ttf
    - family: VT323
      fonts:
        # [https://fonts.google.com/specimen/VT323](https://fonts.google.com/specimen/VT323)
        - asset: fonts/Arial-Unicode.ttf
    - family: Ewert
      fonts:
        # [https://fonts.google.com/specimen/Ewert](https://fonts.google.com/specimen/Ewert)
        - asset: fonts/Ewert-Regular.ttf

16. 比如一个关闭按钮在

new Row(mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[

  new FlatButton(onPressed: () {

  }, child: Icon(Icons.close))

],);

17. 分割线

new Divider(color: Colors.lightBlue,) 

18. 自定义Icon

new Image.asset(“图片路径", width: 20.0, height: 20.0,)

19. 按钮宽高

    001、
    new Padding(padding: new EdgeInsets.fromLTRB(48.0, 20.0, 48.0, 20.0),
      child: new Row(
        children: <Widget>[
          new Expanded(child:
            new RaisedButton(onPressed: (){
            },
              //设置控件的高度
              child: new Padding(padding: new EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
                child: new Text("登录",
                  style: TextStyle(color: Colors.white)
                ),
              ),
              color: Colors.brown,
            ),
          ),
        ],
      ),
    ),


    002、
    new Container(
      width: MediaQuery.of(context).size.width - 48 * 2 ,
      padding: new EdgeInsets.only(top: 40.0),
      child: new RaisedButton(onPressed: (){
      },

        //设置控件的高度
        child: new Padding(padding: new EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
          child: new Text("登录",
              style: TextStyle(color: Colors.white)
          ),
        ),
        color: Colors.brown,
      ),
    ),


  003、
Widget _bigButton(String text, double lSpace, double rSpace) {
  return new Container(
    width: MediaQuery.of(context).size.width - lSpace - rSpace,
    height: 48.0,
    margin: new EdgeInsets.only(left: lSpace, right: rSpace),
    color: Colors.white54,
    padding: new EdgeInsets.only(top: 0.0),
    child: new RaisedButton(onPressed: (){
      print(text);
    },
      child: new Padding(padding: new EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
        child: new Text(text,
            style: TextStyle(color: Colors.white)
        ),
      ),
      color: Colors.brown,
    ),
  );
}

20. 设备尺寸
    MediaQuery.of(context).size.width

21. 设备像素密度
    MediaQuery.of(context).devicePixelRatio

22. 状态栏高度
    MediaQuery.of(context).padding.top

23. 担心键盘挡住控件，可以使用 SingleChildScrollView，将SingleChildScrollView当做容器。

24. 一个超级简单界面

    import 'package:flutter/material.dart';
    class RegisterPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          backgroundColor: Colors.black,
          body: new RegisterWidget(),
        );
      }
    }

    class RegisterWidget extends StatefulWidget {
      RegisterWidgetState createState() => RegisterWidgetState();
    }

    class RegisterWidgetState extends State<RegisterWidget> {
      @override
      Widget build(BuildContext context) {
        return new Text("RegisterPage", style: TextStyle(color: Colors.white),);
      }
    }

25. Flutter 按钮总结

· InkWell   // 纯文字按钮

· OutLineButton   // 边框按钮

26. TextField的inputFormatters属性添加services.dart

 import 'package:flutter/services.dart';
    TextField
    inputFormatters: <TextInputFormatter> [
      WhitelistingTextInputFormatter.digitsOnly,
    ],