flutter_multi_picker 0.0.3

Flutter plugin picker. Similar to JD(京东). Provide flexible parameters to meet various needs.

example/lib/main.dart

import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_multi_picker/flutter_multi_picker.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<Map<String, dynamic>> pickerList = [];
  List<Map<String, dynamic>> customList = [];
  List<Map<String, dynamic>> pcaList = [];
  List<Map<String, dynamic>> pcasList = [];
  List<Map<String, dynamic>> selectValue = [];
  List<int> pickerSelectIndex = [];
  List<int> customSelectIndex = [];
  List<int> pcaSelectIndex = [];
  List<int> pcasSelectIndex = [];
  String title = 'Picker';

  @override
  void initState() {
    super.initState();
    loadPickerList();
    loadCustomPickerList();
    loadPcaList();
    loadPcasList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('MultiPicker Example App'),
      ),
      body: Container(
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('$selectValue'),
            RaisedButton(
              onPressed: () {
                title = 'Picker';
                showBottomPicker();
              },
              child: Text('Picker'),
            ),
            RaisedButton(
              onPressed: () {
                title = 'Custom Picker';
                showBottomCustomPicker();
              },
              child: Text('Custom Picker'),
            ),
            RaisedButton(
              onPressed: () {
                title = 'PCA Picker';
                showPcaBottomPicker();
              },
              child: Text('PCA Picker'),
            ),
            RaisedButton(
              onPressed: () {
                title = 'PCAS Picker';
                showPcasBottomPicker();
              },
              child: Text('PCAS Picker'),
            ),
          ],
        ),
      ),
    );
  }

  void loadPickerList() {
    DefaultAssetBundle.of(context)
        .loadString('assets/data/pickerData.json')
        .then((value) {
      var jsonData = jsonDecode(value);

      pickerList = listToTree(dataList: jsonData);
    });
  }

  void loadCustomPickerList() {
    DefaultAssetBundle.of(context)
        .loadString('assets/data/customData.json')
        .then((value) {
      var jsonData = jsonDecode(value);

      customList = listToTree(
          dataList: jsonData,
          keyName: 'value',
          pidName: 'level',
          childrenName: 'data');
      print(customList);
    });
  }

  void loadPcaList() {
    DefaultAssetBundle.of(context)
        .loadString('assets/data/pca.json')
        .then((value) {
      var jsonData = jsonDecode(value);
      jsonData.forEach((el) {
        pcaList.add(el);
      });
    });
  }

  void loadPcasList() {
    DefaultAssetBundle.of(context)
        .loadString('assets/data/pcas.json')
        .then((value) {
      var jsonData = jsonDecode(value);
      jsonData.forEach((el) {
        pcasList.add(el);
      });
    });
  }

  Widget buildBottomSheet({@required Widget child}) {
    return Container(
      height: 300,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20),
          topRight: Radius.circular(20),
        ),
      ),
      child: child,
    );
  }

  void showBottomPicker() {
    showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent,
      builder: (ctx) {
        return buildBottomSheet(child: Column(
          children: [
            Container(
              height: 50,
              alignment: Alignment.center,
              child: Text(
                title,
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
            ),
            Expanded(
              child: MultiPicker(
                dataList: pickerList,
                initValue: pickerSelectIndex,
                onValueChange: (value) {
                  Navigator.pop(context, value);
                },
                onSelectChange: (value) {
                  setState(() {
                    pickerSelectIndex = value;
                  });
                },
              ),
            ),
          ],
        ),);
      },
    ).then((value) {
      if (value != null) {
        setState(() {
          selectValue = value;
        });
      }
    });
  }

  void showBottomCustomPicker() {
    showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent,
      builder: (ctx) {
        return buildBottomSheet(
          child:  Column(
              children: [
                Container(
                  height: 50,
                  alignment: Alignment.center,
                  child: Text(
                    title,
                    style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                  ),
                ),
                Expanded(
                  child: MultiPicker(
                    dataList: customList,
                    initValue: customSelectIndex,
                    keyName: 'value',
                    valueName: 'title',
                    childrenName: 'data',
                    onValueChange: (value) {
                      Navigator.pop(context, value);
                    },
                    onSelectChange: (value) {
                      setState(() {
                        customSelectIndex = value;
                      });
                    },
                  ),
                ),
              ],
            ),
        );
      },
    ).then((value) {
      if (value != null) {
        setState(() {
          selectValue = value;
        });
      }
    });
  }

  void showPcaBottomPicker() {
    showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent,
      builder: (ctx) {
        return buildBottomSheet(
          child: Column(
            children: [
              Container(
                height: 50,
                alignment: Alignment.center,
                child: Text(
                  title,
                  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                ),
              ),
              Expanded(
                child: MultiPicker(
                  dataList: pcaList,
                  initValue: pcaSelectIndex,
                  keyName: 'code',
                  onValueChange: (value) {
                    Navigator.pop(context, value);
                  },
                  onSelectChange: (value) {
                    setState(() {
                      pcaSelectIndex = value;
                    });
                  },
                ),
              ),
            ],
          ),
        );
      },
    ).then((value) {
      if (value != null) {
        setState(() {
          selectValue = value;
        });
      }
    });
  }

  void showPcasBottomPicker() {
    showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent,
      builder: (ctx) {
        return buildBottomSheet(
          child: Column(
            children: [
              Container(
                height: 50,
                alignment: Alignment.center,
                child: Text(
                  title,
                  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                ),
              ),
              Expanded(
                child: MultiPicker(
                  dataList: pcasList,
                  initValue: pcasSelectIndex,
                  keyName: 'code',
                  onValueChange: (value) {
                    Navigator.pop(context, value);
                  },
                  onSelectChange: (value) {
                    setState(() {
                      pcasSelectIndex = value;
                    });
                  },
                ),
              ),
            ],
          ),
        );
      },
    ).then((value) {
      if (value != null) {
        setState(() {
          selectValue = value;
        });
      }
    });
  }

  List<Map<String, dynamic>> listToTree({
    List<dynamic> dataList,
    String keyName = 'id',
    String pidName = 'pid',
    String childrenName = 'children',
  }) {
    var newList = <Map<String, dynamic>>[];
    var newMap = <dynamic, dynamic>{};

    dataList.forEach((el) {
      newMap.putIfAbsent(el[keyName], () => el);
    });

    dataList.forEach((el) {
      var parent = newMap[el[pidName]];

      if (parent != null) {
        if (parent[childrenName] == null) {
          var ch = <Map<String, dynamic>>[];
          ch.add(el);
          parent[childrenName] = ch;
        } else {
          var ch = parent[childrenName];
          ch.add(el);
          parent[childrenName] = ch;
        }
      } else {
        newList.add(el);
      }
    });
    return newList;
  }
}