Flutter 自定义 ActionSheet 组件

import 'package:flutter/material.dart';

class ActionSheet<T> {
  final List<ActionSheetItem> children;
  final bool showCancel;
  final BuildContext context;
  Function onClosing;
  final Function(T) onClickItem;

  ActionSheet(
      {@required this.context,
      @required this.children,
      this.showCancel = false,
      this.onClosing,
      @required this.onClickItem});

  void show() {
    showModalBottomSheet(
        context: context,
        builder: (ctx) {
          List<Widget> _children = children.map((item) {
            return ButtonTheme(
                minWidth: MediaQuery.of(context).size.width,
                child: FlatButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                    this.onClickItem(item.value);
                  },
                  child: Text(item.label),
                ));
          }).toList();

          if (showCancel) {
            _children.add(Container(
              child: null,
              color: Colors.black12,
              padding: EdgeInsets.only(top: 8.0),
            ));
            _children.add(ButtonTheme(
                minWidth: MediaQuery.of(context).size.width,
                child: FlatButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: Text('取消'),
                )));
          }

          return BottomSheet(
            onClosing: () {
              onClosing();
            },
            builder: (ctx) {
              return SingleChildScrollView(
                  child: Column(
                children: _children,
                mainAxisSize: MainAxisSize.min,
              ));
            },
          );
        });
  }
}

class ActionSheetItem {
  final String label;
  final value;
  ActionSheetItem({@required this.label, @required this.value});
}

// 使用方式
enum Fruit { APPLE, BANANA, ORANGE }

new ActionSheet<Fruit>(
  context: context,
  // 显示取消选项
  showCancel: true,
  // 选中事件
  onClickItem: (fruit) {
    switch (fruit) {
      case Fruit.APPLE:
        print('苹果');
        break;
      case Fruit.BANANA:
        print('香蕉');
        break;
      case Fruit.ORANGE:
        print('橘子');
        break;
    }
  },
  // 选项
  children: [
    ActionSheetItem(label: '苹果', value: Fruit.APPLE),
    ActionSheetItem(label: '香蕉', value: Fruit.BANANA),
    ActionSheetItem(label: '橘子', value: Fruit.ORANGE),
  ]
).show();