Flutter芯片输入表单插件form_builder_chips_input的使用

发布于 1周前 作者 caililin 来自 Flutter

Flutter芯片输入表单插件form_builder_chips_input的使用

在本教程中，我们将展示如何在Flutter应用中使用form_builder_chips_input插件。这个插件允许用户在一个输入框中添加多个选择项（称为“芯片”），从而为用户提供一个更直观的输入方式。

项目依赖

首先，在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_form_builder: ^7.0.0
  form_builder_chips_input: ^5.0.0

然后运行flutter pub get来安装这些依赖。

示例代码

以下是完整的示例代码，展示了如何使用form_builder_chips_input插件创建一个带有芯片输入字段的表单。

import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:form_builder_chips_input/form_builder_chips_input.dart'; // 注意这里使用的是form_builder_chips_input
import 'package:form_builder_validators/form_builder_validators.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        FormBuilderLocalizations.delegate
      ],
      supportedLocales: [
        const Locale('en', ''), // English, no country code
      ],
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormBuilderState>();
  final mockResults = <Person>[
    Person('John Doe', 'jdoe@flutter.io',
        'https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX4057996.jpg'),
    Person('Paul', 'paul@google.com',
        'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'),
    Person('Fred', 'fred@google.com',
        'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'),
    Person('Brian', 'brian@flutter.io',
        'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'),
    Person('John', 'john@flutter.io',
        'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'),
    Person('Thomas', 'thomas@flutter.io',
        'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'),
    Person('Nelly', 'nelly@flutter.io',
        'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'),
    Person('Marie', 'marie@flutter.io',
        'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'),
    Person('Charlie', 'charlie@flutter.io',
        'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'),
    Person('Diana', 'diana@flutter.io',
        'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'),
    Person('Ernie', 'ernie@flutter.io',
        'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'),
    Person('Gina', 'fred@flutter.io',
        'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Hello world"),
      ),
      body: Center(
        child: FormBuilder(
          key: _formKey,
          child: Column(
            children: <Widget>[
              FormBuilderChipsInput<Person>(
                name: "hello",
                decoration: const InputDecoration(hintText: "hello world"),
                chipBuilder: (context, state, Person profile) {
                  return InputChip(
                    key: ObjectKey(profile),
                    label: Text(profile.name),
                    avatar: CircleAvatar(
                      backgroundImage: NetworkImage(profile.imageUrl),
                    ),
                    onDeleted: () => state.deleteChip(profile),
                    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  );
                },
                suggestionBuilder: (context, Person profile) {
                  return ListTile(
                    key: ObjectKey(profile),
                    leading: CircleAvatar(
                      backgroundImage: NetworkImage(profile.imageUrl),
                    ),
                    title: Text(profile.name),
                    subtitle: Text(profile.email),
                  );
                },
                findSuggestions: (String query) {
                  if (query.isNotEmpty) {
                    var lowercaseQuery = query.toLowerCase();
                    final results = mockResults.where((profile) {
                      return profile.name
                          .toLowerCase()
                          .contains(query.toLowerCase());
                    }).toList(growable: false)
                      ..sort((a, b) => a.name
                          .toLowerCase()
                          .indexOf(lowercaseQuery)
                          .compareTo(
                          b.name.toLowerCase().indexOf(lowercaseQuery)));
                    return results;
                  }
                  return mockResults;
                }
              )
            ],
          ),
        ),
      ),
    );
  }
}

class Person {
  final String name;
  final String email;
  final String imageUrl;

  Person(this.name, this.email, this.imageUrl);
}

代码解释

  1. 导入必要的库：

    import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:form_builder_chips_input/form_builder_chips_input.dart'; // 引入form_builder_chips_input
