Flutter选择器插件ej_selector的使用

EJ Selector 是一个类似于下拉按钮的 Flutter 小部件，但它打开的是对话框而不是下拉列表。你还可以自定义按钮和项目。

或者，你可以使用 showEJDialog 函数来显示一个对话框供用户选择项目。

使用方法

你可以自定义 EJSelectorButton 或使用其字符串工厂，后者定制性较低但更容易使用。

示例代码1

EJSelectorButton.string(
  items: List.generate(10, (index) => 'item $index'),
  hint: 'Choose',
  useValue: false,
  divider: Divider(),
  textStyle: TextStyle(fontSize: 18),
  suffix: Icon(Icons.arrow_drop_down),
)

示例代码2

final items = [
  ItemModel(1, 'First Item'),
  ItemModel(2, 'Second Item'),
  ItemModel(3, 'Third Item'),
  ItemModel(4, 'Forth Item'),
  ItemModel(5, 'Fifth Item'),
];

EJSelectorButton<ItemModel>(
  useValue: false,
  hint: Text(
    'Click to choose',
    style: TextStyle(fontSize: 16, color: Colors.black),
  ),
  buttonBuilder: (child, value) => Container(
    alignment: Alignment.center,
    height: 60,
    width: 150,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(4),
      color: Colors.white,
    ),
    child: value != null
        ? Text(
            value.name,
            style: TextStyle(fontSize: 16, color: Colors.black),
          )
        : child,
  ),
  selectedWidgetBuilder: (valueOfSelected) => Container(
    padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 32),
    child: Text(
      valueOfSelected.name,
      style: TextStyle(fontSize: 20, color: Colors.blue),
    ),
  ),
  items: items
      .map(
        (item) => EJSelectorItem(
          value: item,
          widget: Container(
            padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 32),
            child: Text(
              item.name,
              style: TextStyle(fontSize: 16),
            ),
          ),
        ),
      )
      .toList(),
)

class ItemModel {
  ItemModel(this.id, this.name);

  final int id;
  final String name;
}

使用函数

final s = await showEJDialog<int>(
  context: context,
  selected: selectedId,
  selectedWidgetBuilder: (selectedId) => Container(
    padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 32),
    child: Text(
      items.firstWhere((item) => item.id == selectedId).name,
      style: TextStyle(fontSize: 20, color: Colors.blue),
    ),
  ),
  items: items
      .map(
        (item) => EJSelectorItem(
          value: item.id,
          widget: Container(
            padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 32),
            child: Text(
              item.name,
              style: TextStyle(fontSize: 16),
            ),
          ),
        ),
      )
      .toList(),
);
if (s != null) {
  setState(() {
    selectedId = s.value;
  });
}

完整示例代码

import 'package:ej_selector/ej_selector.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Selector Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        shadowColor: Colors.grey,
        dialogTheme: DialogTheme(
          elevation: 2,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8),
          ),
        ),
        brightness: Brightness.dark,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var selectedIndex = 0;

  /// You can use [EJSelector] in tree ways:
  ///
  /// 1. use [EJSelectorButton.string].
  /// 2. use [EJSelectorButton] which you can customize.
  /// 3. use [showEJDialog] function.

  [@override](/user/override)
  Widget build(BuildContext context) {
    final childList = [
      StringSelector(),
      StringSelectorUsingValue(),
      CustomSelector(),
      CustomSelectorUsingValue(),
      SelectorUsingFunction(),
    ];
    return DefaultTabController(
      length: 5,
      initialIndex: 0,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Selector Example'),
          bottom: TabBar(
            isScrollable: true,
            labelPadding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
            tabs: [
              Text(
                'String',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 16),
              ),
              Text(
                'String using value',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 16),
              ),
              Text(
                'Custom',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 16),
              ),
              Text(
                'Custom using value',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 16),
              ),
              Text(
                'Using function',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 16),
              ),
            ],
            onTap: (index) {
              selectedIndex = index;
              setState(() {});
            },
          ),
        ),
        body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                childList[selectedIndex],
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class StringSelector extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return EJSelectorButton.string(
      items: List.generate(10, (index) => 'item $index'),
      hint: 'Choose',
      useValue: false,
      divider: Divider(),
      textStyle: TextStyle(fontSize: 18),
      suffix: Icon(Icons.arrow_drop_down),
    );
  }
}

