# sport

A new Flutter project.


## 图片的放置

1. 先在```pubspec.yml```中声明assets位置，因为flutte没有预先定义的文件结构

```yaml
// pubspec.yaml
 assets:
   - assets/img
```

2. 假如需要放置2.x,3.x的图片的时候

```yaml
assets:
 - assets/2.0x/image
 - assets/img       # Base 1.0 
```

3. 加载本地图片AssetImage

- ``` return AssetImage() ``` 

```Dart
Widget build(BuildContext context){
  return Image.asset("loacl_url");
}
```


## placeholder(占位符)

transparent_img 插件 能从本地 内存 中加载placeholder

## cached_networt_image 

从本地中加载缓存的图片

## Icon 

可以用 material_icon

## ListView.builder(itemLength,itemBuilder) 动态创建的List

## customScrollView 

## SliverAppBar 与CustomScrollView、NestedScrollView集成的材质设计应用栏

統一的滚动效果

## stateLessWidget 什么情况会被调用

- widget 插入树中
- widget的父级更改配置的时候
- 当它依赖的inheritedWidget 发生变化的时候

## progressIndicator 菊花loading

## Builder是提升性能的关键 setState会重新绘制 但是 Builder不会 

## Future<Builder>(Context,AsyncSnapshot) 

- AsyncSnapshot 
    - 有两个属性 connectionState （none，waiting active done） 
    - data 最新的数据
    - error 接受的错误的对象
    - hasData 
    - hasError
 
 ## 生成器返回的格式没有问题 
 
- 因为返回的不是JSON格式 所以 格式化起来有点麻烦

##  shared_preferences 异步Key-Value的 存储

## 列表优化 listView_builder 长列表 短列表 listView

## 性能分析

- flutter run --profile

## 项目目录 

```yaml
lib 
  assets    # 资源文件
  bean      # 基础实体类
  constant  # 常量
  model     # v-model 
  pages     # 具体的页面
  router    # 路由
  services  # 服务
  store     # 数据中心 
  utils     # 工具类库
  widgets   # 通用widgets

```

## changeNotifyProvider Prodiverbuilder 两种不同的实现Provider的情况


```yaml
//            Container(
//              child: ProviderWidget<GameVideoListModel>(
//                builder: (context, model, builder) {
//                  _initializePlay(model.list[0].videoUrl);
//                  return FutureBuilder(
//                    future: _initializeVideoPlayerFuture,
//                    builder: (context,snapshot){
//                      return ListView.builder(itemBuilder:(context,index){
//                        return VideoItem(controller: _controller);
//                      },shrinkWrap: true,);
//                    },
//                  );
//                },
//                onModelReady: (m) => m.initData(),
//              ),
//            )
```

## hassize 没有高度 或者是 不够撑开高度

## Expand 不能包着 Expand ? 

## postition 可以设置 负距离 但是需要 Stack 设置overflow ： visible

## json to dart 需要手动修改一下一些冲突的名字 或者是 as 的别名作为包名

## EdgeInsets
- fromLTRB(double left, double top, double right, double bottom)：分别指定四个方向的填充。
- all(double value) : 所有方向均使用相同数值的填充。
- only({left, top, right ,bottom })：可以设置具体某个方向的填充(可以同时指定多个方向)。
- symmetric({vertical, horizontal})：用于设置对称方向的填充，vertical指top和bottom，horizontal指left和right。

## 获取当前时间戳
- DateTime.now().millisecondsSinceEpoch

# 布局容器
## Container
- child
- padding: EdgeInsets.all(18.0)
- margin: EdgeInsets.all(44.0)
- width
- height
- alignment: Alignment.center 子 Widget 居中对齐
- decoration Container 样式 BoxDecoration

## IntrinsicHeight
- 当我们使用行（row）的时候，子组件常常因为高度的不同，导致各个子组件里面的内容不能对齐。这个时候我们可以使用IntrinsicHeight来保持row中各个子组件高度一致，从而便于纵向居中对齐。
```java
new IntrinsicHeight(
  child: new Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      new Container(color: Colors.blue, width: 100.0),
      new Container(color: Colors.red, width: 50.0,height: 50.0,),
      new Container(color: Colors.yellow, width: 150.0),
    ],
  ),
);
```

## Row
- mainAxisAlignment：主轴布局方式，row主轴方向是水平方向
- crossAxisAlignment: 交叉轴的布局方式，对于row来说就是垂直方向的布局方式
```java
  //一行3个控件，要平分放
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  mainAxisSize: MainAxisSize.max,
  //交叉轴的布局方式，对于column来说就是水平方向的布局方式
  crossAxisAlignment: CrossAxisAlignment.center,
  //就是字child的垂直布局方向，向上还是向下
  verticalDirection: VerticalDirection.down,
  children: <Widget>[
    Text('我是第1个'),
    Text('我是第2个'),
    Text('我是第3个'),
  ],
```
## Column

## Center

## Padding
- padding: const EdgeInsets.all(8.0),

## Stack

### Positioned
- left
- top
- right
- bottom

## Spacer
- 顾名思义只是一个间距控件，可以用于调节小部件之间的间距，它有一个flex可以进行设置
## Expanded
- Expanded会尽可能的充满分布在Row, Column, or Flex的主轴方向上
## Flexible
- Flexible也是为小部件提供空间的，但是不会要求子空间填满可用空间

## Offstage 控件的显示与隐藏
-  offstage: true, //这里控制 当为true时控件隐藏
-  child: Container(color: Colors.blue,height: 100.0,),

## LinearProgressIndicator
- 可以使用SizedBox来设置高度与宽度

# api 发起显示菊花
- request(context, () async {
                        await api
                            .postAddGame(widget.details.id, Random().nextDouble() * 100, (Random().nextDouble() * 40).toInt(), Random().nextInt(300), start)
                            .catchError((err) {});
                        ToastUtil.show("提交信息成功");
                      });