Flutter下拉选择插件simple_dropdownbuttonfield_co的使用

Flutter下拉选择插件simple_dropdownbuttonfield_co的使用

本库允许快速实现两个包含哥伦比亚部门及其城市的下拉选择控件。

功能

此库使用了两个小部件，它们通过stringStateValue返回字符串和通过codeStateValue返回代码，以获取所选哥伦比亚部门和城市的名称。

视频演示

开始使用

重要提示！ 该包已针对Provider (Riverpod) 进行优化。

在 pubspec.yaml 中导入包：

dependencies:
  flutter_riverpod: ^2.5.1

在 main.dart 文件中，将您的 MainApp() 包裹在一个 ProviderScope 中：

void main() {
  runApp(
    const ProviderScope(
      child: MainApp(),
    ),
  );
}

使用示例

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 simple_dropdownbuttonfield_co 插件：

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:simple_dropdownbuttonfield_co/simple_dropdownbuttonfield_co.dart';

// 主应用程序类
void main() {
  runApp(const ProviderScope(child: MyApp()));
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// 主页面类
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  // 定义变量来存储选择的部门和城市
  String? departamento;
  String? municipio;

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 设置状态时打印当前选择的部门
    setState(() {
      debugPrint('声明: $departamento');
    });

    // 构建页面布局
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 下拉选择部门
            DropDownButtonFormFieldStateCo(
              style: TextStyle(color: Colors.blue),
              inputDecoration: inputDecoration(label: 'Departamento'),
              stringStateValue: (value) => departamento = value!,
              codeStateValue: (value) => departamento = value!,
            ),
            // 下拉选择城市
            DropDownButtonFormFieldCityCo(
              inputDecoration: inputDecoration(label: 'Municipio'),
              stringCityValue: (value) => municipio = value!,
              codeCityValue: (value) => municipio = value!,
            ),
          ],
        ),
      ),
    );
  }

  // 创建输入装饰器
  InputDecoration inputDecoration({required String label}) {
    return InputDecoration(
      labelText: label,
      border: OutlineInputBorder(),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用simple_dropdownbuttonfield_co插件的一个示例代码案例。这个插件提供了一个简化的下拉选择按钮（DropdownButton），使其更易于在Flutter应用中使用。

首先，确保你已经在pubspec.yaml文件中添加了该插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  simple_dropdownbuttonfield_co: ^最新版本号  # 请替换为当前最新版本号

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

以下是一个使用simple_dropdownbuttonfield_co插件的完整示例：

import 'package:flutter/material.dart';
import 'package:simple_dropdownbuttonfield_co/simple_dropdownbuttonfield_co.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;

  final List<String> dropdownValues = ['Option 1', 'Option 2', 'Option 3'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple DropdownButtonField Example'),
      ),
      body: Center(
        child: SimpleDropdownButtonField<String>(
          decoration: InputDecoration(
            labelText: 'Select an option',
            border: OutlineInputBorder(),
          ),
          hint: Text('Select...'),
          value: selectedValue,
          onChanged: (newValue) {
            setState(() {
              selectedValue = newValue;
            });
          },
          items: dropdownValues.map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Handle button press
          print('Selected value: $selectedValue');
        },
        tooltip: 'Show selected value',
        child: Icon(Icons.check),
      ),
    );
  }
}

代码解释：

  1. 依赖引入：

    • 在pubspec.yaml文件中添加simple_dropdownbuttonfield_co插件的依赖。

  2. 主应用：

    • MyApp类作为主应用入口，定义了应用的主题和主页。

  3. 主页：

    • MyHomePage类是一个有状态的小部件，它包含一个SimpleDropdownButtonField。

  4. 下拉选项：

    • dropdownValues列表定义了下拉选项的值。

  5. SimpleDropdownButtonField：

    • decoration：定义了下拉按钮的装饰，包括标签文本和边框。
    • hint：显示在选择前的提示文本。
    • value：当前选中的值，绑定到selectedValue变量。
    • onChanged：当下拉选项改变时的回调，更新selectedValue变量的值。
    • items：下拉选项的列表，通过map方法将dropdownValues列表转换为DropdownMenuItem列表。

  6. FloatingActionButton：

    • 一个浮动按钮，用于演示选中的值。按下按钮时，会在控制台打印当前选中的值。

这个示例展示了如何使用simple_dropdownbuttonfield_co插件来创建一个带有下拉选项的表单字段，并处理用户的选择。希望这对你有所帮助！

回到顶部