Flutter扩展功能插件expandi_juni1289的使用

expandi_juni1289 是一个Flutter插件，它提供了一个可以展开和折叠带有动画效果的小部件。该插件允许用户自定义头部小部件、子小部件以及用于处理展开和折叠操作的图标。

特性

• 展开/折叠功能
• 支持自定义头部小部件
• 支持自定义子小部件
• 可添加自定义图标来控制展开和折叠

附加信息

• 易于使用和管理
• 需要您自己实现状态管理以控制小部件的状态
• 可以与GetX, Provider等状态管理工具结合使用

基本设置

下面是一个基本的使用示例：

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

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        margin: const EdgeInsetsDirectional.only(top: 100),
        child: Expandi(
          expandableChildAnimationMilliSecondsDuration: 500,
          expandableIconAnimationMilliSecondsDuration: 500,
          onExpandCollapseCallback: (bool isExpanded) {
            setState(() {
              expanded = !isExpanded;
            });
          },
          expandableIconWidget: const Icon(
            Icons.keyboard_arrow_down,
            size: 40,
            color: Colors.red,
          ),
          marginBetweenExpandableIcon: 40,
          isExpanded: expanded,
          headerContainerDecoration: const BoxDecoration(color: Colors.yellow),
          headerContainerMargin: const EdgeInsetsDirectional.all(40),
          headerContainerPadding: const EdgeInsetsDirectional.all(40),

          headerWidget: const Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                child: Text(
                  "Expand",
                  style: TextStyle(color: Colors.white),
                  textAlign: TextAlign.end,
                ),
              )
            ],
          ),
          expandableChild: Container(
            padding: const EdgeInsets.only(top: 20, bottom: 20, left: 12, right: 12),
            margin: const EdgeInsets.only(left: 20, right: 20),
            color: Colors.blue,
            child: const Text(
              "Hello world, greetings from the expandi, this would be a long journey!",
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

构造函数参数说明

const Expandi({
  Key? key,
  this.expandableIconWidget,
  this.marginBetweenExpandableIcon = 0,
  required this.onExpandCollapseCallback,
  required this.headerWidget,
  required this.isExpanded,
  required this.expandableChild,
  this.expandableChildAnimationMilliSecondsDuration = 850,
  this.expandableIconAnimationMilliSecondsDuration = 500,
  this.headerWidgetEndPadding = 0,
})

完整示例Demo

以下是一个完整的示例应用，展示了如何集成和使用expandi_juni1289插件。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Expandi Juni1289 Example'),
      ),
      body: Center(
        child: Expandi(
          expandableChildAnimationMilliSecondsDuration: 500,
          expandableIconAnimationMilliSecondsDuration: 500,
          onExpandCollapseCallback: (bool isExpanded) {
            setState(() {
              expanded = !isExpanded;
            });
          },
          expandableIconWidget: const Icon(
            Icons.keyboard_arrow_down,
            size: 40,
            color: Colors.red,
          ),
          marginBetweenExpandableIcon: 40,
          isExpanded: expanded,
          headerContainerDecoration: const BoxDecoration(color: Colors.yellow),
          headerContainerMargin: const EdgeInsetsDirectional.all(40),
          headerContainerPadding: const EdgeInsetsDirectional.all(40),

          headerWidget: const Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                child: Text(
                  "Expand",
                  style: TextStyle(color: Colors.white),
                  textAlign: TextAlign.end,
                ),
              )
            ],
          ),
          expandableChild: Container(
            padding: const EdgeInsets.only(top: 20, bottom: 20, left: 12, right: 12),
            margin: const EdgeInsets.only(left: 20, right: 20),
            color: Colors.blue,
            child: const Text(
              "Hello world, greetings from the expandi, this would be a long journey!",
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}