Flutter自定义UI组件插件eg_custom_ui的使用

使用 #

使用

eg_custom_ui 是一个用于在 Flutter 中创建自定义 UI 组件的插件。以下是使用该插件的步骤和示例代码。

示例代码

首先确保你已经在 pubspec.yaml 文件中添加了 eg_custom_ui 依赖：

dependencies:
  eg_custom_ui: ^1.0.0

然后运行 flutter pub get 来获取依赖。

接下来是一个完整的示例代码，展示了如何使用 eg_custom_ui 插件来创建一个简单的登录界面。

示例代码文件: example/lib/main.dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  // 控制器用于管理输入框的内容
  TextEditingController controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            // 使用 EgTextFormWithLabel 创建带标签的输入框
            EgTextFormWithLabel(
              label: 'Login',
              hint: 'informe o seu login',
              controller: controller,
              obscureText: true,
            ),
            // 使用 EgTextFormWithLabel 创建带标签的密码输入框
            EgTextFormWithLabel(
              label: 'Password',
              hint: 'informe a senha',
              controller: controller,
              percentScreen: 2,
              obscureText: true,
              optionShowPassword: true,
            ),
            // 使用 EgButtonCustom 创建自定义样式的按钮
            EgButtonCustom(
              title: 'Bruno',
              function: () {
                print('Guedes');
              },
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

解释

1. 导入依赖：

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

2. 创建应用主体：

   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
           useMaterial3: true,
         ),
         home: const MyHomePage(title: 'Flutter Demo Home Page'),
       );
     }
   }
   

3. 创建主页状态类：

   class MyHomePage extends StatefulWidget {
     const MyHomePage({super.key, required this.title});
   
     final String title;
   
     @override
     State<MyHomePage> createState() => _MyHomePageState();
   }
   

4. 实现主页状态类的方法：

   class _MyHomePageState extends State<MyHomePage> {
     int _counter = 0;
     void _incrementCounter() {
       setState(() {
         _counter++;
       });
     }
   
     // 控制器用于管理输入框的内容
     TextEditingController controller = TextEditingController();
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           backgroundColor: Theme.of(context).colorScheme.inversePrimary,
           title: Text(widget.title),
         ),
         body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               const Text(
                 'You have pushed the button this many times:',
               ),
               Text(
                 '$_counter',
                 style: Theme.of(context).textTheme.headlineMedium,
               ),
               // 使用 EgTextFormWithLabel 创建带标签的输入框
               EgTextFormWithLabel(
                 label: 'Login',
                 hint: 'informe o seu login',
                 controller: controller,
                 obscureText: true,
               ),
               // 使用 EgTextFormWithLabel 创建带标签的密码输入框
               EgTextFormWithLabel(
                 label: 'Password',
                 hint: 'informe a senha',
                 controller: controller,
                 percentScreen: 2,
                 obscureText: true,
                 optionShowPassword: true,
               ),
               // 使用 EgButtonCustom 创建自定义样式的按钮
               EgButtonCustom(
                 title: 'Bruno',
                 function: () {
                   print('Guedes');
                 },
               )
             ],
           ),
         ),
         floatingActionButton: FloatingActionButton(
           onPressed: _incrementCounter,
           tooltip: 'Increment',
           child: const Icon(Icons.add),
         ),
       );
     }
   }
   

通过上述代码，你可以看到如何在 Flutter 应用程序中使用 eg_custom_ui 插件来创建自定义的 UI 组件。希望这个示例对你有所帮助！