flutter开发实战-flutter实现类似iOS的Alert提示框与sheet菜单效果

flutter开发实战-flutter实现类似iOS的Alert提示框与sheet菜单效果

在开发过程中，经常使用到提示框Dialog，与sheet，使用到了flutter的showDialog与showModalBottomSheet
我这里类似alert弹窗直接调用 flutter 中提供的showDialog()函数显示对话框。
我这里类似Sheet底部弹窗调用 flutter 中提供的showModalBottomSheet从屏幕下方弹出一个对话框。

效果图如下

一、定义dialog内容

定义dialog内容，实现标题、内容描述、按钮操作等功能。

class DialogItem {
  String? title;
  String? color;

  DialogItem({this.title, this.color});
}

class ShowAlertDialog extends StatefulWidget {
  const ShowAlertDialog({
    Key? key,
    this.contentAlign = TextAlign.left,
    required this.onTap,
    this.itemTitles,
    this.content,
    this.title,
    this.children,
  }) : super(key: key);

  // 内容区域布局
  final TextAlign contentAlign;

  final String? title;

  final String? content;

  // 点击返回index 0 1
  final Function onTap;

  //按钮
  final List<DialogItem>? itemTitles;

  final List<Widget>? children;

  @override
  State<ShowAlertDialog> createState() => _ShowAlertDialogState();
}

