Flutter单选选择插件custom_single

Flutter单选选择插件custom_single_select的使用

简介

custom_single_select 是一个用于 Flutter 应用程序的灵活且可定制的单选选择包。它提供了两种选项：一种带有搜索功能（适用于较长列表），另一种不带搜索功能（适用于较短列表）。该插件为您的应用提供了一个完美的选择解决方案。

示例

以下是使用 custom_single_select 插件的基本示例。

导入库

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

dependencies:
  custom_single_select: ^版本号

然后，在 Dart 文件中导入该库：

import 'package:custom_single_select/custom_single_select.dart';

使用插件

不带搜索功能

CustomSingleSelect<String>(
    isBarrierDismissible: true,
    onSelect: (value) {
        setState(() {
            initialValue = value;
        });
     },
    items: dataString,
    cancelText: "关闭",
    cancelBackgroundColor: Colors.green,
    itemBackgroundColor: Colors.white,
    titleBackgroundColor: Colors.orange,
    separatorColor: Colors.blueGrey,
    separatorHeight: 3,
    cancelTextStyle: const TextStyle(
        color: Colors.white,
        fontSize: 20,
    ),
    itemTextStyle: const TextStyle(
        color: Colors.deepPurple,
        fontWeight: FontWeight.bold,
        fontSize: 20,
    ),
    title: "国家",
    titleTextStyle: const TextStyle(
        fontSize: 25,
        fontWeight: FontWeight.bold,
        color: Colors.white,
    ),
    selectedItemTextStyle: const TextStyle(
        fontSize: 20, fontWeight: FontWeight.bold
    ),
    decoration: const InputDecoration(
        suffixIcon: Icon(Icons.arrow_drop_down, size: 25),
        border: InputBorder.none,
        hintText: "无搜索",
        hintStyle: TextStyle(
            fontSize: 20,
            color: Colors.black,
        )
    ),
    initialValue: initialValue
)

带搜索功能

CustomSingleSearchSelect<String>(
    isBarrierDismissible: true,
    items: dataString,
    cancelText: "关闭",
    cancelBackgroundColor: Colors.green,
    itemBackgroundColor: Colors.white,
    titleBackgroundColor: Colors.orange,
    separatorColor: Colors.blueGrey,
    separatorHeight: 3,
    cancelTextStyle: const TextStyle(
        color: Colors.white,
        fontSize: 20,
    ),
    itemTextStyle: const TextStyle(
        color: Colors.deepPurple,
        fontWeight: FontWeight.bold,
        fontSize: 20,
    ),
    title: "国家",
    titleTextStyle: const TextStyle(
        fontSize: 25,
        fontWeight: FontWeight.bold,
        color: Colors.black,
    ),
    selectedItemTextStyle: const TextStyle(
        fontSize: 20, fontWeight: FontWeight.bold
    ),
    decoration: const InputDecoration(
        suffixIcon: Icon(Icons.arrow_drop_down, size: 25),
        border: InputBorder.none,
        hintText: "带搜索",
        hintStyle: TextStyle(
            fontSize: 20,
            color: Colors.black,
        )
    ),
    searchStyle: const TextStyle(
        fontSize: 20,
        color: Colors.black,
    ),
    searchDecoration: const InputDecoration(
        border: InputBorder.none,
        hintText: "搜索国家",
        hintStyle: TextStyle(
            fontSize: 20,
            color: Colors.black,
        )
    ),
    onSelect: (value) {
        setState(() {
            searchInitialValue = value;
        });
    },
    valueSelected: searchInitialValue
)

完整示例

以下是一个完整的示例，展示了如何在 Flutter 应用程序中使用 custom_single_select 插件。

