Flutter自定义组件封装插件flutter_widget_wrapper的使用

flutter_widget_wrapper

flutter_widget_wrapper 是一个用于测量 Flutter 组件当前大小并通知大小变化的插件。

使用示例

以下是一个完整的示例，展示了如何在 Flutter 应用中使用 flutter_widget_wrapper 插件。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Widget Wrapper',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const WrapperExample(),
    );
  }
}

class WrapperExample extends StatelessWidget {
  const WrapperExample({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade300,
      body: SafeArea(
        child: Container(
          margin: const EdgeInsets.all(24),
          child: Column(
            children: [
              // 第一个 WidgetWrapper 示例
              WidgetWrapper(
                wrap: (con, size) {
                  return Expanded(
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(
                          size.width * 0.1,
                        ),
                      ),
                      alignment: Alignment.center,
                      child: Text("$size"),
                    ),
                  );
                },
              ),
              const SizedBox(height: 24, width: 24), // 添加间距

              // 第二个 WidgetWrapper 示例
              WidgetWrapper(
                wrap: (con, size) {
                  return Expanded(
                    flex: 2,
                    child: Container(
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(
                          size.width * 0.1,
                        ),
                      ),
                      child: Text("$size"),
                    ),
                  );
                },
              ),
              const SizedBox(height: 24, width: 24), // 添加间距

              // 第三个 WidgetWrapper 示例
              WidgetWrapper(
                wrap: (con, size) {
                  return Expanded(
                    child: Container(
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(
                          size.width * 0.1,
                        ),
                      ),
                      child: Text("$size"),
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

代码解释

导入必要的包：

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

创建主应用：

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

创建 MyApp 类：

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Widget Wrapper',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const WrapperExample(),
    );
  }
}

创建 WrapperExample 类：

class WrapperExample extends StatelessWidget {
  const WrapperExample({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade300,
      body: SafeArea(
        child: Container(
          margin: const EdgeInsets.all(24),
          child: Column(
            children: [
              // 使用 WidgetWrapper 的第一个示例
              WidgetWrapper(
                wrap: (con, size) {
                  return Expanded(
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(
                          size.width * 0.1,
                        ),
                      ),
                      alignment: Alignment.center,
                      child: Text("$size"),
                    ),
                  );
                },
              ),
              const SizedBox(height: 24, width: 24), // 添加间距

              // 使用 WidgetWrapper 的第二个示例
              WidgetWrapper(
                wrap: (con, size) {
                  return Expanded(
                    flex: 2,
                    child: Container(
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(
                          size.width * 0.1,
                        ),
                      ),
                      child: Text("$size"),
                    ),
                  );
                },
              ),
              const SizedBox(height: 24, width: 24), // 添加间距

              // 使用 WidgetWrapper 的第三个示例
              WidgetWrapper(
                wrap: (con, size) {
                  return Expanded(
                    child: Container(
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(
                          size.width * 0.1,
                        ),
                      ),
                      child: Text("$size"),
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter自定义组件封装插件flutter_widget_wrapper的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

eggper 1楼

更多关于Flutter自定义组件封装插件flutter_widget_wrapper的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中自定义组件并封装成插件flutter_widget_wrapper的一个基本示例。由于实际创建和发布一个Flutter插件涉及到很多步骤（包括配置pubspec.yaml、设置CMakeLists.txt或.podspec文件等），这里我将重点放在核心代码部分，展示如何封装一个简单的自定义组件，并在本地项目中使用它。

1. 创建自定义组件

首先，在你的Flutter项目中创建一个自定义组件。例如，我们创建一个简单的计数器组件。

`lib/widgets/counter_widget.dart`

import 'package:flutter/material.dart';

class CounterWidget extends StatefulWidget {
  final int initialValue;
  final ValueChanged<int> onChanged;

  CounterWidget({required this.initialValue, required this.onChanged});

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

class _CounterWidgetState extends State<CounterWidget> {
  int _count = 0;

  @override
  void initState() {
    super.initState();
    _count = widget.initialValue;
  }

  void _increment() {
    setState(() {
      _count++;
      widget.onChanged(_count);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          'You have pushed the button this many times:',
        ),
        Text(
          '$_count',
          style: Theme.of(context).textTheme.headline4,
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: _increment,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

2. 封装成插件（模拟）

虽然完整封装成插件涉及很多步骤，但在这里我们可以通过创建一个模拟的“插件”目录结构来展示如何使用这个组件。在实际项目中，你会将这个组件及其相关文件移动到插件项目中。

假设插件目录结构：

/flutter_widget_wrapper
  /lib
    counter_widget.dart  (上面的代码放在这里)
  /example
    /lib
      main.dart  (用于测试插件的示例应用)

3. 在本地Flutter项目中使用模拟插件

在你的Flutter项目的pubspec.yaml中，添加对本地路径的依赖来模拟插件使用。

`pubspec.yaml`

dependencies:
  flutter:
    sdk: flutter
  flutter_widget_wrapper:
    path: ../path/to/flutter_widget_wrapper  # 指向你的模拟插件目录

4. 使用封装好的组件

现在你可以在你的Flutter应用中使用这个封装好的组件了。

`lib/main.dart`

import 'package:flutter/material.dart';
import 'package:flutter_widget_wrapper/counter_widget.dart'; // 引入封装好的组件

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Widget Wrapper Demo'),
        ),
        body: Center(
          child: CounterWidget(
            initialValue: 0,
            onChanged: (newValue) {
              print('Counter value changed to: $newValue');
            },
          ),
        ),
      ),
    );
  }
}

注意

实际的插件开发还需要配置pubspec.yaml中的name, description, version, homepage, repository, issue_tracker, dependencies, 和 dev_dependencies等字段。
发布插件到pub.dev还需要遵循Flutter的插件发布指南，包括设置CHANGELOG.md, README.md, 以及处理平台特定的代码（如iOS和Android）。
上述代码仅用于展示如何在Flutter项目中创建和使用自定义组件的基本流程，并未涵盖插件开发的所有细节。

希望这能帮助你理解如何在Flutter中封装和使用自定义组件！