Flutter用户体验优化插件inforvix_ux的使用

在Flutter开发中，为了提升用户体验，我们可以借助一些优秀的第三方插件。本文将介绍一个名为inforvix_ux的插件，它提供了多种UI组件来简化开发过程并增强应用的交互性。

特性

目前该插件的文档正在完善中（em breve um readme digno），但已经提供了以下功能丰富的组件：

• EditInforvix: 简单的输入框。
• ButtonInforvix: 自定义按钮。
• ButtonIconInforvix: 带图标的按钮。
• EditMemoInforvix: 多行文本编辑器。
• EditHora: 时间选择器。

接下来我们将通过一个完整的示例展示如何使用这些组件。

示例代码

main.dart

import 'package:flutter/material.dart';
import 'package:inforvix_ux/inforvix_ux.dart'; // 引入插件

void main() {
  runApp(const MyApp()); // 应用入口
}

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

  // 构建根Widget
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), // 主题颜色
        useMaterial3: true, // 使用Material 3设计风格
      ),
      home: const MyHomePage(), // 主页面
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState(); // 初始化状态
}

class _MyHomePageState extends State<MyHomePage> {
  // 文本控制器用于绑定输入框
  TextEditingController controllerEdit = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center( // 页面中心对齐
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // 垂直居中
          children: [
            // EditInforvix 示例：简单输入框
            EditInforvix(
              title: 'Nome', // 标题
              controller: controllerEdit, // 绑定文本控制器
              hintText: 'Seu hint', // 提示文字
              paddingTop: 0, // 上边距
              width: 200, // 宽度
            ),

            // ButtonInforvix 示例：普通按钮
            ButtonInforvix(
              title: 'Acessar', // 按钮标题
              onClick: () { // 点击事件
                print('Button clicked!');
              },
              width: 200, // 宽度
            ),

            // ButtonIconInforvix 示例：带图标的按钮
            ButtonIconInforvix(
              title: 'Acessar',
              onClick: () {},
              icon: const Icon(Icons.add, color: Colors.white), // 图标
              width: 200,
            ),

            // EditMemoInforvix 示例：多行文本编辑器
            EditMemoInforvix(
              title: 'Observação',
              controller: controllerEdit,
              width: 200,
            ),

            // EditHora 示例：时间选择器
            EditHora(
              title: 'Hora',
              controller: controllerEdit,
              width: 200,
            ),
          ],
        ),
      ),
    );
  }
}