import 'package:custom_single_select/custom_single_select.dart';
import 'package:flutter/material.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(
      debugShowCheckedModeBanner: false,
      title: '自定义单选选择示例',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(title: '自定义单选选择示例'),
    );
  }
}

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> {
  List<String> dataString = ["科特迪瓦", "喀麦隆", "塞内加尔", "多哥"];
  String? initialValue;
  String? searchInitialValue;

  [@override](/user/override)
  Widget build(BuildContext context) {
    double deviceHeight = MediaQuery.of(context).size.height;
    double deviceWidth = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SizedBox(
          height: deviceHeight,
          width: deviceWidth,
          child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 50),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    padding: const EdgeInsets.only(left: 10),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      border: Border.all(
                        color: Colors.grey,
                        width: 1,
                      ),
                    ),
                    child: Center(
                        child: CustomSingleSelect<String>(
                      		isBarrierDismissible: true,
                      		onSelect: (value) {
								setState(() {
								  initialValue = value;
								});
                      		},
							items: dataString,
							cancelText: "关闭",
							cancelBackgroundColor: Colors.green,
							itemBackgroundColor: Colors.white,
							titleBackgroundColor: Colors.orange,
							separatorColor: Colors.blueGrey,
							separatorHeight: 3,
							cancelTextStyle: const TextStyle(
								color: Colors.white,
								fontSize: 20,
							),
							itemTextStyle: const TextStyle(
								color: Colors.deepPurple,
								fontWeight: FontWeight.bold,
								fontSize: 20,
							),
							title: "国家",
							titleTextStyle: const TextStyle(
								fontSize: 25,
								fontWeight: FontWeight.bold,
								color: Colors.white
							),
							selectedItemTextStyle: const TextStyle(
								fontSize: 20, fontWeight: FontWeight.bold
							),
							decoration: const InputDecoration(
								suffixIcon: Icon(Icons.arrow_drop_down, size: 25),
								border: InputBorder.none,
								hintText: "无搜索",
								hintStyle: TextStyle(
									fontSize: 20,
									color: Colors.black,
								)
							),
							initialValue: initialValue,
                    	)
					),
                  ),
                  const SizedBox(height: 20),
                  Container(
                    padding: const EdgeInsets.only(left: 10),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      border: Border.all(
                        color: Colors.grey,
                        width: 1,
                      ),
                    ),
                    child: Center(
                        child: CustomSingleSearchSelect<String>(
							isBarrierDismissible: true,
							items: dataString,
							cancelText: "关闭",
							cancelBackgroundColor: Colors.green,
							itemBackgroundColor: Colors.white,
							titleBackgroundColor: Colors.orange,
							separatorColor: Colors.blueGrey,
							separatorHeight: 3,
							cancelTextStyle: const TextStyle(
								color: Colors.white,
								fontSize: 20,
							),
							itemTextStyle: const TextStyle(
								color: Colors.deepPurple,
								fontWeight: FontWeight.bold,
								fontSize: 20,
							),
							title: "国家",
							titleTextStyle: const TextStyle(
								fontSize: 25,
								fontWeight: FontWeight.bold,
								color: Colors.black,
							),
							selectedItemTextStyle: const TextStyle(
								fontSize: 20, fontWeight: FontWeight.bold
							),
							decoration: const InputDecoration(
								suffixIcon: Icon(Icons.arrow_drop_down, size: 25),
								border: InputBorder.none,
								hintText: "带搜索",
								hintStyle: TextStyle(
									fontSize: 20,
									color: Colors.black,
								)
							),
							searchStyle: const TextStyle(
								fontSize: 20,
								color: Colors.black,
							),
							searchDecoration: const InputDecoration(
								border: InputBorder.none,
								hintText: "搜索国家",
								hintStyle: TextStyle(
									fontSize: 20,
									color: Colors.black,
								)
							),
							onSelect: (value) {
								setState(() {
									searchInitialValue = value;
								});
							},
                            valueSelected: searchInitialValue,
                    	)
					),
                  ),
                ],
              )
			)
		),
    );
  }
}

更多关于Flutter单选选择插件custom_single_select的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

eggper 1楼•1 天前

更多关于Flutter单选选择插件custom_single_select的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何使用Flutter中的custom_single_select插件的示例代码。这个插件允许你创建一个单选选择界面。

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

dependencies:
  flutter:
    sdk: flutter
  custom_single_select: ^0.0.4  # 请检查最新版本号

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

接下来，你可以在你的Flutter应用中使用这个插件。以下是一个完整的示例代码，展示如何创建一个简单的单选选择界面：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String selectedValue;
  List<String> options = ['Option 1', 'Option 2', 'Option 3'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Single Select Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CustomSingleSelect<String>(
              title: 'Select an option',
              options: options,
              selectedValue: selectedValue,
              onValueChanged: (newValue) {
                setState(() {
                  selectedValue = newValue;
                });
              },
            ),
            SizedBox(height: 20),
            Text(
              'Selected Value: $selectedValue',
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

我们首先定义了一个包含选项的列表options。
使用CustomSingleSelect小部件来显示单选选择列表。title参数用于设置标题，options参数传递选项列表，selectedValue参数用于获取当前选中的值，onValueChanged是一个回调函数，当选中值改变时会调用这个函数，并更新selectedValue状态。
我们在CustomSingleSelect下面添加了一个Text小部件来显示当前选中的值。

这个示例展示了如何使用custom_single_select插件来创建一个简单的单选选择界面，并处理用户的选择。请确保你已经安装了最新版本的custom_single_select插件，并根据需要调整代码。