Flutter圆角下拉选择插件flutter_rounded_dropdown的使用

Flutter RoundedDropDown

一个带有自定义实现的圆角/下拉选择框的Flutter包。

🌟 开始使用

要开始使用此包，请在pubspec.yaml文件中添加flutter_rounded_dropdown依赖：

dependencies:
  flutter_rounded_dropdown: "<latest_release>"

📌 简单示例

以下是一个简单的示例代码，展示了如何使用flutter_rounded_dropdown插件：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Rounded DropDown Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 定义下拉选项列表
  final List<String> dropDownItems = ['India', 'America', 'China', 'Australia'];
  
  // 初始化默认值
  final String initialDropDownValue = 'India';
  
  // 存储选中的值
  String? selectedValue = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(18.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              // 使用RoundedDropDown组件
              RoundedDropDown(
                dropDownItems: dropDownItems,
                initialDropDownValue: initialDropDownValue,
                onValueChanged: (String value) {
                  // 更新选中的值
                  setState(() {
                    selectedValue = value;
                  });
                },
              ),
              // 显示选中的值
              Text(
                '$selectedValue',
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

📝 文档

以下是RoundedDropDown组件的基本用法：

RoundedDropDown(
  dropDownItems: ['India', 'America', 'China', 'Australia'],
  initialDropDownValue: 'India',
  onValueChanged: (String value) {
    print('selected value is $value');
  },
)