class StringSelectorUsingValue extends StatefulWidget {
  [@override](/user/override)
  _StringSelectorUsingValueState createState() => _StringSelectorUsingValueState();
}

class _StringSelectorUsingValueState extends State<StringSelectorUsingValue> {
  String? value;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return EJSelectorButton.string(
      items: List.generate(10, (index) => 'item $index'),
      value: value,
      onChange: (newValue) {
        value = newValue;
        setState(() {});
      },
      hint: 'Choose',
      divider: Divider(),
      textStyle: TextStyle(fontSize: 18),
      suffix: Icon(Icons.arrow_drop_down),
    );
  }
}

class CustomSelector extends StatelessWidget {
  final items = [
    ItemModel(1, 'First Item'),
    ItemModel(2, 'Second Item'),
    ItemModel(3, 'Third Item'),
    ItemModel(4, 'Forth Item'),
    ItemModel(5, 'Fifth Item'),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return EJSelectorButton<ItemModel>(
      useValue: false,
      hint: Text(
        'Click to choose',
        style: TextStyle(fontSize: 16, color: Colors.black),
      ),
      buttonBuilder: (child, value) => Container(
        alignment: Alignment.center,
        height: 60,
        width: 150,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(4),
          color: Colors.white,
        ),
        child: value != null
            ? Text(
                value.name,
                style: TextStyle(fontSize: 16, color: Colors.black),
              )
            : child,
      ),
      selectedWidgetBuilder: (valueOfSelected) => Container(
        padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 32),
        child: Text(
          valueOfSelected.name,
          style: TextStyle(fontSize: 20, color: Colors.blue),
        ),
      ),
      items: items
          .map(
            (item) => EJSelectorItem(
              value: item,
              widget: Container(
                padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 32),
                child: Text(
                  item.name,
                  style: TextStyle(fontSize: 16),
                ),
              ),
            ),
          )
          .toList(),
    );
  }
}

class CustomSelectorUsingValue extends StatefulWidget {
  [@override](/user/override)
  _CustomSelectorUsingValueState createState() => _CustomSelectorUsingValueState();
}

class _CustomSelectorUsingValueState extends State<CustomSelectorUsingValue> {
  final items = [
    ItemModel(1, 'First Item'),
    ItemModel(2, 'Second Item'),
    ItemModel(3, 'Third Item'),
    ItemModel(4, 'Forth Item'),
    ItemModel(5, 'Fifth Item'),
  ];
  int? selectedId;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return EJSelectorButton<int>(
      value: selectedId,
      onChange: (id) {
        selectedId = id;
        setState(() {});
      },
      hint: Text(
        'Click to choose',
        style: TextStyle(fontSize: 16, color: Colors.black),
      ),
      buttonBuilder: (child, id) => Container(
        alignment: Alignment.center,
        height: 60,
        width: 150,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(4),
          color: Colors.white,
        ),
        child: id != null
            ? Text(
                items.firstWhere((item) => item.id == id).name,
                style: TextStyle(fontSize: 16, color: Colors.black),
              )
            : child,
      ),
      selectedWidgetBuilder: (selectedId) => Container(
        padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 32),
        child: Text(
          items.firstWhere((item) => item.id == selectedId).name,
          style: TextStyle(fontSize: 20, color: Colors.blue),
        ),
      ),
      items: items
          .map(
            (item) => EJSelectorItem(
              value: item.id,
              widget: Container(
                padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 32),
                child: Text(
                  item.name,
                  style: TextStyle(fontSize: 16),
                ),
              ),
            ),
          )
          .toList(),
    );
  }
}

class SelectorUsingFunction extends StatefulWidget {
  [@override](/user/override)
  _SelectorUsingFunctionState createState() => _SelectorUsingFunctionState();
}

