Flutter芯片组件插件 `flexi_chip` 的使用

flexi_chip 是一个功能丰富的Flutter芯片组件插件，提供了平滑的动画效果、事件驱动的样式以及更多的自定义选项。本文将介绍如何使用该插件，并提供一个完整的示例demo。

功能特性

事件驱动的芯片样式
每个事件有不同的样式
芯片样式的各个方面都有动画效果
平滑的动画

使用方法

添加依赖

首先，在你的 pubspec.yaml 文件中添加 flexi_chip 依赖：

dependencies:
  flexi_chip: ^latest_version

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

示例代码

以下是一个完整的示例demo，展示了如何使用 flexi_chip 插件创建不同样式的芯片组件。

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:flexi_chip/flexi_chip.dart';
import 'package:theme_patrol/theme_patrol.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return ThemePatrol(
      light: ThemeData(
        brightness: Brightness.light,
        colorScheme: ColorScheme.fromSeed(
          brightness: Brightness.light,
          seedColor: Colors.red,
        ),
        materialTapTargetSize: MaterialTapTargetSize.padded,
      ),
      dark: ThemeData(
        brightness: Brightness.dark,
        colorScheme: ColorScheme.fromSeed(
          brightness: Brightness.dark,
          seedColor: Colors.red,
        ),
        toggleableActiveColor: Colors.red,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        materialTapTargetSize: MaterialTapTargetSize.padded,
      ),
      builder: (context, theme) {
        return MaterialApp(
          title: 'FlexiChip',
          theme: theme.lightData,
          darkTheme: theme.darkData,
          themeMode: theme.mode,
          home: const MyHomePage(title: 'FlexiChip Example'),
        );
      },
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _selected = false;

  void _setSelected(bool value) {
    setState(() => _selected = value);
  }

  @override
  void initState() {
    const style = FlexiChipStyle(margin: EdgeInsets.all(5));
    log('${style.margin}', name: 'style initial');

    final merged = style.merge(FlexiChipStyle.outlined(
      margin: EdgeInsets.zero,
      pressedStyle: const FlexiChipStyle(
        margin: EdgeInsets.all(10),
      ),
    ));
    log('${merged.margin}', name: 'style merged');

    final evaluated = FlexiChipStyle.evaluate(merged, {FlexiChipEvent.pressed});
    log('${evaluated?.margin}', name: 'style pressed');

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: <Widget>[
          ThemeConsumer(builder: ((context, theme) {
            return IconButton(
              onPressed: () => theme.toggleMode(),
              icon: Icon(theme.modeIcon),
            );
          })),
        ],
      ),
      body: Center(
        child: Wrap(
          spacing: 25,
          direction: Axis.vertical,
          crossAxisAlignment: WrapCrossAlignment.center,
          children: [
            Wrap(
              spacing: 10,
              children: [
                FlexiChip(
                  label: const Text('Toned Chip'),
                  selected: _selected,
                  onPressed: () => {},
                ),
                FlexiChip(
                  label: const Text('Toned Chip'),
                  leading: const Icon(Icons.calendar_month),
                  style: FlexiChipStyle.toned(),
                  selected: _selected,
                  disabled: true,
                  onPressed: () => {},
                ),
              ],
            ),
            Wrap(
              spacing: 10,
              children: [
                FlexiChip(
                  label: const Text('Outlined Chip'),
                  style: FlexiChipStyle.outlined(),
                  checkmark: true,
                  selected: _selected,
                  onDeleted: () {},
                ),
                FlexiChip(
                  label: const Text('Outlined Chip'),
                  trailing: const Icon(Icons.calendar_month),
                  style: FlexiChipStyle.outlined(),
                  checkmark: true,
                  disabled: true,
                  selected: _selected,
                  onSelected: _setSelected,
                ),
              ],
            ),
            Wrap(
              spacing: 10,
              children: [
                FlexiChip(
                  label: const Text('Filled Chip'),
                  avatarText: const Text('FC'),
                  style: FlexiChipStyle.filled(
                    selectedStyle: FlexiChipStyle(
                      borderRadius: BorderRadius.circular(25),
                    ),
                  ),
                  selected: _selected,
                  onSelected: _setSelected,
                  onDeleted: () {},
                ),
                FlexiChip(
                  label: const Text('Filled Chip'),
                  leading: const Icon(Icons.image),
                  style: FlexiChipStyle.filled(),
                  selected: _selected,
                  onDeleted: () {},
                  disabled: true,
                ),
              ],
            ),
            Wrap(
              spacing: 10,
              children: [
                FlexiChip(
                  label: const Text('Mixed Style Chip'),
                  avatarImage: const NetworkImage('https://i.pravatar.cc/50'),
                  style: FlexiChipStyle.when(
                    enabled: FlexiChipStyle.toned(
                      borderRadius: BorderRadius.circular(25),
                    ),
                    selected: FlexiChipStyle.filled(
                      borderRadius: BorderRadius.circular(5),
                    ),
                  ),
                  selected: _selected,
                  onSelected: _setSelected,
                  checkmark: true,
                  onDeleted: () {},
                ),
                FlexiChip(
                  label: const Text('Mixed Style Chip'),
                  leading: const Icon(Icons.image),
                  style: FlexiChipStyle.filled(
                    selectedStyle: FlexiChipStyle.outlined(
                      borderRadius: BorderRadius.circular(25),
                    ),
                  ),
                  selected: _selected,
                  onDeleted: () {},
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

关键点说明

FlexiChipStyle：用于定义芯片的样式，包括背景颜色、边框半径、字体样式等。
onPressed 和 onSelected：分别用于处理点击和选中事件。
disabled：设置为 true 时，芯片处于禁用状态。
checkmark：显示复选标记。
onDeleted：用于处理删除事件。

通过上述示例，你可以根据自己的需求定制不同的芯片样式和行为。更多详细信息可以参考 API Reference。

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

phonegap100 1楼•2 天前

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

当然，以下是如何在Flutter项目中使用flexi_chip插件的示例代码。flexi_chip是一个用于创建芯片（Chip）组件的Flutter插件，它提供了高度的可定制性。

首先，确保你的Flutter项目已经添加了flexi_chip依赖。你可以在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  flexi_chip: ^x.y.z  # 替换为最新版本号

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

接下来，你可以在你的Flutter项目中使用FlexiChip组件。以下是一个简单的示例，展示了如何创建和使用FlexiChip：

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

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

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

class ChipDemoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FlexiChip Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Basic Chip Example:', style: TextStyle(fontSize: 18)),
            SizedBox(height: 8),
            FlexiChip(
              label: 'Chip 1',
              onDeleted: () {
                print('Chip 1 deleted');
              },
            ),
            SizedBox(height: 8),
            FlexiChip(
              label: 'Chip 2',
              leading: Icon(Icons.star),
              trailing: Icon(Icons.arrow_forward),
              onDeleted: () {
                print('Chip 2 deleted');
              },
              avatar: FlexiAvatar(
                child: Text('A'),
                backgroundColor: Colors.red,
              ),
              backgroundColor: Colors.grey.withOpacity(0.5),
              elevation: 4,
              deleteIconColor: Colors.red,
              deleteIconSize: 20,
            ),
            SizedBox(height: 24),
            Text('Chip Group Example:', style: TextStyle(fontSize: 18)),
            SizedBox(height: 8),
            FlexiChipGroup(
              chips: [
                FlexiChip(
                  label: 'Chip A',
                  onDeleted: () {
                    print('Chip A deleted');
                  },
                ),
                FlexiChip(
                  label: 'Chip B',
                  onDeleted: () {
                    print('Chip B deleted');
                  },
                ),
                FlexiChip(
                  label: 'Chip C',
                  onDeleted: () {
                    print('Chip C deleted');
                  },
                ),
              ],
              onDelete: (index) {
                print('Chip Group: Chip at index $index deleted');
              },
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们展示了两种使用FlexiChip的方式：

单个芯片（Chip）：
- 使用FlexiChip组件来创建一个简单的芯片。
- 你可以设置label、leading、trailing、avatar等属性来自定义芯片的外观。
- onDeleted回调会在芯片被删除时触发。
芯片组（Chip Group）：
- 使用FlexiChipGroup组件来创建一组芯片。
- 你可以通过chips属性来传递一个FlexiChip的列表。
- onDelete回调会在组中的某个芯片被删除时触发，并传递被删除芯片的索引。

这个示例展示了flexi_chip插件的基本用法，你可以根据需要进一步自定义和扩展这些芯片。