Flutter UI组件插件flutter_ui_eoo10的介绍与使用指南

简介

flutter_ui_eoo10 是一个全面的 Flutter 包，提供了多种可定制的 UI 组件，用于构建现代化且交互性强的用户界面。该包包括按钮、卡片、对话框、表单等小部件，并支持各种样式、主题和操作。

功能

按钮 (Buttons)

• 可自定义样式的按钮，支持多种风格和动作。

卡片 (Cards)

• 风格优雅的卡片，用于展示内容。

对话框 (Dialogs)

• 灵活的对话框，用于与用户进行交互。

表单 (Forms)

• 易用的表单，支持验证功能。

主题 (Theming)

• 完整的主题支持和自定义样式。

flutter_ui_eoo10安装

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

dependencies:
  flutter_ui_eoo10: ^0.0.1

运行以下命令以更新依赖项：

flutter pub get

flutter_ui_eoo10使用示例

以下是一个完整的示例代码，展示了如何使用 flutter_ui_eoo10 插件来创建按钮、卡片、对话框和表单。

import 'package:flutter/material.dart';
import 'package:flutter_ui_eoo10/flutter_ui_eoo10.dart'; // 导入插件

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormState>(); // 表单状态管理
  String _name = ''; // 用户名

  void _showDialog() {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('提示'),
          content: Text('这是一个对话框！'),
          actions: [
            FlatButton(
              child: Text('关闭'),
              onPressed: () {
                Navigator.of(context).pop(); // 关闭对话框
              },
            ),
          ],
        );
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('flutter_ui_eoo10 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 自定义按钮
            MyCustomButton(
              text: '点击我',
              onPressed: () {
                print('按钮被点击了！');
              },
            ),

            SizedBox(height: 20),

            // 自定义卡片
            MyCustomCard(
              title: '卡片标题',
              content: '这是卡片的内容。',
            ),

            SizedBox(height: 20),

            // 表单
            Form(
              key: _formKey,
              child: Column(
                children: <Widget>[
                  TextFormField(
                    decoration: InputDecoration(labelText: '请输入用户名'),
                    validator: (value) {
                      if (value.isEmpty) {
                        return '用户名不能为空';
                      }
                      return null;
                    },
                    onSaved: (value) {
                      setState(() {
                        _name = value!;
                      });
                    },
                  ),
                  ElevatedButton(
                    onPressed: () {
                      if (_formKey.currentState!.validate()) {
                        _formKey.currentState!.save();
                        print('用户名: $_name');
                      }
                    },
                    child: Text('提交'),
                  ),
                ],
              ),
            ),

            SizedBox(height: 20),

            // 点击按钮显示对话框
            MyCustomButton(
              text: '显示对话框',
              onPressed: _showDialog,
            ),
          ],
        ),
      ),
    );
  }
}