class _SelectorUsingFunctionState extends State<SelectorUsingFunction> {
  final items = [
    ItemModel(1, 'First Item'),
    ItemModel(2, 'Second Item'),
    ItemModel(3, 'Third Item'),
    ItemModel(4, 'Forth Item'),
    ItemModel(5, 'Fifth Item'),
  ];
  int? selectedId;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
          backgroundColor: Colors.white,
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24)),
      onPressed: () async {
        final s = await showEJDialog<int>(
          context: context,
          selected: selectedId,
          selectedWidgetBuilder: (selectedId) => Container(
            padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 32),
            child: Text(
              items.firstWhere((item) => item.id == selectedId).name,
              style: TextStyle(fontSize: 20, color: Colors.blue),
            ),
          ),
          items: items
              .map(
                (item) => EJSelectorItem(
                  value: item.id,
                  widget: Container(
                    padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 32),
                    child: Text(
                      item.name,
                      style: TextStyle(fontSize: 16),
                    ),
                  ),
                ),
              )
              .toList(),
        );
        if (s != null) {
          setState(() {
            selectedId = s.value;
          });
        }
      },
      child: Text(
        selectedId != null
            ? items.firstWhere((element) => element.id == selectedId).name
            : 'Click to choose',
        style: TextStyle(color: Colors.black),
      ),
    );
  }
}

class ItemModel {
  ItemModel(this.id, this.name);

  final int id;
  final String name;
}

更多关于Flutter选择器插件ej_selector的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

yibo5220 1楼

更多关于Flutter选择器插件ej_selector的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用ej_selector选择器插件的一个代码示例。ej_selector是一个流行的Flutter插件，用于实现各种选择器功能，比如日期选择器、时间选择器、颜色选择器等。不过，需要注意的是，ej_selector并不是Flutter官方或广泛认可的插件名，这里我假设你指的是某个第三方选择器插件或者类似的自定义组件。如果具体插件名有误，请根据实际情况调整。

假设我们有一个名为ej_selector的Flutter插件，它提供了一个日期选择器功能。以下是如何在Flutter项目中使用它的步骤：

添加依赖：首先，在你的pubspec.yaml文件中添加ej_selector插件的依赖（注意：这里假设插件名正确，实际使用时请替换为正确的插件名）。
```
dependencies:
  flutter:
    sdk: flutter
  ej_selector: ^x.y.z  # 替换为实际的版本号
```
然后运行flutter pub get来安装依赖。
导入插件：在你的Dart文件中导入插件。
```
import 'package:ej_selector/ej_selector.dart';
```

使用选择器：下面是一个简单的例子，展示如何在你的Flutter应用中使用日期选择器。

import 'package:flutter/material.dart';
import 'package:ej_selector/ej_selector.dart'; // 假设这是你的选择器插件

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Date Selector Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DateSelectorDemo(),
    );
  }
}

class DateSelectorDemo extends StatefulWidget {
  @override
  _DateSelectorDemoState createState() => _DateSelectorDemoState();
}

class _DateSelectorDemoState extends State<DateSelectorDemo> {
  DateTime? selectedDate;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Date Selector Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              selectedDate == null
                  ? 'No date selected'
                  : 'Selected Date: ${selectedDate!.toLocal()}',
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                DateTime? result = await showDatePicker(
                  context: context,
                  initialDate: selectedDate ?? DateTime.now(),
                  firstDate: DateTime(2000),
                  lastDate: DateTime(2101),
                );
                if (result != null && result != selectedDate) {
                  setState(() {
                    selectedDate = result;
                  });
                }
              },
              child: Text('Select Date'),
            ),
          ],
        ),
      ),
    );
  }
}

注意：上面的代码示例实际上使用的是Flutter自带的showDatePicker函数，而不是假设的ej_selector插件。因为ej_selector可能是一个假想的插件名，且Flutter社区中通常使用标准的日期选择器函数。如果ej_selector是一个具体的第三方插件，并且它提供了自己的选择器API，你需要参考该插件的文档来调整代码。

如果你有一个具体的ej_selector插件文档或API参考，你应该能够找到类似showDatePicker的方法，并使用它来显示选择器。通常，这样的插件会提供一个函数或widget，你可以调用它来显示选择器，并处理用户的选择结果。

如果你有更具体的ej_selector插件信息或API文档，请提供，以便给出更准确的代码示例。