Flutter自定义功能插件flext的使用

当然，下面是一个关于如何在Flutter中创建和使用自定义功能插件 flext 的代码示例。这个示例将展示如何创建一个简单的Flutter插件，该插件提供一个自定义的Widget，这个Widget可以扩展和收缩其内容。

1. 创建Flutter插件项目

首先，确保你已经安装了Flutter SDK，并在你的开发环境中配置好了相关路径。然后，使用以下命令创建一个新的Flutter插件项目：

flutter create --template=plugin flext

2. 编辑插件代码

进入项目目录后，你会看到两个主要的文件夹：example 和 lib。example 文件夹包含一个使用插件的Flutter应用示例，而 lib 文件夹包含插件的实际代码。

编辑 lib/flext.dart

在 lib 文件夹中，打开 flext.dart 文件，并编写以下代码来定义我们的自定义Widget：

import 'package:flutter/material.dart';

class Flext extends StatefulWidget {
  final Widget child;
  final double expandedHeight;
  final double collapsedHeight;
  final Duration duration;
  final Curve curve;
  final VoidCallback onExpand;
  final VoidCallback onCollapse;

  const Flext({
    Key? key,
    required this.child,
    this.expandedHeight = 200.0,
    this.collapsedHeight = 50.0,
    this.duration = const Duration(milliseconds: 300),
    this.curve = Curves.easeInOut,
    this.onExpand,
    this.onCollapse,
  }) : super(key: key);

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

class _FlextState extends State<Flext> with SingleTickerProviderStateMixin {
  double _height = 50.0;
  bool _isExpanded = false;

  void _toggle() {
    setState(() {
      _isExpanded = !_isExpanded;
      _height = _isExpanded ? widget.expandedHeight : widget.collapsedHeight;
    });

    if (_isExpanded && widget.onExpand != null) {
      widget.onExpand!();
    } else if (!_isExpanded && widget.onCollapse != null) {
      widget.onCollapse!();
    }
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: widget.duration,
      curve: widget.curve,
      height: _height,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          GestureDetector(
            onTap: _toggle,
            child: Container(
              height: widget.collapsedHeight,
              color: Colors.blueGrey[300],
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              alignment: Alignment.centerLeft,
              child: Text(
                _isExpanded ? 'Collapse' : 'Expand',
                style: TextStyle(color: Colors.black),
              ),
            ),
          ),
          AnimatedSize(
            duration: widget.duration,
            curve: widget.curve,
            vsync: this,
            child: _isExpanded ? widget.child : Container(),
          ),
        ],
      ),
    );
  }
}

3. 使用插件

现在，你可以在 example 文件夹中的 lib/main.dart 文件中使用这个插件。首先，确保在 pubspec.yaml 文件中添加了插件依赖：

dependencies:
  flutter:
    sdk: flutter
  flext:
    path: ../

然后在 main.dart 文件中使用 Flext Widget：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flext Example'),
        ),
        body: Center(
          child: Flext(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('This is the expanded content.', style: TextStyle(fontSize: 20)),
                SizedBox(height: 20),
                Text('Tap the header to collapse.', style: TextStyle(fontSize: 16)),
              ],
            ),
            onExpand: () {
              print('Expanded');
            },
            onCollapse: () {
              print('Collapsed');
            },
          ),
        ),
      ),
    );
  }
}

4. 运行示例应用

确保你在项目的根目录下，然后运行以下命令来启动示例应用：

flutter run

现在你应该能看到一个包含 Flext Widget 的Flutter应用，当你点击头部时，内容会扩展和收缩。

这个示例展示了如何创建一个简单的Flutter插件，并通过插件提供了一个自定义的Widget。你可以根据需要进一步扩展这个插件的功能。