class _ShowAlertDialogState extends State<ShowAlertDialog> {
  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: Center(
        // ClipRRect 创建圆角矩形 要不然发现下边button不是圆角
        child: ClipRRect(
          borderRadius: BorderRadius.circular(4.0),
          child: Container(
            color: Color(0xFFFFFFFF),
            width: 300,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                SizedBox(
                  height: 25.0,
                ),
                _buildTitleWidget(),
                SizedBox(
                  height: (_hasTitleAndContent() ? 10.0 : 0.0),
                ),
                _buildContentWidget(),
                SizedBox(height: 25),
                Container(
                  decoration: BoxDecoration(
                    border: Border(
                      bottom: BorderSide(
                        color: Color(0xFFf5f5f5),
                        width: 1,
                      ),
                    ),
                  ),
                ),
                _buildItemWidget(),
              ],
            ),
          ),
        ),
      ),
    );
  }

  bool _hasTitle() {
    if (widget.title != null && widget.title!.isNotEmpty) {
      return true;
    }

    return false;
  }

  bool _hasContent() {
    if (widget.content != null && widget.content!.isNotEmpty) {
      return true;
    }

    return false;
  }

  bool _hasTitleAndContent() {
    if (_hasTitle() && _hasContent()) {
      return true;
    }
    return false;
  }

  Widget _buildTitleWidget() {
    bool aHasTitle = _hasTitle();
    if (aHasTitle) {
      return Container(
        padding: EdgeInsets.symmetric(horizontal: 8.0),
        child: Text(
          "${widget.title}",
          textAlign: TextAlign.center,
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(
            fontSize: 17,
            fontWeight: FontWeight.w600,
            fontStyle: FontStyle.normal,
            color: Color(0xFF1A1A1A),
            decoration: TextDecoration.none,
          ),
        ),
      );
    }

    return Container();
  }

  Widget _buildContentWidget() {
    bool aHasContent = _hasContent();
    if (aHasContent) {
      return Container(
        padding: EdgeInsets.symmetric(horizontal: 8.0),
        child: Text(
          "${widget.content}",
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.w500,
            fontStyle: FontStyle.normal,
            color: Color(0xFF333333),
            decoration: TextDecoration.none,
          ),
        ),
      );
    }

    return Container();
  }

  Widget _buildItemWidget() {
    if (widget.children != null && widget.children!.isNotEmpty) {
      return Container(
        height: 44.0,
        child: Row(
          children: widget.children!.map((res) {
            int index = widget.children!.indexOf(res);
            return Expanded(
              flex: 1,
              child: GestureDetector(
                onTap: () {
                  Navigator.pop(context);
                  widget.onTap(index);
                },
                child: Container(
                  height: 44,
                  alignment: Alignment.center,
                  child: res,
                  decoration: BoxDecoration(
                    border: Border(
                      right: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1,
                      ),
                    ),
                  ),
                ),
              ),
            );
          }).toList(),
        ),
      );
    }

    if (widget.itemTitles != null && widget.itemTitles!.isNotEmpty) {
      return Container(
        height: 44,
        child: Row(
          children: widget.itemTitles!.map((res) {
            int index = widget.itemTitles!.indexOf(res);
            return buildItem(res, index);
          }).toList(),
        ),
      );
    }

    return Container();
  }

  Widget buildItem(DialogItem item, int index) {
    String? title = item.title;
    String? color = item.color;
    Color textColor = ColorUtil.hexColor(0x333333);
    if (color != null && color.isNotEmpty) {
      textColor = ColorUtil.hexColorString(color);
    }
    return Expanded(
      flex: 1,
      child: GestureDetector(
        onTap: () {
          Navigator.pop(context);
          widget.onTap(index);
        },
        child: Container(
          height: 44,
          alignment: Alignment.center,
          child: Text(
            "${title}",
            style: TextStyle(
              color: textColor,
              fontSize: 16,
            ),
          ),
          decoration: BoxDecoration(
            border: Border(
              right: BorderSide(
                color: Color(0xFFF5F5F5),
                width: 1,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

二、定义sheet底部弹窗内容

底部弹窗内容一般为选项，分为多个选项，最后为取消按钮。

class ShowSheetDialog extends StatefulWidget {
  const ShowSheetDialog({
    Key? key,
    required this.onTap,
    required this.items,
    required this.title,
    this.cancelTitle,
  }) : super(key: key);

  //按钮title
  final List<DialogItem> items;

  //点击事件回调 0开始
  final Function onTap;

  //标题 可选
  final String title;

  //取消 可选
  final String? cancelTitle;

  @override
  State<ShowSheetDialog> createState() => _ShowSheetDialogState();
}

class _ShowSheetDialogState extends State<ShowSheetDialog> {
  @override
  Widget build(BuildContext context) {
    double viewPaddingBottom = MediaQuery.of(context).viewPadding.bottom;

    return ClipRRect(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(8.0),
        topRight: Radius.circular(8.0),
      ),
      child: Container(
        color: ColorUtil.hexColor(0xf7f7f7),
        padding: EdgeInsets.only(bottom: viewPaddingBottom),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            _itemTitle(context),
            Column(
              mainAxisSize: MainAxisSize.min,
              children: widget.items.map((item) {
                int index = widget.items.indexOf(item);
                return GestureDetector(
                  onTap: () {
                    Navigator.pop(context);
                    if (widget.onTap != null) {
                      widget.onTap(index);
                    }
                  },
                  child: _itemCreate(item),
                );
              }).toList(),
            ),
            GestureDetector(
              child: Padding(
                padding: EdgeInsets.only(top: 10),
                child: _itemCreate(DialogItem(
                    title: widget.cancelTitle ?? "取消", color: "333333")),
              ),
              onTap: () {
                Navigator.pop(context);
              },
            )
          ],
        ),
      ),
    );
  }

  Widget _itemTitle(BuildContext context) {
    //有标题的情况下
    if (widget.title != null && widget.title.isNotEmpty) {
      return Container(
        alignment: Alignment.center,
        width: MediaQuery.of(context).size.width,
        height: 40,
        child: Text(
          "${widget.title}",
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 14,
            fontWeight: FontWeight.w500,
            fontStyle: FontStyle.normal,
            color: ColorUtil.hexColor(0x777777),
            decoration: TextDecoration.none,
          ),
        ),
      );
    }

    return Container();
  }

  Widget _itemCreate(DialogItem item) {
    String title = item.title ?? "";
    String? color = item.color;
    Color textColor = ColorUtil.hexColor(0x333333);
    if (color != null && color.isNotEmpty) {
      textColor = ColorUtil.hexColorString(color);
    }

    return Container(
      height: 50,
      width: MediaQuery.of(context).size.width,
      child: Center(
        child: Text(
          "${title}",
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.w500,
            fontStyle: FontStyle.normal,
            color: textColor,
            decoration: TextDecoration.none,
          ),
        ),
      ),
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border(
          top: BorderSide(
            color: ColorUtil.hexColor(0xf7f7f7),
            width: 1.0,
          ),
        ),
      ),
    );
  }
}

三、调用flutter的showDialog方法弹窗

showDialog方法弹窗

/// 显示对话框的内容
class ShowDialogContent {
  String? title;
  String? message;
  String? ok;
  String? cancel;
  String? okColor;
  String? cancelColor;

  ShowDialogContent({this.title, this.message, this.ok, this.cancel});

  ShowDialogContent.fromJson(Map<String, dynamic> json) {
    title = json['title'];
    message = json['message'];
    ok = json['ok'];
    okColor = json['okColor'];
    cancel = json['cancel'];
    cancelColor = json['cancelColor'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['title'] = this.title;
    data['message'] = this.message;
    data['ok'] = this.ok;
    data['okColor'] = this.okColor;
    data['cancel'] = this.cancel;
    data['cancelColor'] = this.cancelColor;
    return data;
  }
}

class DialogUtil {
//显示中间弹窗
  static void popDialog(BuildContext context, Widget widget) {
    showDialog(
        context: context,
        barrierDismissible: true,
        builder: (ctx) {
          return widget;
        });
  }

  //返回上一级
  static void pop(BuildContext context) {
    Navigator.pop(context);
  }

// 显示处理弹出框
  static void showAlertDialog(
      {required ShowDialogContent dialogContent, OnDialogCallback? callback}) {
    DialogUtil.popDialog(
      OneContext().context!,
      ShowAlertDialog(
        title: dialogContent.title,
        content: dialogContent.message,
        onTap: (int index) {
          Map result = Map();
          result["index"] = index;
          if (callback != null) {
            callback(result);
          }
        },
        children: [
          Text(
            dialogContent.cancel ?? "",
            textAlign: TextAlign.center,
            softWrap: true,
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.w500,
              fontStyle: FontStyle.normal,
              color: dialogContent.cancelColor != null
                  ? ColorUtil.hexColorString(dialogContent.cancelColor!)
                  : ColorUtil.hexColorString("333333"),
              decoration: TextDecoration.none,
            ),
          ),
          Text(
            dialogContent.ok ?? "",
            textAlign: TextAlign.center,
            softWrap: true,
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.w500,
              fontStyle: FontStyle.normal,
              color: dialogContent.okColor != null
                  ? ColorUtil.hexColorString(dialogContent.okColor!)
                  : ColorUtil.hexColorString("333333"),
              decoration: TextDecoration.none,
            ),
          ),
        ],
      ),
    );
  }
}

