Flutter限制选择数量复选框插件flutter_limited

Flutter限制选择数量复选框插件flutter_limited_checkbox的使用

flutter_limited_checkbox 插件可以帮助你在 Flutter 应用中实现单选、有限数量选择和无限数量选择的复选框功能。

特性

自定义复选框
复选框列表
单选
有限数量选择
无限数量选择

获取开始

首先，在 pubspec.yaml 文件中添加依赖项：

dependencies:
  flutter_limited_checkbox: ^0.0.1

然后运行 flutter pub get 来安装该插件。

简单使用

以下是一个简单的示例，展示如何使用 flutter_limited_checkbox 插件来创建一个单选复选框列表。

import 'package:flutter/material.dart';
import 'package:flutter_limited_checkbox/flutter_limited_checkbox.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Single CheckBox selection'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var selectedTitle = '';
  var selectedID = 0;

  List<FlutterLimitedCheckBoxModel> mySingleValueList = [];

  [@override](/user/override)
  void initState() {
    mySingleValueList.add(FlutterLimitedCheckBoxModel(isSelected: false, selectTitle: 'Option-1', selectId: 1));
    mySingleValueList.add(FlutterLimitedCheckBoxModel(isSelected: false, selectTitle: 'Option-2', selectId: 2));
    mySingleValueList.add(FlutterLimitedCheckBoxModel(isSelected: false, selectTitle: 'Option-3', selectId: 3));
    mySingleValueList.add(FlutterLimitedCheckBoxModel(isSelected: false, selectTitle: 'Option-4', selectId: 4));
    mySingleValueList.add(FlutterLimitedCheckBoxModel(isSelected: false, selectTitle: 'Option-5', selectId: 5));
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: FlutterSingleCheckbox(
        activeColor: Colors.red,
        singleValueList: mySingleValueList,
        onChanged: (index) {
          selectedID = mySingleValueList[index].selectId;
          selectedTitle = mySingleValueList[index].selectTitle;
          print('Name: $selectedTitle Status: $selectedID');
        },
        titleTextStyle: const TextStyle(fontSize: 14, fontWeight: FontWeight.normal),
        mainAxisAlignmentOfRow: MainAxisAlignment.start,
        crossAxisAlignmentOfRow: CrossAxisAlignment.center,
      ),
    );
  }
}

有限数量选择

以下是一个有限数量选择的示例，设置最多可以选择 3 个选项。

import 'package:flutter/material.dart';
import 'package:flutter_limited_checkbox/flutter_limited_checkbox.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Limited CheckBox selection'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var selectedTitles = [];
  var selectedIDs = [];

  List<FlutterLimitedCheckBoxModel> mySingleValueList = [];

  [@override](/user/override)
  void initState() {
    mySingleValueList.add(FlutterLimitedCheckBoxModel(isSelected: false, selectTitle: 'Option-1', selectId: 1));
    mySingleValueList.add(FlutterLimitedCheckBoxModel(isSelected: false, selectTitle: 'Option-2', selectId: 2));
    mySingleValueList.add(FlutterLimitedCheckBoxModel(isSelected: false, selectTitle: 'Option-3', selectId: 3));
    mySingleValueList.add(FlutterLimitedCheckBoxModel(isSelected: false, selectTitle: 'Option-4', selectId: 4));
    mySingleValueList.add(FlutterLimitedCheckBoxModel(isSelected: false, selectTitle: 'Option-5', selectId: 5));
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: FlutterLimitedCheckbox(
        limit: 3,
        limitedValueList: mySingleValueList,
        onChanged: (List<FlutterSelectModel> list) {
          selectedIDs = list.map((e) => e.selectId).toList();
          selectedTitles = list.map((e) => e.selectTitle).toList();
          print('Selected IDs: $selectedIDs');
          print('Selected Titles: $selectedTitles');
        },
      ),
    );
  }
}

无限数量选择

以下是一个无限数量选择的示例，可以无限制地选择多个选项。

import 'package:flutter/material.dart';
import 'package:flutter_limited_checkbox/flutter_limited_checkbox.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Unlimited CheckBox selection'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var selectedTitles = [];
  var selectedIDs = [];

  List<FlutterLimitedCheckBoxModel> mySingleValueList = [];

  [@override](/user/override)
  void initState() {
    mySingleValueList.add(FlutterLimitedCheckBoxModel(isSelected: false, selectTitle: 'Option-1', selectId: 1));
    mySingleValueList.add(FlutterLimitedCheckBoxModel(isSelected: false, selectTitle: 'Option-2', selectId: 2));
    mySingleValueList.add(FlutterLimitedCheckBoxModel(isSelected: false, selectTitle: 'Option-3', selectId: 3));
    mySingleValueList.add(FlutterLimitedCheckBoxModel(isSelected: false, selectTitle: 'Option-4', selectId: 4));
    mySingleValueList.add(FlutterLimitedCheckBoxModel(isSelected: false, selectTitle: 'Option-5', selectId: 5));
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: FlutterUnlimitedCheckbox(
        unlimitedCheckList: mySingleValueList,
        onChanged: (List<FlutterSelectModel> list) {
          selectedIDs = list.map((e) => e.selectId).toList();
          selectedTitles = list.map((e) => e.selectTitle).toList();
          print('Selected IDs: $selectedIDs');
          print('Selected Titles: $selectedTitles');
        },
      ),
    );
  }
}

更多关于Flutter限制选择数量复选框插件flutter_limited_checkbox的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

bupafengyu 1楼作者

更多关于Flutter限制选择数量复选框插件flutter_limited_checkbox的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

flutter_limited_checkbox 是一个用于 Flutter 的插件，它允许你在复选框列表中限制用户可以选择的最大数量。这对于需要用户选择多个选项但又不希望他们选择过多的场景非常有用。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 flutter_limited_checkbox 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_limited_checkbox: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

使用示例

以下是一个简单的示例，展示如何使用 flutter_limited_checkbox 插件来限制用户最多选择 3 个复选框。

import 'package:flutter/material.dart';
import 'package:flutter_limited_checkbox/flutter_limited_checkbox.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Limited Checkbox Example'),
        ),
        body: LimitedCheckboxExample(),
      ),
    );
  }
}

class LimitedCheckboxExample extends StatefulWidget {
  [@override](/user/override)
  _LimitedCheckboxExampleState createState() => _LimitedCheckboxExampleState();
}

class _LimitedCheckboxExampleState extends State<LimitedCheckboxExample> {
  // 定义选项列表
  final List<String> options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'];

  // 定义选中的选项
  final Set<String> selectedOptions = {};

  // 最大选择数量
  final int maxSelections = 3;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: options.length,
      itemBuilder: (context, index) {
        return LimitedCheckbox(
          value: selectedOptions.contains(options[index]),
          onChanged: (bool? value) {
            setState(() {
              if (value == true) {
                if (selectedOptions.length < maxSelections) {
                  selectedOptions.add(options[index]);
                }
              } else {
                selectedOptions.remove(options[index]);
              }
            });
          },
          enabled: selectedOptions.length < maxSelections || selectedOptions.contains(options[index]),
          child: Text(options[index]),
        );
      },
    );
  }
}