flutter:
  uses-material-design: true

  assets:
    - assets/images/
    - assets/images/products/

加载整个目录的时候，如果资源目录是多级的，那么需要注册所有能够直达图片资源的路径

Read More

Fluter实用组件

FittedBox

Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              color: Colors.red,
              width: double.infinity,
              child: FittedBox(
                fit: BoxFit.scaleDown,
                child: Text(
                  'hello hell hel he h',
                  style: TextStyle(fontSize: 30),
                ),
              ),
            )
          ],
        ),
      ),

DefaultTextStyle

DefaultTextStyle(
          style: TextStyle(fontWeight: FontWeight.bold, color: Colors.amber),
          child: Column(
            children: [
              Text('2222'),
              Text('2222'),
              Text('2222'),
              Text('2222'),
              Text('2222'),
            ],
          ),
        ),

InteractiveViewer（放大缩小）

InteractiveViewer(
          constrained: false,
          child: SizedBox(
            width: 800,
            child: Column(
              children: [
                Text('flutter hello' * 999),
              ],
            ),
          ),
        ),

Slivers

Sliver世界

Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(child: FlutterLogo(size: 200)),
          SliverGrid.count(
            crossAxisCount: 4,
            children: List.generate(
              44,
              (index) => Container(
                height: 200,
                color: Colors.primaries[index % 18],
              ),
            ),
          ),
          SliverList(delegate: SliverChildBuilderDelegate(
            (context, index) {
              return Container(
                height: 200,
                color: Colors.primaries[index % 18],
              );
            },
          ))
        ],
      ),
    );

SliverPrototypeExtentList

CustomScrollView(
        slivers: [
          SliverPrototypeExtentList( // 根据用户手机上的item大小来设置extend，利于性能优化
            delegate: SliverChildListDelegate([
              Text('hello'),
              Text('hello'),
              Text('hello'),
            ]),
            prototypeItem: FlutterLogo( // 这里的组件就是item
              size: 48,
            ),
          ),
        ],
      ),

SliverFillViewport

CustomScrollView(
        slivers: [
          SliverFillViewport( //类似Pageview一样充满整个屏幕视图
            delegate: SliverChildListDelegate([
              Container(color: Colors.red),
              Container(color: Colors.amber),
              Container(color: Colors.green),
            ]),
          ),
        ],
      ),

SliverAppBar（实用的带动画AppBar）

CustomScrollView(
        slivers: [
          SliverAppBar(
            // title: Text('Sliver App Bar'), // 自带的title
            // floating: true, // 滑动隐藏/显示
            // snap: true, // 是否吸附，完整显示/隐藏
            pinned: true, // 固定住，不隐藏的
            flexibleSpace: FlexibleSpaceBar( // 上拉预留空间
              background: FlutterLogo(),
              title: Text('Hello, Sliver App bar!'),
            ),
            expandedHeight: 300, // 上拉预留空间的高度
          ),
          SliverToBoxAdapter(
            child: Placeholder(),
          ),
          SliverList(
              delegate: SliverChildListDelegate([
            FlutterLogo(size: 100),
            FlutterLogo(size: 100),
            FlutterLogo(size: 200),
            FlutterLogo(size: 200),
            FlutterLogo(size: 200),
            FlutterLogo(size: 200),
          ]))
        ],
      ),

SliverAppBar(
            // title: Text('Sliver App Bar'),
            // floating: true,
            // snap: true,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              background: FlutterLogo(),
              title: Text('Hello, Sliver App bar!'),
              stretchModes: [ // 拉伸动画
                StretchMode.blurBackground,
                StretchMode.zoomBackground,
                StretchMode.fadeTitle,
              ],
               collapseMode: CollapseMode.parallax, // 视差效果
            ),
            expandedHeight: 300,
            stretch: true, // 应用拉伸动画
          ),

计算剩余内容

slivers: [
          SliverAppBar(
            title: Text('flutter sliver.'),
          ),
          SliverToBoxAdapter(
            child: FlutterLogo(size: 230),
          ),
          SliverGrid(
            delegate: SliverChildListDelegate([
              Icon(Icons.add),
              Icon(Icons.dashboard),
              Icon(Icons.fiber_dvr_sharp),
              Icon(Icons.water_damage),
            ]),
            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 180,
            ),
          ),
          SliverToBoxAdapter(
            child: Divider(
              height: 30,
              thickness: 4,
              indent: 20,
              endIndent: 20,
              color: Colors.amber,
            ),
          ),
          SliverFillRemaining( // 计算屏幕剩余的页面内容
            child: Container(
              alignment: Alignment.center,
              color: Colors.black,
              child: CircularProgressIndicator(),
            ),
          ),
        ],

滚动组件笔记

滚动列表与动态加载

ListView.builder(
        physics: const BouncingScrollPhysics(), // 末端继续滑动的效果，回弹
        controller: _scrollController, // 控制器
        padding: const EdgeInsets.all(50), // ListView的Padding
        cacheExtent: 200, // 缓冲区像素，一般不用设置
        itemExtent: 100, // 每个item的高度，用于item高度不同使用Scrollbar跳转时的性能优化
        itemBuilder: (context, index) {
          return Container(
            width: double.infinity,
            height: 100,
            color: Colors.blue[(index % 5) * 100],
            alignment: Alignment.center,
            child: Text('$index'),
          );
        },
        itemCount: 900, // 列表item个数，不填就是无限个
      ),

加载下一页

定义一个controller

Read More

事件打开 Drawer

1.在组件中定义一个 GlobalKey：

Read More