四、调用flutter的bottomSheetDialog方法底部弹窗

class DialogUtil {
	
  //显示底部弹窗
  static void bottomSheetDialog(
    BuildContext context,
    Widget widget, {
    bool? isScrollControlled,
    bool? enableDrag,
    Color? backgroundColor,
  }) {
    showModalBottomSheet(
      context: context,
      isScrollControlled: isScrollControlled ?? true,
      enableDrag: enableDrag ?? true,
      backgroundColor: backgroundColor ?? Colors.white,
      builder: (ctx) {
        return widget;
      },
    );
  }

  // 显示处理chekbox
  static void showCheckBox(
      {required String title,
      required List<Map> optionList,
      String? cancelTitle,
      OnDialogCallback? callback}) {
    // {"title":"标题","titleColor":"FFFFFF"}
    List<DialogItem> items = [];
    for (Map map in optionList) {
      String? title = map["title"];
      String? titleColor = map["titleColor"];
      DialogItem item = DialogItem(title: title, color: titleColor);
      items.add(item);
    }

    DialogUtil.bottomSheetDialog(
      OneContext().context!,
      ShowSheetDialog(
        onTap: (int index) {
          Map result = Map();
          result["index"] = index;
          if (callback != null) {
            callback(result);
          }
        },
        items: items,
        title: title,
        cancelTitle: cancelTitle,
      ),
      enableDrag: false,
      backgroundColor: Colors.transparent,
    );
  }

}

五、小结

flutter开发实战-flutter实现类似iOS的Alert提示框与sheet菜单效果，使用到了flutter的showDialog与showModalBottomSheet来显示对话框与屏幕下方弹出一个对话框功能。

学习记录，每天不停进步。文章来源地址https://www.toymoban.com/news/detail-559703.html

到了这里，关于flutter开发实战-flutter实现类似iOS的Alert提示框与sheet菜单效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！