一个基于DropdownButton的增强Widget，支持锚点，绘制阴影。
| 平台 | 是否支持 |
|---|---|
| Android | ✔️ |
| IOS | ✔️ |
| Web | ✔️ |
| Macos | ✔️ |
| Windows | ✔️ |
| Linux | ✔️ |
Getting started 🍺:
将package依赖添加到 pubspec.yaml：
dependencies:
dropdown_button_plus: 0.0.2
代码里使用
import 'package:dropdown_button_plus/dropdown_plus.dart' as plus;
基础功能:
基础用法和 Flutter SDK 的 DropdownButton一样。
plus.DropdownView<String>(
items: filters,
itemPadding: EdgeInsets.zero,
itemBuilder: (_, index, select) => ItemMenuString(
label: filters[index],
select: select,
showIndicator: false,
mainAxisAlignment: MainAxisAlignment.center,
),
selectedItemBuilder: (_, index, select) => ItemMenuHeader(
label: filters[index],
select: select,
),
hintBuilder: (context, focus) => HintWidgetBuilder(
'Dropdown',
focus: focus,
),
),
basic.jpg
增强功能 ：
1. 添加锚点:
plus.DropdownView<String>(
isDropdown: true,
items: filters,
itemPadding: EdgeInsets.zero,
itemBuilder: (_, index, select) => ItemMenuString(
label: filters[index],
select: select,
showIndicator: false,
mainAxisAlignment: MainAxisAlignment.center,
),
selectedItemBuilder: (_, index, select) => ItemMenuHeader(
label: filters[index],
select: select,
),
hintBuilder: (context, focus) => HintWidgetBuilder(
'Pinned',
focus: focus,
),
),
pinned.png
2. 添加锚点、绘制菜单内容外的阴影
plus.DropdownView<String>(
onChanged: widget.onType,
forceWidth: true,
isDropdown: true,
isOutsideShadow: true,
isPinnedSelected: false,
items: filters,
itemBuilder: (_, index, select) => ItemMenuString(
label: filters[index],
select: select,
),
selectedItemBuilder: (_, index, select) => ItemMenuHeader(
label: '综合排序',
select: select,
),
hintBuilder: (context, focus) => HintWidgetBuilder(
'综合排序',
focus: focus,
),
),
plus_basic.png
3. 自定义弹出Menu内容
SizedBox(
height: kMinInteractiveDimension,
child: DropdownView<String>(
forceWidth: true,
isDropdown: true,
isOutsideShadow: true,
isPinnedSelected: false,
itemPadding: EdgeInsets.zero,
itemHeight: MediaQuery.of(context).size.height / 2,
items: const [''],
itemBuilder: (_, index, select) => ItemMenuOption(
onChanged: widget.onOption,
),
selectedItemBuilder: (_, index, select) => ItemMenuHeader(
label: '对账单',
select: select,
),
hintBuilder: (context, focus) => HintWidgetBuilder(
'对账单',
focus: focus,
padding: const EdgeInsets.only(top: kMinInteractiveDimension / 8),
),
),
),
customize.jpg
