flutter省市区三级联动

省市区三级联动，这个需求在大多说的应用中是个常见的功能，没事就出来制造个轮子。
直接上图，看效果图

fa06859e95e45dcd3c183afe610e83c7.jpg

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
import 'dart:convert';

typedef List<Widget> CreateWidgetList();

class CityPicker {
  static Widget show() {
    return new _CityPicker();
  }
}

class _CityPicker extends StatefulWidget {
  @override
  State createState() {
    return new _CityPickerState();
  }
}

class _CityPickerState extends State<_CityPicker> {
  List data = new List();
  List province = new List();
  List city = new List();
  List area = new List();
  FixedExtentScrollController provinceController =
      new FixedExtentScrollController();
  FixedExtentScrollController cityController =
      new FixedExtentScrollController();
  FixedExtentScrollController areaController =
      new FixedExtentScrollController();
  int provinceIndex = 0;
  int cityIndex = 0;
  int areaIndex = 0;

  void _loadData() {
    rootBundle.loadString('assets/data/province.json').then((v) {
      List data = json.decode(v);
      setState(() {
        this.data = data;
        this.province = data;
        this.city = data[provinceIndex]['children'];
        this.area = data[provinceIndex]['children'][cityIndex]['children'];
      });
    });
  }

  @override
  void initState() {
    super.initState();
    _loadData();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('省市县三级联动'),
        centerTitle: true,
      ),
      body: new Container(
        width: double.infinity,
        child: new Column(
          children: <Widget>[
            new Row(
              children: <Widget>[
                FlatButton(onPressed: () {}, child: new Text('取消')),
                FlatButton(
                    onPressed: () {
                      print(data[provinceIndex]);
                      print(data[provinceIndex]['children'][cityIndex]);
                      print(data[provinceIndex]['children'][cityIndex]
                          ['children'][areaIndex]);
                    },
                    child: new Text('选择')),
              ],
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
            ),
            new Expanded(
              child: new Row(
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  new Expanded(
                    flex: 1,
                    child: new MyPicker(
                      controller: provinceController,
                      key: Key('province'),
                      createWidgetList: () {
                        return province.map((v) {
                          return new Text(v['label']);
                        }).toList();
                      },
                      changed: (int index) {
                        setState(() {
                          cityController.jumpToItem(0);
                          areaController.jumpToItem(0);
                          provinceIndex = index;
                          cityIndex = 0;
                          areaIndex = 0;
                          city = data[provinceIndex]['children'];
                          area = data[provinceIndex]['children'][cityIndex]
                              ['children'];
                        });
                      },
                    ),
                  ),
                  new Expanded(
                    flex: 1,
                    child: new MyPicker(
                      controller: cityController,
                      key: Key('city'),
                      createWidgetList: () {
                        return city.map((v) {
                          return new Text(v['label']);
                        }).toList();
                      },
                      changed: (index) {
                        setState(() {
                          areaController.jumpToItem(0);
                          cityIndex = index;
                          areaIndex = 0;
                          area = data[provinceIndex]['children'][cityIndex]
                              ['children'];
                        });
                      },
                    ),
                  ),
                  new Expanded(
                    flex: 1,
                    child: new MyPicker(
                      controller: areaController,
                      key: Key('area'),
                      createWidgetList: () {
                        return area.map((v) {
                          return new Text(v['label']);
                        }).toList();
                      },
                      changed: (index) {
                        setState(() {
                          areaIndex = index;
                        });
                      },
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class MyPicker extends StatefulWidget {
  final CreateWidgetList createWidgetList;
  final ValueChanged<int> changed;
  final Key key;
  final FixedExtentScrollController controller;

  MyPicker({this.createWidgetList, this.changed, this.key, this.controller});

  @override
  State createState() {
    return new _MyPickerState();
  }
}

class _MyPickerState extends State<MyPicker> {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new CupertinoPicker(
        key: widget.key,
        scrollController: widget.controller,
        itemExtent: 40.0,
        onSelectedItemChanged: (index) {
          if (widget.changed != null) {
            widget.changed(index);
          }
        },
        children: widget.createWidgetList().length > 0
            ? widget.createWidgetList()
            : [new Text('请选择')],
      ),
    );
  }
}

在这个功能开发的过程中遇到了很多问题，最重要的是自己对flutter的状态管理机制理解不到位，在flutter里面，事件的传递是从下往上传递的，数据流是从上下传递的，以后还要多多读读文档。
主要问题：
1、省市区的数据刷新问题。采用父级组件给子组件传递数据的方式。这样，省市刷新的时候可以从父级组件更新子组件数据。

class _MyPickerState extends State<MyPicker> {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new CupertinoPicker(
        key: widget.key,
        scrollController: widget.controller,
        itemExtent: 40.0,
        onSelectedItemChanged: (index) {
          if (widget.changed != null) {
            widget.changed(index);
          }
        },
        children: widget.createWidgetList().length > 0
            ? widget.createWidgetList()
            : [new Text('请选择')],
      ),
    );
  }
}

2、选择之后滚动的状态更新。因为FixedExtentScrollController有自己的状态管理机制,查找源代码，找到了定位滚动到固定位置的办法。

                          cityController.jumpToItem(0);
                          areaController.jumpToItem(0);

不完善的地方：
1、数据回调，没有留下选择之后回调的接口，这个后期完善。
2、实用性方面，这个的功能，最好从底部弹出，后期再完善。
3、美观性不足。

废话不多说上代码github地址
PS欢迎大家关注我的简书，相互学习探讨。