import 'package:form_builder_validators/form_builder_validators.dart';

  2. 定义Person类：

    class Person {
  final String name;
  final String email;
  final String imageUrl;

  Person(this.name, this.email, this.imageUrl);
}

  3. 定义MyApp类：

    class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        FormBuilderLocalizations.delegate
      ],
      supportedLocales: [
        const Locale('en', ''),
      ],
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

  4. 定义MyHomePage类：

    class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

  5. 定义_MyHomePageState类：

    class _MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormBuilderState>();
  final mockResults = <Person>[
    // 初始化人员列表
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Hello world"),
      ),
      body: Center(
        child: FormBuilder(
          key: _formKey,
          child: Column(
            children: <Widget>[
              FormBuilderChipsInput<Person>(
                name: "hello",
                decoration: const InputDecoration(hintText: "hello world"),
                chipBuilder: (context, state, Person profile) {
                  return InputChip(
                    key: ObjectKey(profile),
                    label: Text(profile.name),
                    avatar: CircleAvatar(
                      backgroundImage: NetworkImage(profile.imageUrl),
                    ),
                    onDeleted: () => state.deleteChip(profile),
                    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  );
                },
                suggestionBuilder: (context, Person profile) {
                  return ListTile(
                    key: ObjectKey(profile),
                    leading: CircleAvatar(
                      backgroundImage: NetworkImage(profile.imageUrl),
                    ),
                    title: Text(profile.name),
                    subtitle: Text(profile.email),
                  );
                },
                findSuggestions: (String query) {
                  if (query.isNotEmpty) {
                    var lowercaseQuery = query.toLowerCase();
                    final results = mockResults.where((profile) {
                      return profile.name
                          .toLowerCase()
                          .contains(query.toLowerCase());
                    }).toList(growable: false)
                      ..sort((a, b) => a.name
                          .toLowerCase()
                          .indexOf(lowercaseQuery)
                          .compareTo(
                          b.name.toLowerCase().indexOf(lowercaseQuery)));
                    return results;
                  }
                  return mockResults;
                }
              )
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter芯片输入表单插件form_builder_chips_input的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter芯片输入表单插件form_builder_chips_input的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter应用中使用form_builder_chips_input插件来创建一个芯片输入表单字段的示例代码。这个插件允许你在Flutter表单中使用芯片输入，非常适合处理多值输入，比如标签或关键词。

首先，确保你已经在pubspec.yaml文件中添加了form_builder_chips_input和它的依赖flutter_form_builder：

dependencies:
  flutter:
    sdk: flutter
  flutter_form_builder: ^7.0.0 # 请检查最新版本号
  form_builder_chips_input: ^4.0.0 # 请检查最新版本号

然后，运行flutter pub get来安装这些依赖。

接下来，在你的Dart文件中，你可以按照以下方式使用form_builder_chips_input：

import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:form_builder_chips_input/form_builder_chips_input.dart';

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormBuilderState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Form Builder Chips Input Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: FormBuilder(
          key: _formKey,
          initialValue: {
            'chips': ['Chip 1', 'Chip 2'], // 初始值（可选）
          },
          autovalidateMode: AutovalidateMode.onUserInteraction,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              FormBuilderChipsInput(
                name: 'chips',
                decoration: InputDecoration(
                  labelText: 'Chips Input',
                ),
                initialValue: ['Chip 1', 'Chip 2'], // 初始芯片值（可选）
                maxChips: 10, // 最大芯片数量（可选）
                chipBuilder: (context, state, chip) {
                  return Chip(
                    label: Text(chip),
                    backgroundColor: Colors.blue.shade200,
                  );
                },
                findSuggestions: (String query) async {
                  // 模拟异步搜索建议
                  if (query.isEmpty) return [];
                  return List.generate(10, (i) => "${query} Suggestion $i");
                },
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter at least one chip.';
                  }
                  return null;
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  _formKey.currentState?.save();
                  if (_formKey.currentState!.validate()) {
                    // 获取表单值
                    final formData = _formKey.currentState!.value;
                    print('Form Data: $formData');
                    // 处理表单数据
                  }
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

代码解释：

  1. 依赖导入：首先导入必要的包。
  2. 应用入口：创建一个简单的Flutter应用。
  3. 表单页面：创建一个包含表单的页面，使用FormBuilder来构建表单。
  4. 芯片输入字段：使用FormBuilderChipsInput来创建一个芯片输入字段。
    • name：字段名称。
    • decoration：输入装饰，如标签文本。
    • initialValue：初始芯片值。
    • maxChips：最大芯片数量。
    • chipBuilder：自定义芯片外观。
    • findSuggestions：根据用户输入异步搜索建议。
    • validator：表单验证器，当芯片为空时返回错误信息。
  5. 提交按钮：创建一个按钮来提交表单，验证并保存表单数据。

这段代码提供了一个完整的示例，展示了如何在Flutter应用中使用form_builder_chips_input插件来创建一个芯片输入表单字段。你可以根据需要进一步自定义和扩展这个示例。

回到顶部