flutter 仿淘宝右侧多条件筛选

flutter 右侧实现多条件的筛选效果。效果图

实现要求：
1、两种类型筛选条件数据源。
2、报销月份每行展示3列，可折叠。
3、报销类型，badge长度自适应。

modle 类search.dart

class Search {
  String code;
  bool check;

  Search({this.code, this.check});

  Search.fromJson(Map<String, dynamic> json) {
    code = json['code'];
    check = json['check'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['code'] = this.code;
    data['check'] = this.check;
    return data;
  }
}

drawer_search.dart

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:ws/common/config/config.dart';
import 'package:ws/common/local/local_storage.dart';
import 'package:ws/common/style/style.dart';
import 'package:ws/model/search.dart';
import 'package:ws/redux/ws_state.dart';

class DrawerSearch extends StatefulWidget {
  List<Search> typeList;

  List<Search> monthList;
  DrawerSearch(this.typeList,this.monthList);

  @override
  State<StatefulWidget> createState() => _DrawerSearchState();
}

class _DrawerSearchState extends State<DrawerSearch> {
  List<Search> monthList = List<Search>();
  List<String> monthResult = List<String>();
  List<Search> typeList = List<Search>();
  List<String> typeResult = List<String>();
  bool _isHideValue = true;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _loadData();

  }

