start


flutter doctor // 检测依赖
flutter packages get // 安装依赖
flutter run

终端热键

r 键点击后热加载。
p 键显示网格，可看布局情况。很常用
o 键切换android 和 ios 的预览模式
q 键退出调试预览模式

插件

Flutter
Dart
Awesome Flutter Snippets

flutter msg

Flutter一切皆组件!

StatefulWidget: 具有可变状态的窗口部件，也就是你在使用应用的时候就可以随时变化，比如我们常见的进度条，随着进度不断变化。
StatelessWidget: 不可变状态窗口组件，也就是你在使用时不可以改变，比如固定的文字。

text widget 文本组件

属性	属性值	属性描述	eg
TextAlign	left center right start end	文本对齐方式	textAlign: TextAlign.start
maxLines	1	设置最多的行数	maxLines: 2
overflow	clip ellipsis fade	文本截断方式(切断、打点、渐进消失)	overflow: TextOverflow.ellipsis
style	fontSize color decoration ...	设置文本样式	style: TextStyle()

height: 该属性用于指定行高，但它并不是一个绝对值，而是一个因子，具体的行高等于fontSize * height。
flutter 的fontSize 适配方案？

文本的适配问题。官方TextStyle 介绍

Container 容器组件

相当于html 的<div>标签。
border 边框使用container 容器下decoration 的border。

  child: Container(
    child: new Text('xxxxxx',style: TextStyle(fontSize: 40.0),),
    alignment: Alignment.topLeft,
    width: 400.0,
    height: 100.0,
    padding: const EdgeInsets.all(10.0),
    margin: const EdgeInsets.fromLTRB(0, 20.0, 20.0, 0),
    decoration:new BoxDecoration(
      border:Border.all(width:2.0,color:Colors.red)
    ),
  )

属性	属性值	属性描述	eg
Alignment	bottomCenter bottomLeft bottomRight 等9个	针对容器内child（内容）的对齐方式	alignment: Alignment.topLeft
padding	EdgeInsets.all(10.0)	设置padding	EdgeInsets.fromLTRB(value1,value2,value3,value4)

还有对应的 width|height|color|margin 等

decoration 是container 的修饰器，主要功能是设置背景和边框。

Image 图片组件的使用

Image.asset 加载项目资源图片，会增大打包体积，相对路径
Image.network 网络资源图片
Image.file & Image.memory 基本少用

属性	属性值	属性描述	eg
fit	full\|contain\|cover\|fitWidth 等6个	拉伸与挤压	fit: BoxFit.contain

fit属性可以控制图片的拉伸和挤压？测试有误

ListView 列表组件

new ListView(
  children:<Widget>[
    new ListTitle(
      leading: new Icon(Icons.access_time),
      title: new Text('access_time')
    ),
    ...
  ]
)

动态列表用ListView.builder() 这种形式。

GridView 网格列表组件

网格列表经常用来显示多张图片。如相册功能。

body: GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 3,
    mainAxisSpacing: 2.0,
    crossAxisSpacing: 2.0,
    childAspectRatio: 0.7
  ),
  children: <Widget>[
    new Image.network(''),
    new Image.network(''),
    new Image.network(''),
    new Image.network(''),
  ]
)

页面布局

水平布局、垂直布局、GridView布局、ListView布局、Container布局等。

水平布局Row

Row 控件分灵活排列和非灵活排列非灵活排列形式：

body: new Row(
  children: <Widget>[
    new XXX,
    new XXX,
    new XXX,
  ]
)

灵活排列。有间隙，使用Expanded 来解决。（占满空间）

body: new Row(
  children: <Widget>[
    Expanded(child: new XXXX),
    Expanded(child: new XXXX),
    Expanded(child: new XXXX),
    Expanded(child: new XXXX),
  ]
)

当然灵活排列与非灵活排列是可以混用的。

垂直布局Column 组件

这里也有主轴与侧轴的区分。

body: Column(
  crossAxisAlignment: CrossAxisAlignment.start, // 文字对齐方式
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text('line1 xxx'),
    Text('line1 xxx'),
    Text('line1 xxx')
  ]
)

Stack 层叠布局（类似前端的定位）

tips: CircleAvatar 组件，里头有radius 的值可以设置弧度情况。

new CircleAvatar(
  backgroundImage: new NetworkImage('http://XXXX'),
  radius: 100.0,
)

Stack 基本使用

var stack = new Stack(
  children: <Widget>[
    new CircleAvatar(
      backgroundImage: new NetworkImage('http://jspang.com/static//myimg/blogtouxiang.jpg'),
      radius: 100.0,
    ),
    new Positioned(
      top:10.0,
      left:10.0,
      child: new Text('JSPang.com'),
    ),
    new Positioned(
      bottom:10.0,
      right:10.0,
      child: new Text('技术胖'),
    )
  ],
);

卡片布局，类似ul => li

ListTile(
  title:new Text('XXXXXXXXXXXXX',style: TextStyle(fontWeight: FontWeight.w500),),
  subtitle: new Text('aaa:1513938888'),
  leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
)

页面导航（与前端导航和超链接有所不同）

RaisedButton 按钮组件（用的比较多）

它有两个最基本属性：

child: 可以放入容器，图标，文字。这样可以构建多彩的按钮。
onPressed 点击事件，此时会调用Navigator 组件。

child: RaisedButton(
  child: Text('查看商品详情页面'),
  onPressed: (){
    Navigator.push(context, new MaterialPageRoute(
      builder: (context) => XXXX
    ));
  },
)

Navigator.push 和 Navigator.pop

push：是跳转下一个页面，接收两个参数,上下文context & 跳转函数
pop: 返回上一个页面，使用时传递一个context（上下文）参数，使用时要注意的是，你必须是有上级页面的，也就是说上级页面使用了Navigator.push。

参数传递

静态资源和项目图片处理

1、先pubspec.yaml 文件进行声明。

assets:
  - images/blogtouxiang.jpg

2、项目中直接使用

Widget build(BuildContext context) {
  return Container(
    child: Image.asset('images/blogtouxiang.jpg'),
  );
}