Flutter Material 选择器

一个 Flutter 包，包含常用的 Material Design 选择器对话框。其中一些是新的，一些是用通用的对话框和访问函数包装现有的或内置的选择器。

它包括

  • 新选择器
    • showMaterialScrollPicker
      • 允许通过老虎机轮播选择字符串
    • showMaterialNumberPicker
      • 允许通过老虎机轮播选择数字
    • showMaterialRadioPicker
      • 允许从单选列表中选择一个
    • showMaterialCheckboxPicker
      • 允许从复选框列表中选择多个值
    • showMaterialSelectionPicker
      • 允许通过图标标签列表选择一个值
  • 便捷选择器
    • showMaterialDatePicker
      • 允许选择日期（使用核心日期选择器）
    • showMaterialTimePicker
      • 允许选择时间（使用核心时间选择器）
    • showMaterialColorPicker
      • 允许RGB选择颜色（使用flutter_colorpicker的ColorPicker）
    • showMaterialPalettePicker
      • 允许Material调色板选择颜色（使用flutter_colorpicker的MaterialPicker）
    • showMaterialSwatchPicker
      • 允许从色板中选择颜色（使用flutter_colorpicker的BlockPicker）
  • 对话框
    • showMaterialResponsiveDialog
      • 扩展了Dialog，使其能够响应屏幕方向的变化

所有辅助函数都实现了onChange处理程序，用于返回选定的选项。

用法示例

空对话框示例

虽然本身不是选择器，但showMaterialEmptyPicker辅助函数会显示选择器出现的通用Material Design对话框包装器。然而，直接使用它允许通过传递自定义Widget作为子元素来注入任何内容到内容区域。此代码展示了所有辅助函数的基本结构。

showMaterialResponsiveDialog(
    context: context,
    child: Center(
        child: Container(
            padding: EdgeInsets.all(30.0),
            child: Text("Any content here."),
            style: TextStyle(
                fontSize: 20.0,
                fontStyle: FontStyle.italic,
            ),
        ),
    ),
);

滚动选择器示例

var selectedUsState = "Connecticut";

List<String> usStates = <String>[
  'Alabama',
  'Alaska',
  'Arizona',
  'Arkansas',
  'California',
  'Colorado',
  'Connecticut',
  ...
];

showMaterialScrollPicker(
    context: context,
    title: "Pick Your City",
    items: usStates,
    selectedItem: selectedUsState,
    onChanged: (value) => setState(() => selectedUsState = value),
);

数字选择器示例

var age = 25;

showMaterialNumberPicker(
  context: context,
  title: "Pick Your Age",
  maxNumber: 100,
  minNumber: 14,
  selectedNumber: age,
  onChanged: (value) => setState(() => age = value),
);

复选框选择器示例

List<String> iceCreamToppings = <String>[
  'Hot Fudge',
  'Sprinkles',
  'Caramel',
  'Oreos',
  ...
];
List<String> selectedIceCreamToppings = <String>[
  'Hot Fudge',
  'Sprinkles',
];

showMaterialCheckboxPicker(
  context: context,
  title: "Pick Your Toppings",
  items: iceCreamToppings,
  selectedItems: selectedIceCreamToppings,
  onChanged: (value) => setState(() => selectedIceCreamToppings = value),
);

单选选择器示例

var selectedUsState = "Connecticut";

List<String> usStates = <String>[
  'Alabama',
  'Alaska',
  'Arizona',
  'Arkansas',
  'California',
  'Colorado',
  'Connecticut',
  ...
];

showMaterialRadioPicker(
  context: context,
  title: "Pick Your City",
  items: model.usStates,
  selectedItem: selectedUsState,
  onChanged: (value) => setState(() => selectedUsState = value),
);

选择选择器示例

String speed = 'Ludicrous';

List<String> speedOptions = <String>[
  'Light',
  'Ridiculous',
  'Ludicrous',
  'Plaid',
];

List<Icon> speedIcons = <Icon>[
  Icon(Icons.sort),
  Icon(Icons.clear_all),
  Icon(Icons.swap_calls),
  Icon(Icons.select_all),
];

showMaterialSelectionPicker(
  context: context,
  title: "Starship Speed",
  items: speedOptions,
  selectedItem: speed,
  icons: speedIcons,
  onChanged: (value) => setState(() => speed = value),
);

时间选择器示例

var time = TimeOfDay.now();

showMaterialTimePicker(
  context: context,
  selectedTime: time,
  onChanged: (value) => setState(() => time = value),
);

日期选择器示例

var date = DateTime.now();

showMaterialDatePicker(
  context: context,
  selectedDate: date,
  onChanged: (value) => setState(() => date = value),
);

颜色选择器示例

Color color = Colors.red;

showMaterialColorPicker(
  context: context,
  selectedColor: color,
  onChanged: (value) => setState(() => color = value),
);

调色板选择器示例

Color palette = Colors.green;

showMaterialPalettePicker(
  context: context,
  selectedColor: palette,
  onChanged: (value) => setState(() => palette = value),
);

色板选择器示例

Color swatch = Colors.blue;

showMaterialSwatchPicker(
  context: context,
  selectedColor: swatch,
  onChanged: (value) => setState(() => swatch = value),
);

主题化

强烈建议使用Flutter内置的主题样式和primarySwatch来自动样式化整个应用程序中的所有控件。

ThemeData(
  primarySwatch: Colors.indigo,
)

如果您想覆盖特定控件的颜色，可以按以下方式自定义主题：

var theme = ThemeData();
theme = theme.copyWith(
  primaryColor: Colors.green, // background color of the header area
  accentColor: Colors.black, // color of selected controls and button bar text
  dialogBackgroundColor: Colors.green[300], // background color of the entire dialog
  primaryTextTheme: theme.primaryTextTheme.copyWith(
    title: theme.primaryTextTheme.title.copyWith(
      color: Colors.lightGreen[50], // text color of the header area
    ),
  ),
  textTheme: theme.textTheme.copyWith(
    body1: theme.textTheme.body1.copyWith(
      color: Colors.green[900], // text color of dialog text
    ),
    button: theme.textTheme.button.copyWith(
      color: Colors.lightGreen[50], // text color of the action bar buttons
    ),
  ),
);

示例应用程序演示了全局切换亮色和暗色主题。

但是，如果您出于某种原因想更改单个对话框中的颜色，暴露了几个参数来实现此目的。

showMaterialResponsiveDialog(
    context: context,
    headerColor: Colors.green, // background color of the header area
    headerTextColor: Colors.white, // text fcolor of the header
    backgroundColor: Colors.lightGreen, // background color of the entire dialog
    buttonTextColor: Colors.red, // text color of the action bar buttons
    child: Text("Custom dialog colors"),
);

依赖项

此小部件集依赖于以下外部第三方组件：

更新日志

请参阅更新日志页面，了解最近的更改。

作者

GitHub

https://github.com/codegrue/flutter_material_pickers