Flutter选择组件插件select_widget的使用

如何使用它

这里是一些YBS Flutter应用的截图：

描述 1	描述 2

完整示例代码

以下是 select_widget 插件的使用示例。首先，确保你已经将 select_widget 添加到你的 pubspec.yaml 文件中。

dependencies:
  flutter:
    sdk: flutter
  select_widget: ^x.y.z # 请替换为最新版本号

接下来是完整的示例代码：

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

// 主应用类
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 主题模式的值监听器
  static final ValueNotifier<ThemeMode> themeNotifier = ValueNotifier(ThemeMode.system);

  @override
  Widget build(BuildContext context) {
    // 根据当前主题模式构建应用
    return ValueListenableBuilder<ThemeMode>(
      valueListenable: themeNotifier,
      builder: (_, ThemeMode currentMode, __) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          themeMode: currentMode,
          theme: appTheme, // 应用主题
          darkTheme: darkTheme, // 暗色主题
          home: DemoPage(), // 首页
        );
      },
    );
  }
}

// 显示示例页面
class DemoPage extends StatelessWidget {
  DemoPage({Key? key}) : super(key: key);
  
  // 控制国籍选项的状态
  bool nationality = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('选择组件示例'),
      ),
      body: SizedBox(
        width: MediaQuery.of(context).size.width,
        child: Padding(
          padding: const EdgeInsets.only(left: 16, right: 16),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              // 使用SelectWidget组件
              SelectWidget(
                onChanged: (v) {
                  // 当选项改变时触发的回调函数
                  print("Selected value: $v");
                },
                firstValue: "伊拉克",
                selected: nationality,
                secondValue: "非伊拉克",
                title: "国籍",
              ),
            ],
          ),
        ),
      ),
    );
  }
}

说明

1. 导入库：

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

2. 定义主应用类：

   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     const MyApp({super.key});
     static final ValueNotifier<ThemeMode> themeNotifier = ValueNotifier(ThemeMode.system);
   
     @override
     Widget build(BuildContext context) {
       return ValueListenableBuilder<ThemeMode>(
         valueListenable: themeNotifier,
         builder: (_, ThemeMode currentMode, __) {
           return MaterialApp(
             debugShowCheckedModeBanner: false,
             themeMode: currentMode,
             theme: appTheme,
             darkTheme: darkTheme,
             home: DemoPage(),
           );
         },
       );
     }
   }
   

3. 创建示例页面：

   class DemoPage extends StatelessWidget {
     DemoPage({Key? key}) : super(key: key);
     bool nationality = false;
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: const Text('选择组件示例'),
         ),
         body: SizedBox(
           width: MediaQuery.of(context).size.width,
           child: Padding(
             padding: const EdgeInsets.only(left: 16, right: 16),
             child: Column(
               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
               crossAxisAlignment: CrossAxisAlignment.center,
               children: [
                 SelectWidget(
                   onChanged: (v) {
                     print("Selected value: $v");
                   },
                   firstValue: "伊拉克",
                   selected: nationality,
                   secondValue: "非伊拉克",
                   title: "国籍",
                 ),
               ],
             ),
           ),
         ),
       );
     }
   }