open_widgets 是一个 Flutter 插件，提供了一系列自定义组件，旨在简化开发过程并提高代码的可复用性。它包含了多种常用的 UI 组件，如按钮、卡片、对话框、加载指示器等，可以帮助开发者快速构建美观且功能丰富的应用界面。

安装 open_widgets

首先，你需要在 pubspec.yaml 文件中添加 open_widgets 依赖：

dependencies:
  flutter:
    sdk: flutter
  open_widgets: ^1.0.0  # 请使用最新版本

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

使用 open_widgets 中的组件

open_widgets 提供了多种自定义组件，下面列举一些常用的组件及其用法。

1. OpenButton

OpenButton 是一个自定义的按钮组件，支持多种样式和点击事件。

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('OpenWidgets Example'),
      ),
      body: Center(
        child: OpenButton(
          onPressed: () {
            print('Button Pressed!');
          },
          text: 'Click Me',
          color: Colors.blue,
          textColor: Colors.white,
        ),
      ),
    );
  }
}

2. OpenCard

OpenCard 是一个自定义的卡片组件，支持设置阴影、圆角等属性。

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('OpenWidgets Example'),
      ),
      body: Center(
        child: OpenCard(
          elevation: 5,
          borderRadius: BorderRadius.circular(10),
          child: Padding(
            padding: EdgeInsets.all(16.0),
            child: Text('This is a custom card!'),
          ),
        ),
      ),
    );
  }
}

3. OpenDialog

OpenDialog 是一个自定义的对话框组件，支持设置标题、内容和操作按钮。

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('OpenWidgets Example'),
      ),
      body: Center(
        child: OpenButton(
          onPressed: () {
            OpenDialog.show(
              context,
              title: 'Alert',
              content: 'This is a custom dialog!',
              actions: [
                OpenButton(
                  text: 'OK',
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              ],
            );
          },
          text: 'Show Dialog',
        ),
      ),
    );
  }
}

4. OpenLoadingIndicator

OpenLoadingIndicator 是一个自定义的加载指示器组件，支持设置颜色和大小。

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('OpenWidgets Example'),
      ),
      body: Center(
        child: OpenLoadingIndicator(
          color: Colors.blue,
          size: 50.0,
        ),
      ),
    );
  }
}

自定义主题

open_widgets 还支持自定义主题，你可以通过设置 OpenTheme 来统一调整所有组件的样式。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'OpenWidgets Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: OpenTheme(
        data: OpenThemeData(
          buttonColor: Colors.green,
          buttonTextColor: Colors.white,
          cardElevation: 10,
        ),
        child: MyHomePage(),
      ),
    );
  }
}