Flutter自定义字段样式插件custom_field_styles的使用

如果你厌倦了在Flutter应用中重复设计表单字段，或者希望在多个项目中保持相同的表单设计，那么Flutter custom Form Fields插件可以帮你解决这些问题。

Flutter custom Form Fields是一个轻量级的包，它提供了预定义的表单字段样式，帮助你编写更简洁的代码，并且可以重用已经设计好的表单字段。

使用

设置依赖

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

dependencies:
  custom_field_styles: <latest-version>

安装

在终端中运行以下命令以安装依赖：

flutter pub get

导入

在你的Dart文件中导入插件：

import 'package:custom_field_styles/custom_field_styles.dart';

使用

以下是一个完整的示例，展示了如何使用CustomTextField和CustomButtons组件：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Container(
            margin: const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text(
                  "Modern Text Field",
                  style: TextStyle(fontSize: 20),
                ),
                const SizedBox(
                  height: 20,
                ),
                /// 自定义表单文本字段，通过更改[fieldStyle]来改变设计
                /// 必需字段：[controller]
                CustomTextField(
                  controller: controller,
                  fieldStyle: FieldStyle.modern,
                  prefixIcon: const Icon(Icons.person_2),
                  suffixIcon: const Icon(Icons.cancel),
                ),
                const SizedBox(
                  height: 20,
                ),
                const Text(
                  "Gradient Button Field",
                  style: TextStyle(fontSize: 20),
                ),
                const SizedBox(
                  height: 20,
                ),
                /// 自定义表单按钮，通过更改[buttonStyle]来改变设计
                /// 必需字段：[child]
                CustomButtons(
                  onTap: () {
                    debugPrint("Hello, Button Pressed");
                  },
                  buttonStyle: CustomStyle.gradient,
                  firstGradientColor: Colors.purple,
                  secondGradientColor: Colors.pink,
                  enableShadow: true,
                  child: const Text(
                    "Button",
                    style: TextStyle(
                      fontSize: 20,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

必需字段

• TextFields 需要 controller
• Buttons 需要 child

图片

表单字段

• 简单文本字段
• 现代文本字段
• 密码文本字段

表单按钮

• 简单按钮
• 现代按钮
• 渐变按钮

贡献

贡献总是受欢迎的！

查看CONTRIBUTING.md了解如何开始。

常见问题

样式是否预设？

是的，一些基本样式是预设的，以便简化开发。你也可以手动更改特定样式。

为什么某些样式在某些FieldStyle中不起作用？

为了保持每个FieldStyle的独特性，我们限制了一些样式在某些特定的FieldStyle中使用。

我有一些创意样式的想法，如何将它们添加到此包中？

请参阅CONTRIBUTING.md。

只有这些样式可用吗？

不，我正在开发更多样式。很快就会添加更多样式。

反馈

如果你有任何反馈，请联系我们：developer.dextrix@gmail.com

支持