Flutter高级选择器组件插件flutter_awesome_select_clone的使用

本文档将详细介绍如何在Flutter项目中使用flutter_awesome_select_clone插件，该插件是基于SmartSelect插件开发的，提供了丰富的选择器组件功能。

关于

flutter_awesome_select_clone允许您轻松地将普通的表单选择或下拉菜单转换为动态页面、弹出对话框或滑动底部表单，支持多种输入方式如单选、多选、开关等。它受到了Framework7的启发。

特性

• 可高度自定义模态窗口的各个部分（头部、尾部、搜索栏、确认按钮、搜索栏切换）。
• 支持验证后再确认。
• 自动搜索和高亮搜索结果。
• 支持Chip样式的选择项。
• 支持网格布局的选择项。
• 支持水平或垂直滚动方向的选择列表。
• 简化的类名和枚举。
• 配置支持copyWith和merge方法。
• 使用StatefulWidget作为状态管理。
• 易于配置快捷方式。
• 软依赖其他包。

使用指南

单选示例

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SingleChoicePage(),
    );
  }
}

class SingleChoicePage extends StatefulWidget {
  @override
  _SingleChoicePageState createState() => _SingleChoicePageState();
}

class _SingleChoicePageState extends State<SingleChoicePage> {
  String value = 'flu';
  List<S2Choice<String>> options = [
    S2Choice<String>(value: 'ion', title: 'Ionic'),
    S2Choice<String>(value: 'flu', title: 'Flutter'),
    S2Choice<String>(value: 'rea', title: 'React Native'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Single Choice Example')),
      body: SmartSelect<String>.single(
        title: 'Frameworks',
        value: value,
        choiceItems: options,
        onChange: (state) => setState(() => value = state.value),
      ),
    );
  }
}

多选示例

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MultipleChoicePage(),
    );
  }
}

class MultipleChoicePage extends StatefulWidget {
  @override
  _MultipleChoicePageState createState() => _MultipleChoicePageState();
}

class _MultipleChoicePageState extends State<MultipleChoicePage> {
  List<int> value = [2];
  List<S2Choice<int>> frameworks = [
    S2Choice<int>(value: 1, title: 'Ionic'),
    S2Choice<int>(value: 2, title: 'Flutter'),
    S2Choice<int>(value: 3, title: 'React Native'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Multiple Choice Example')),
      body: SmartSelect<int>.multiple(
        title: 'Frameworks',
        value: value,
        choiceItems: frameworks,
        onChange: (state) => setState(() => value = state.value),
      ),
    );
  }
}

异步加载选项

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AsyncChoicePage(),
    );
  }
}

class AsyncChoicePage extends StatefulWidget {
  @override
  _AsyncChoicePageState createState() => _AsyncChoicePageState();
}

class _AsyncChoicePageState extends State<AsyncChoicePage> {
  String value;
  Future<List<S2Choice<String>>> fetchOptions() async {
    await Future.delayed(Duration(seconds: 2));
    return [
      S2Choice<String>(value: 'ion', title: 'Ionic'),
      S2Choice<String>(value: 'flu', title: 'Flutter'),
      S2Choice<String>(value: 'rea', title: 'React Native'),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Async Choice Example')),
      body: FutureBuilder<List<S2Choice<String>>>(
        future: fetchOptions(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return SmartSelect<String>.single(
              title: 'Frameworks',
              value: value,
              choiceItems: snapshot.data,
              onChange: (state) => setState(() => value = state.value),
            );
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}

通过上述代码示例，您可以快速上手flutter_awesome_select_clone插件，并根据实际需求进行扩展和定制。希望这些内容对您有所帮助！