flutter封裝點選選單工具列元件checkBox多選版

import 'dart:core';
import 'package:flutter/material.dart';
/// @author 程式設計小龍
/// @建立時間：2022/3/8
/// 工具選單checkbox版子項
class ToolMenuCheckboxItemWidget extends StatelessWidget {
  /// 顯示的title
  final String title;
  /// 序號
  final int index;
  /// 點選回撥
  final void Function(int, bool) click;
  final double width;
  final double height;
  final bool isActive;
  final bool isHorizontal; // 是否橫向
  final bool isEnd; // 是否為末尾
  final Color? activeColor; // 點選後的顏色 沒傳取主題色
  final Color? backgroundColor; // 背景色
  final Color? borderColor; // 邊框色
  final TextStyle? textStyle; // 文字樣式
  final TextStyle? activeTextStyle; //  選中的文字樣式
  const ToolMenuCheckboxItemWidget(
      {Key? key,
      this.isActive = false,
      required this.title,
      required this.index,
      required this.click,
      this.isHorizontal = false,
      this.width = 100,
      this.isEnd = false,
      this.height = 40,
      this.activeColor,
      this.backgroundColor,
      this.borderColor,
      this.textStyle,
      this.activeTextStyle})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    TextStyle defaultTextStyle = TextStyle(
        fontSize: 16, color: isActive ? Colors.white : Colors.black87);
    return Material(
      child: Ink( // 點選右波紋效果
        width: width,
        height: height,
        decoration: BoxDecoration(
            color: isActive
                ? activeColor ?? Theme.of(context).primaryColor
                : backgroundColor ?? Colors.white30,
            border: isHorizontal
                ? isEnd
                ? const Border()
                : Border(
                right: BorderSide(
                    width: 1, color: borderColor ?? Colors.grey))
                : Border(
                bottom: BorderSide(
                    width: 1, color: borderColor ?? Colors.grey))),
        child: InkWell(
            onTap: () {
              click(index,!isActive);
            },
            child: Center(
              child: Text(title,
                  style: isActive
                      ? activeTextStyle ?? defaultTextStyle
                      : textStyle ?? defaultTextStyle),
            )),
      ),
    );
  }
}

import 'package:demo/widgets/tool_menu_checkbox_item_widget.dart';
import 'package:flutter/material.dart';
/// @author 程式設計小龍
/// @建立時間：2022/3/8
/// 工具選單checkbox版
class ToolMenuCheckBoxWidget extends StatefulWidget {
  final Map<String, bool> items; // title:checked 的形式 返回值為 key:true/false
  final void Function(int, bool) click; // 點選回撥 返回第n個的選中情況
  final double? width;
  final double? height;
  final bool isHorizontal; // 橫向
  final Color? activeColor; // 點選後的顏色 沒傳取主題色
  final Color? backgroundColor; // 背景色
  final Color? borderColor; // 邊框色
  final TextStyle? textStyle; // 文字樣式
  final TextStyle? activeTextStyle; //  選中的文字樣式
  const ToolMenuCheckBoxWidget(
      {Key? key,
      required this.items,
      required this.click,
      this.width,
      this.height,
      this.isHorizontal = false,
      this.activeColor,
      this.backgroundColor,
      this.borderColor,
      this.textStyle,
      this.activeTextStyle})
      : super(key: key);
  @override
  State<ToolMenuCheckBoxWidget> createState() => _ToolMenuCheckBoxWidgetState();
}
class _ToolMenuCheckBoxWidgetState extends State<ToolMenuCheckBoxWidget> {
  late Map<String, bool> items;
  bool isHorizontal = false; // 是否橫向
  @override
  void initState() {
    // 初始化當前選中
    items = widget.items;
    isHorizontal = widget.isHorizontal;
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    int index = 0; // 遍歷自增 index
    int size = widget.items.length;
    double height = widget.height ?? (isHorizontal ? 50 : 200); // 設定水平和豎直時的預設值
    double width = widget.width ?? (isHorizontal ? 400 : 100);
    return Container(
      height: height,
      width: width,
      decoration: BoxDecoration(
        color: widget.backgroundColor ?? Colors.white30,
        border: Border.all(color: widget.borderColor ?? Colors.grey, width: 1),
      ),
      child: Wrap(
        children: items.keys.map((key) {
          return ToolMenuCheckboxItemWidget(
            title: key,
            index: index,
            isHorizontal: widget.isHorizontal,
            click: (index, isChecked) {
              setState(() {
                items[key] = isChecked;
              });
              widget.click(index, isChecked);
            },
            height:
                widget.isHorizontal ? height - 2 : height / size,
            isActive: items[key] ?? false,
            width: widget.isHorizontal ? width / size - 1 : width,
            isEnd: index++ == size - 1,
            textStyle: widget.textStyle,
            activeTextStyle: widget.activeTextStyle,
            backgroundColor: widget.backgroundColor,
            activeColor: widget.activeColor,
            borderColor: widget.borderColor,
          );
        }).toList(),
      ),
    );
  }
}

/// 豎向
ToolMenuCheckBoxWidget(
    items: { // 注意這裡map不要用const宣告，因為裡面的值傳遞過去會同步更改，並不會重新copy一份值操作
      "選項1": true,
      "選項2": true,
      "選項3": false,
      "選項4": false
    },
    click: (index, isActive) {
      print("豎向 選項$index 的值為$isActive");
    }),
/// 自定義樣式橫向
ToolMenuCheckBoxWidget(
items: { // 注意這裡map不要用const宣告，因為裡面的值傳遞過去會同步更改，並不會重新copy一份值操作
    "選項1": true,
    "選項2": false,
    "選項3": false,
    "選項4": true,
    "選項5": false,
    "選項6": false,
  },
  click: (index, isActive) {
    print("橫向 選項$index 的值為$isActive");
  },
  isHorizontal: true,
  activeColor: Colors.green,
  backgroundColor: Colors.black,
  textStyle: const TextStyle(color: Colors.white),
  activeTextStyle:
  const TextStyle(color: Colors.white, fontSize: 18),
  borderColor: Colors.orange,
),