Flutter下拉选择插件magic_dropdown的使用
Flutter下拉选择插件magic_dropdown的使用
magic_dropdown 是一个高度可定制的 Flutter 下拉选择组件。它支持单选和多选模式，并且可以自定义其外观和行为。以下是一个完整的示例，展示了如何在 Flutter 应用程序中使用 magic_dropdown。
使用 magic_dropdown 的步骤
1. 添加依赖
首先，在你的 pubspec.yaml 文件中添加 magic_dropdown 依赖：
dependencies:
magic_dropdown: ^版本号
然后运行 flutter pub get 来安装该依赖。
2. 导入必要的包
在你的 Dart 文件中导入 magic_dropdown 相关的包：
import 'package:magic_dropdown/magic_dropdown.dart';
import 'package:magic_dropdown/dropdown_mode.dart';
3. 创建应用
接下来，创建一个简单的 Flutter 应用程序，并在其中使用 magic_dropdown。
import 'package:flutter/material.dart';
import 'package:magic_dropdown/dropdown_mode.dart';
import 'package:magic_dropdown/magic_dropdown.dart';
import 'package:magic_dropdown/widgets/magic_dropdown_multi_select.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: 'Magic Dropdown Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Magic Dropdown Demo Home Page'),
);
}
}
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> {
String? _selection;
String? _selection2 = "Two";
List<String> _selection3 = ["Three", "Four"];
List<String> _selection4 = ["Three", "Four"];
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: SingleChildScrollView(
child: Column(
children: [
SizedBox(
height: 100,
width: double.infinity,
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.grey.shade200),
),
),
Center(
child: MagicDropdown(
filterTitle: "Single Selectable List",
dropdownMode: DropdownMode.single,
selectableValues: const ["One", "Two", "Three", "Four", "Five"],
selectedValues: _selection == null ? [] : [_selection!],
onSingleValueSelected: (String? value) {
setState(() {
_selection = value;
});
},
),
),
SizedBox(
height: 100,
width: double.infinity,
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.grey.shade200),
),
),
Center(
child: MagicDropdown(
filterTitle: "Single Selectable List With Preselection",
dropdownMode: DropdownMode.single,
selectableValues: const ["One", "Two", "Three", "Four", "Five"],
selectedValues: _selection2 != null ? [_selection2!] : [],
onSingleValueSelected: (String? value) {
setState(() {
_selection2 = value;
});
},
),
),
SizedBox(
height: 100,
width: double.infinity,
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.grey.shade200),
),
),
Center(
child: MagicDropdown(
filterTitle: "Multi Selectable List With Preselection",
dropdownMode: DropdownMode.multi,
selectableValues: const ["One", "Two", "Three", "Four", "Five"],
selectedValues: _selection3,
onMultiValueSelected: (List<String>? value) {
setState(() {
_selection3 = value!;
});
},
),
),
SizedBox(
height: 100,
width: double.infinity,
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.grey.shade200),
),
),
Center(
child: MagicDropdown(
filterTitle: "Multi Selectable List With capped height",
dropdownMode: DropdownMode.multi,
height: 200,
selectableValues: const ["One", "Two", "Three", "Four", "Five"],
selectedValues: _selection3,
onMultiValueSelected: (List<String>? value) {
setState(() {
_selection3 = value!;
});
},
),
),
SizedBox(
height: 100,
width: double.infinity,
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.grey.shade200),
),
),
Center(
child: MagicDropdown(
filterTitle: "Multi Selectable List As Custom Child",
dropdownMode: DropdownMode.customChild,
child: Column(
children: [
const Card(child: Text('Multi select some of these:')),
MagicDropdownMultiSelect(
onChanged: (selection) {
setState(() {
_selection4 = selection;
});
},
selected: _selection4,
selectableValues: const [
"One",
"Two",
"Three",
"Four",
"Five"
],
),
],
),
),
),
SizedBox(
height: 100,
width: double.infinity,
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.grey.shade200),
),
),
Center(
child: MagicDropdown(
filterTitle: "Custom child",
child: SizedBox(
width: 120,
height: 100,
child: Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10),
),
child: const Center(
child: Text(
"Custom child",
style: TextStyle(color: Colors.white),
),
),
),
),
),
),
SizedBox(
height: 100,
width: double.infinity,
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.grey.shade200),
),
),
Center(
child: MagicDropdown(
filterTitle: "Custom child and custom button",
customButton: Card(
child: Container(
decoration: const BoxDecoration(color: Colors.amber),
child: const Padding(
padding: EdgeInsets.all(12.0),
child: Text("Custom child and custom button"),
),
),
),
child: SizedBox(
width: 120,
height: 100,
child: Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10),
),
child: const Center(
child: Text(
"Custom child",
style: TextStyle(color: Colors.white),
),
),
),
),
),
),
SizedBox(
height: 100,
width: double.infinity,
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.grey.shade200),
),
),
Center(
child: MagicDropdown(
filterTitle: "Custom child with custom width",
customWidth: 400,
child: SizedBox(
width: 200,
height: 200,
child: Container(
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
),
),
),
),
SizedBox(
height: 100,
width: double.infinity,
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.grey.shade200),
),
),
Center(
child: MagicDropdown(
filterTitle: "Custom child with different animation duration",
animationDuration: const Duration(seconds: 2),
child: SizedBox(
width: 200,
height: 200,
child: Container(
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
),
),
),
),
SizedBox(
height: 100,
width: double.infinity,
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.grey.shade200),
),
),
],
),
),
),
);
}
}
更多关于Flutter下拉选择插件magic_dropdown的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter下拉选择插件magic_dropdown的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
magic_dropdown 是一个 Flutter 插件，提供了自定义的下拉选择组件。它允许你轻松地创建具有自定义样式和功能的下拉菜单。以下是如何在 Flutter 项目中使用 magic_dropdown 的基本步骤：
1. 添加依赖
首先，你需要在 pubspec.yaml 文件中添加 magic_dropdown 依赖：
dependencies:
flutter:
sdk: flutter
magic_dropdown: ^1.0.0 # 请检查最新版本
然后运行 flutter pub get 来安装依赖。
2. 导入包
在你的 Dart 文件中导入 magic_dropdown：
import 'package:magic_dropdown/magic_dropdown.dart';
3. 使用 MagicDropdown
MagicDropdown 提供了多种自定义选项，你可以根据需要配置它。
基本用法
class MyHomePage extends StatefulWidget {
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String selectedValue;
List<String> items = [
'Option 1',
'Option 2',
'Option 3',
'Option 4',
];
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Magic Dropdown Example'),
),
body: Center(
child: MagicDropdown(
items: items,
onChanged: (String value) {
setState(() {
selectedValue = value;
});
},
value: selectedValue,
hint: 'Select an option',
),
),
);
}
}
自定义样式
你可以通过传递不同的参数来自定义 MagicDropdown 的外观和行为。例如：
MagicDropdown(
items: items,
onChanged: (String value) {
setState(() {
selectedValue = value;
});
},
value: selectedValue,
hint: 'Select an option',
icon: Icon(Icons.arrow_drop_down),
dropdownColor: Colors.white,
elevation: 8,
itemHeight: 50,
style: TextStyle(color: Colors.black, fontSize: 16),
selectedItemStyle: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
hintStyle: TextStyle(color: Colors.grey),
underline: Container(
height: 2,
color: Colors.blue,
),
)
4. 处理选择事件
onChanged 回调函数会在用户选择一个选项时触发。你可以在这个回调中更新状态或执行其他操作。
5. 完整示例
import 'package:flutter/material.dart';
import 'package:magic_dropdown/magic_dropdown.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Magic Dropdown Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String selectedValue;
List<String> items = [
'Option 1',
'Option 2',
'Option 3',
'Option 4',
];
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Magic Dropdown Example'),
),
body: Center(
child: MagicDropdown(
items: items,
onChanged: (String value) {
setState(() {
selectedValue = value;
});
},
value: selectedValue,
hint: 'Select an option',
icon: Icon(Icons.arrow_drop_down),
dropdownColor: Colors.white,
elevation: 8,
itemHeight: 50,
style: TextStyle(color: Colors.black, fontSize: 16),
selectedItemStyle: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
hintStyle: TextStyle(color: Colors.grey),
underline: Container(
height: 2,
color: Colors.blue,
),
),
),
);
}
}