Flutter自定义组件插件sm_widget的使用

安装

添加依赖

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  sm_widget: ^0.0.1

然后运行以下命令以获取依赖：

dart pub get

或者直接通过 Flutter 命令来添加依赖：

flutter pub add sm_widget

使用示例

接下来我们将展示如何使用 sm_widget 插件。我们将创建一个简单的 Flutter 应用程序，并使用该库中的多个组件。

示例代码

首先，确保你已经添加了 sm_widget 依赖并获取了依赖项。然后，你可以使用以下示例代码来构建一个包含多个 sm_widget 组件的应用程序。

主文件 (main.dart)

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:sm_widget/sm_widget.dart';

// 导入自定义组件
import 'base_list_view.dart';
import 'button/button_example_list.dart';
import 'circle_avatar_example.dart';
import 'container_example.dart';
import 'dialog_example.dart';
import 'expandable_example.dart';
import 'list_tile_example.dart';
import 'text/text_example_list.dart';
import 'text_field/text_field_example_list.dart';

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

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

  // 定义要展示的组件列表
  List<Widget> get itemList => [
        const MContainerExample(),   // 自定义容器组件示例
        const MTextExampleList(),    // 自定义文本组件示例
        const MButtonExampleList(),  // 自定义按钮组件示例
        const MCircleAvatarExample(),// 自定义圆形头像组件示例
        const MDialogExample(),      // 自定义对话框组件示例
        const MCupertinoDialogExample(), // Cupertino风格对话框组件示例
        const MListTileExample(),    // 自定义列表项组件示例
        const ExpandableExample(),   // 可展开的组件示例
        const MTextFieldExampleList(), // 自定义文本输入框组件示例
      ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GetMaterialApp(
      theme: ThemeData(
        colorSchemeSeed: const Color(0xff6750a4),
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const MText('SMWidget Example'), // 使用自定义的MText组件
        ),
        body: BaseListView(
          itemList: itemList, // 展示组件列表
        ),
      ),
    );
  }
}

自定义组件示例

为了更好地理解每个组件的使用方法，这里列出一些具体的组件示例。

自定义容器组件 (MContainerExample)

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.blue),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Text('这是一个自定义容器组件'),
    );
  }
}

自定义文本组件 (MTextExampleList)

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        MText('这是一段自定义文本'),
        MText('这是另一段自定义文本'),
      ],
    );
  }
}