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

简介

elon_serra_widgets 是一个简单的自定义小部件包，旨在为开发者提供更灵活的开发体验。它可以帮助你快速创建按钮、文本框和列等常用组件，并提供了丰富的自定义属性。

特性

• TextField: 提供完整的自定义属性，使你的文本框更具吸引力。
• Button: 提供简单易用的自定义属性，让你在开发过程中拥有更多控制权。
• Column: 提供简单的自定义属性，让列中的子组件更加丰富多彩，并可以调整列内间距。

开始使用

要开始使用 elon_serra_widgets，你需要将该包添加到你的项目中。以下是具体步骤：

1. 在项目的 pubspec.yaml 文件中添加依赖：

   dependencies:
     elon_serra_widgets: ^1.0.0

2. 运行以下命令以更新依赖：

   flutter pub get

示例代码

以下是一个完整的示例，展示如何使用 elon_serra_widgets 中的组件。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('elon_serra_widgets 示例'),
        ),
        body: Center(
          child: ExampleWidget(),
        ),
      ),
    );
  }
}

class ExampleWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 自定义文本框
        ElonTextField(
          placeholder: '请输入您的名字',
          borderColor: Colors.blue,
          borderRadius: 10,
          padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
          textStyle: TextStyle(fontSize: 18, color: Colors.black),
        ),

        SizedBox(height: 20), // 添加间距

        // 自定义按钮
        ElonButton(
          text: '点击我',
          backgroundColor: Colors.green,
          textColor: Colors.white,
          padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
          borderRadius: 5,
          onPressed: () {
            print('按钮被点击了');
          },
        ),

        SizedBox(height: 20), // 添加间距

        // 自定义列
        ElonColumn(
          spacing: 15,
          children: [
            Text('第一项', style: TextStyle(fontSize: 18)),
            Text('第二项', style: TextStyle(fontSize: 18)),
            Text('第三项', style: TextStyle(fontSize: 18)),
          ],
        ),
      ],
    );
  }
}