Flutter 自定义DropdownButton, 绘制阴影、锚点、Layout。

一个基于DropdownButton的增强Widget，支持锚点，绘制阴影。

平台	是否支持
Android	✔️
IOS	✔️
Web	✔️
Macos	✔️
Windows	✔️
Linux	✔️

Getting started :

Github
pub.dev

将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(
  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(
  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(
  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(
    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