Flutter自定义下拉菜单插件flutter_custom_drop_down_widget的使用
Flutter 自定义下拉菜单插件 flutter_custom_drop_down_widget 的使用
概述
使用 flutter_custom_drop_down_widget 可以轻松创建自定义下拉菜单。
引入依赖
在你的 pubspec.yaml 文件中添加以下依赖：
dependencies:
flutter_custom_drop_down_widget: 1.0.1
预览
使用与示例
以下是一个完整的示例代码，展示了如何使用 flutter_custom_drop_down_widget 创建自定义下拉菜单：
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_custom_drop_down_widget/flutter_custom_drop_down_widget.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
late OverlayPortalController controller1;
late OverlayPortalController controller2;
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('CustomDropDown'),
centerTitle: true,
),
body: SingleChildScrollView(
child: Center(
child: Column(
children: [
const SizedBox(height: kToolbarHeight,),
/// 下拉按钮
Text('dropdown button', style: Theme.of(context).textTheme.titleLarge,),
CustomDropDown(
getController: (controller) {
controller2 = controller;
},
child: Container(
width: MediaQuery.of(context).size.width * .8,
padding: const EdgeInsets.symmetric(
horizontal: 16.0,
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16.0),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(.23),
blurRadius: .4
)
]
),
child: Row(
children: [
CupertinoCheckbox(value: false, onChanged: (it){}),
const Text("Open"),
],
),
),
dropDownBuilder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width * .8,
height: MediaQuery.of(context).size.height / 100 * 30,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.0)),
child: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return Row(
children: [
CupertinoCheckbox(value: true, onChanged: (it){}),
const Text("Item Name")
],
);
},
),
);
},
),
const SizedBox(height: kToolbarHeight,),
/// 下拉按钮
Text('dropdown button', style: Theme.of(context).textTheme.titleLarge,),
CustomDropDown(
getController: (controller) {
controller1 = controller;
},
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 16.0, vertical: 10),
decoration: BoxDecoration(
color: Colors.blueAccent,
borderRadius: BorderRadius.circular(12.0)),
child: const Text("Open"),
),
dropDownBuilder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width * .2,
height: MediaQuery.of(context).size.height / 100 * 30,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.0)),
child: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return ElevatedButton(
onPressed: () {
controller1.toggle();
},
child: const Text("Open"),
);
},
),
);
},
),
const SizedBox(height: kToolbarHeight * 2.8,),
Text('dropdown button', style: Theme.of(context).textTheme.titleLarge,),
CustomDropDown(
targetAnchor: Alignment.bottomLeft,
alignment: Alignment.topCenter,
getController: (controller) {
controller2 = controller;
},
child: Container(
width: MediaQuery.of(context).size.width * .8,
padding: const EdgeInsets.symmetric(
horizontal: 16.0,
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16.0),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(.23),
blurRadius: .4
)
]
),
child: Row(
children: [
CupertinoCheckbox(value: false, onChanged: (it){}),
const Text("Open"),
],
),
),
dropDownBuilder: (BuildContext context) {
return Container(
margin: const EdgeInsets.only(top: 2),
width: MediaQuery.of(context).size.width * .4,
height: MediaQuery.of(context).size.height / 100 * 30,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.0)),
child: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return GestureDetector(
onTap: controller2.toggle,
child: Row(
children: [
CupertinoCheckbox(value: true, onChanged: (it){}),
const Text("Item Name")
],
),
);
},
),
);
},
),
],
),
),
),
),
);
}
}
更多关于Flutter自定义下拉菜单插件flutter_custom_drop_down_widget的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter自定义下拉菜单插件flutter_custom_drop_down_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
flutter_custom_drop_down_widget 是一个自定义的下拉菜单插件，允许开发者根据自己的需求定制下拉菜单的样式和行为。以下是如何使用该插件的基本步骤：
1. 添加依赖
首先，你需要在 pubspec.yaml 文件中添加 flutter_custom_drop_down_widget 插件的依赖：
dependencies:
flutter:
sdk: flutter
flutter_custom_drop_down_widget: ^1.0.0 # 请使用最新版本
然后运行 flutter pub get 来获取依赖。
2. 导入插件
在你的 Dart 文件中导入插件：
import 'package:flutter_custom_drop_down_widget/flutter_custom_drop_down_widget.dart';
3. 使用 CustomDropDownWidget
CustomDropDownWidget 是插件提供的主要组件。你可以通过传递参数来定制下拉菜单的外观和行为。
以下是一个简单的示例：
import 'package:flutter/material.dart';
import 'package:flutter_custom_drop_down_widget/flutter_custom_drop_down_widget.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Custom DropDown Example'),
),
body: Center(
child: CustomDropDownWidget(
items: const ['Option 1', 'Option 2', 'Option 3', 'Option 4'],
hint: 'Select an option',
onChanged: (String? value) {
print('Selected: $value');
},
),
),
),
);
}
}
4. 参数说明
CustomDropDownWidget 提供了多个参数来定制下拉菜单的行为和外观：
items: 一个包含所有下拉选项的列表。hint: 下拉菜单的提示文本，通常在没有选择任何选项时显示。onChanged: 当用户选择一个选项时会触发的回调函数。value: 当前选中的值。icon: 自定义下拉箭头图标。itemBuilder: 自定义每个下拉选项的构建方式。dropdownColor: 下拉菜单的背景颜色。elevation: 下拉菜单的阴影高度。padding: 下拉菜单的内边距。borderRadius: 下拉菜单的边框半径。textStyle: 下拉菜单中文本的样式。
5. 自定义示例
以下是一个更加自定义的示例，展示如何使用 itemBuilder 和 icon 参数：
CustomDropDownWidget(
items: const ['Option 1', 'Option 2', 'Option 3', 'Option 4'],
hint: 'Select an option',
onChanged: (String? value) {
print('Selected: $value');
},
icon: Icon(Icons.arrow_drop_down, color: Colors.blue),
itemBuilder: (BuildContext context, String item) {
return ListTile(
title: Text(item, style: TextStyle(color: Colors.red)),
trailing: Icon(Icons.check, color: Colors.green),
);
},
dropdownColor: Colors.yellow[100],
borderRadius: BorderRadius.circular(10),
);
6. 处理选中的值
你可以通过 onChanged 回调来处理用户选择的选项。例如，你可以在回调中更新状态或执行其他操作：
String? selectedValue;
CustomDropDownWidget(
items: const ['Option 1', 'Option 2', 'Option 3', 'Option 4'],
hint: 'Select an option',
value: selectedValue,
onChanged: (String? value) {
setState(() {
selectedValue = value;
});
},
);