Flutter UI设计插件erretech_design的使用

Flutter UI设计插件erretech_design的使用

Erretech Design 是一个为 Flutter 提供的 UI 设计插件，它包含了一些自定义的组件，如按钮、文本字段、应用栏等，以帮助开发者创建一致且风格化的应用程序。

特性

• 自定义样式按钮：可以轻松定制按钮的外观。
• 内置验证的文本字段：提供了集成的输入验证功能。
• 主题化应用栏：可以根据应用的主题来调整应用栏的样式。
• 一致的字体样式：确保应用内的文字样式保持一致。
• 易于集成到任何 Flutter 项目：只需简单的步骤即可将此插件集成到现有项目中。

安装

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

dependencies:
  erretech_design: ^1.0.0

接下来，运行 flutter pub get 来安装该包。

示例代码

以下是一个简单的示例，展示了如何使用 erretech_design 插件来创建一个具有自定义样式的登录界面。

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

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

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

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

class _LoginPageState extends State<LoginPage> {
  final _formKey = GlobalKey<FormState>();
  String _username = '';
  String _password = '';

  void _login() {
    if (_formKey.currentState!.validate()) {
      // 登录逻辑
      print('Username: $_username');
      print('Password: $_password');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登录'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                decoration: InputDecoration(labelText: '用户名'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入用户名';
                  }
                  return null;
                },
                onSaved: (value) {
                  _username = value!;
                },
              ),
              SizedBox(height: 16.0),
              TextFormField(
                obscureText: true,
                decoration: InputDecoration(labelText: '密码'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入密码';
                  }
                  return null;
                },
                onSaved: (value) {
                  _password = value!;
                },
              ),
              SizedBox(height: 24.0),
              ErretechButton(
                text: '登录',
                onPressed: _login,
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
                  foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}