  @override
  Widget build(BuildContext context) {
    return StoreBuilder<WSState>(
      builder: (context, store) {
        return Drawer(
            //侧边栏 DraWer
            child: Scaffold(
          appBar: AppBar(
            title: Text('条件过滤'),
          ),
          body: Container(
            margin: EdgeInsets.only(left: 16.0, right: 16.0),
            child: ListView(
              primary: false,
              shrinkWrap: true,
              children: <Widget>[
                SizedBox(height: 10.0),
                Column(
                  children: <Widget>[
                    Container(
                        height: 40,
                        child:GestureDetector(
                          onTap: (){
                            setState(() {
                              _isHideValue=!_isHideValue;
                            });
                          },
                          child: Row(
                              children: <Widget>[
                                SizedBox(width: 10.0,),
                                Expanded(
                                  child:Text(
                                    "报销月份：",
                                    style: TextStyle(fontSize: 16),
                                  ),
                                ),
                                Icon(
                                  _isHideValue ? Icons.keyboard_arrow_down : Icons.keyboard_arrow_up,
                                  color: Colors.grey,
                                ),
                              ]),
                        )),
                    Offstage(
                      offstage: _isHideValue,
                      child:  GridView.count(
                        primary: false,
                        shrinkWrap: true,
                        crossAxisCount: 3,
                        crossAxisSpacing: 6.0,
                        mainAxisSpacing: 6.0,
                        childAspectRatio: 2.0,
                        children: monthList.map((value) {
                          return InkWell(
                            onTap: () {
                              String month;
                              if (value.code == "一月") {
                                month='1';
                              } else if (value.code == "二月") {
                                month='2';
                              } else if (value.code == "三月") {
                                month='3';
                              } else if (value.code == "四月") {
                                month='4';
                              } else if (value.code == "五月") {
                                month='5';
                              } else if (value.code == "六月") {
                                month='6';
                              } else if (value.code == "七月") {
                                month='7';
                              } else if (value.code == "八月") {
                                month='8';
                              } else if (value.code == "九月") {
                                month='9';
                              } else if (value.code == "十月") {
                                month='10';
                              } else if (value.code == "十一月") {
                                month='11';
                              } else if (value.code == "十二月") {
                                month='12';
                              }
                              !value.check
                                  ? monthResult.add(month)
                                  : monthResult.remove(month);
                              setState(() {
                                value.check = !value.check;
                              });
                            },
                            child: Stack(
                              children: <Widget>[
                                Container(
                                  padding: EdgeInsets.only(left: 4.0, right: 4.0),
                                  color: value.check
                                      ? Theme.of(context).primaryColor
                                      : Colors.grey[400],
                                  child: Center(
                                    child: Text(
                                      value.code,
                                      maxLines: 2,
                                      overflow: TextOverflow.ellipsis,
                                      style: TextStyle(
                                          fontSize: 14, color: Colors.white),
                                    ),
                                  ),
                                ),
                                Positioned(
                                    right: 0.0,
                                    bottom: 0.0,
                                    child: Offstage(
                                      offstage: !value.check,
                                      child: Icon(
                                        Icons.check,
                                        color: Colors.grey,
                                        size: 20,
                                      ),
                                    ))
                              ],
                            ),
                          );
                        }).toList(),
                      ),
                    ),
                    Container(
                        margin: EdgeInsets.only(top: 6.0),
                        decoration: BoxDecoration(
                            border: Border(
                                bottom: BorderSide(
                                    width: 1,
                                    color: WSColors.mainBackgroundColor)
                            )
                        )
                    ),
                  ],
                ),
                SizedBox(height: 10.0),
                Text(
                  "报销类型：",
                  style: TextStyle(fontSize: 16),
                ),
                SizedBox(height: 10.0),
                Wrap(
                  spacing: 8.0,
                  runSpacing: 8.0,
                  children: typeList.map((childNode) {
                    return InkWell(
                      child: new ClipRRect(
                        borderRadius: BorderRadius.circular(3.0),
                        child: Stack(
                          children: <Widget>[
                            Container(
                                padding: EdgeInsets.only(
                                    left: 12.0,
                                    right: 12.0,
                                    top: 10.0,
                                    bottom: 10.0),
                                color: childNode.check
                                    ? Theme.of(context).primaryColor
                                    : Colors.grey[400],
                                child: Text(childNode.code,
                                    style: TextStyle(
                                      fontSize: 16,
                                      color: Colors.white,
                                      shadows: [
                                        BoxShadow(
                                            color: Colors.grey,
                                            offset: Offset(0.2, 0.2))
                                      ],
                                    ))),
                            Positioned(
                                right: 0.0,
                                bottom: 0.0,
                                child: Offstage(
                                  offstage: !childNode.check,
                                  child: Icon(
                                    Icons.check,
                                    color: Colors.grey,
                                    size: 20,
                                  ),
                                ))
                          ],
                        ),
                      ),
                      onTap: () {
                        !childNode.check
                            ? typeResult.add(childNode.code)
                            : typeResult.remove(childNode.code);
                        setState(() {
                          childNode.check = !childNode.check;
                        });
                      },
                    );
                  }).toList(),
                ),
                SizedBox(height: 20.0),
                Row(
                  children: <Widget>[
                    Expanded(
                      child: InkWell(
                        onTap: () {
                          monthResult.clear();
                          typeResult.clear();
                          setState(() {
                            monthList.forEach((element) {
                              element.check = false;
                            });
                            typeList.forEach((element) {
                              element.check = false;
                            });
                          });
                        },
                        child: Container(
                            height: 46,
                            color: Theme.of(context).primaryColor,
                            child: Center(
                              child: Text(
                                "重置",
                                style: TextStyle(
                                    fontSize: 14, color: Colors.white),
                              ),
                            )),
                      ),
                    ),
                    SizedBox(
                      width: 10.0,
                    ),
                    Expanded(
                      child: InkWell(
                        onTap: () {
                          _destroy();
                        },
                        child: Container(
                            height: 46,
                            color: Theme.of(context).primaryColor,
                            child: Center(
                              child: Text(
                                "确定",
                                style: TextStyle(
                                    fontSize: 14, color: Colors.white),
                              ),
                            )),
                      ),
                    )
                  ],
                ),
                SizedBox(height: 20.0),
              ],
            ),
          ),
        ));
      },
    );
  }

  _destroy() async {
    await LocalStorage.save(Config.MONTH_RESULT, monthResult.join(','));
    await LocalStorage.save(Config.TYPE_RESULT, typeResult.join(','));
    Navigator.pop(context);
  }

  void _loadData() {
    typeList.addAll(widget.typeList);
    monthList.addAll(widget.monthList);

    monthList.forEach((element) {
      if(element.check){
        String month;
        if (element.code == "一月") {
          month='1';
        } else if (element.code == "二月") {
          month='2';
        } else if (element.code == "三月") {
          month='3';
        } else if (element.code == "四月") {
          month='4';
        } else if (element.code == "五月") {
          month='5';
        } else if (element.code == "六月") {
          month='6';
        } else if (element.code == "七月") {
          month='7';
        } else if (element.code == "八月") {
          month='8';
        } else if (element.code == "九月") {
          month='9';
        } else if (element.code == "十月") {
          month='10';
        } else if (element.code == "十一月") {
          month='11';
        } else if (element.code == "十二月") {
          month='12';
        }
        monthResult.add(month);
      }
    });

    typeList.forEach((element) {
      if(element.check){
        typeResult.add(element.code);
      }
    });
  }
}