Flutter便捷开发插件easier_flutter的使用

本插件为Flutter中的TextFormField小部件添加了两个新的颜色参数，允许用户轻松控制输入字段的颜色。它不会改变任何现有的小部件结构，仅新增了两个参数：focusedBackgroundColor（聚焦时的背景色）和noFocusedBackgroundColor（未聚焦时的背景色）。

特性

  • 当TextFormField处于聚焦或未聚焦状态时，会更改其背景颜色。
  • 可完全自定义聚焦和未聚焦时的背景颜色。
  • 易于使用，并且可以轻松集成到您的Flutter项目中。

使用方法

以下是一个完整的示例，展示如何在项目中使用easier_flutter插件。

示例代码

import 'package:flutter/material.dart';
import 'package:easier_flutter/easier_flutter.dart'; // 导入插件

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('easier_flutter 示例'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: ExampleForm(),
        ),
      ),
    );
  }
}

class ExampleForm extends StatefulWidget {
  @override
  _ExampleFormState createState() => _ExampleFormState();
}

class _ExampleFormState extends State<ExampleForm> {
  final TextEditingController _controller = TextEditingController();
  final FocusNode _focusNode = FocusNode();

  @override
  void dispose() {
    _controller.dispose();
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 使用 addFocusBackgroundColors 方法
        TextFormField(
          controller: _controller,
          focusNode: _focusNode,
          decoration: InputDecoration(
            labelText: '搜索...',
          ).addFocusBackgroundColors(
            focusedBackgroundColor: const Color(0x4D9489F5), // 聚焦时的背景色
            noFocusedBackgroundColor: Colors.white, // 未聚焦时的背景色
          ),
        ),
        SizedBox(height: 20), // 添加间距
        ElevatedButton(
          onPressed: () {
            if (_focusNode.hasFocus) {
              _focusNode.unfocus(); // 手动取消焦点
            } else {
              _focusNode.requestFocus(); // 手动设置焦点
            }
          },
          child: Text('切换焦点'),
        ),
      ],
    );
  }
}

运行效果

运行上述代码后，您将看到一个带有背景色变化的TextFormField。当您点击输入框时，背景色会变为指定的聚焦颜色；当失去焦点时，背景色会恢复为未聚焦颜色。

图表说明

注意事项

  1. 确保在pubspec.yaml文件中添加了easier_flutter依赖：
    dependencies:
  easier_flutter: ^版本号

更多关于Flutter便捷开发插件easier_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter便捷开发插件easier_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


easier_flutter 是一个旨在简化 Flutter 开发的插件，提供了一些常用的工具和组件，帮助开发者更快地构建应用。以下是一些关于如何使用 easier_flutter 插件的常见功能和示例。

1. 安装 easier_flutter

首先，你需要在项目的 pubspec.yaml 文件中添加 easier_flutter 依赖：

dependencies:
  flutter:
    sdk: flutter
  easier_flutter: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 常用功能示例

2.1 快速创建基本页面

easier_flutter 提供了一个 EasyPage 组件，可以快速创建一个带有标题和内容的基本页面。

import 'package:easier_flutter/easier_flutter.dart';

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return EasyPage(
      title: 'Home',
      body: Center(
        child: Text('Welcome to easier_flutter!'),
      ),
    );
  }
}

2.2 快速导航

easier_flutter 提供了简化的导航方法，例如 push 和 pop。

import 'package:easier_flutter/easier_flutter.dart';

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return EasyPage(
      title: 'Home',
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            EasierNavigator.push(context, AnotherPage());
          },
          child: Text('Go to Another Page'),
        ),
      ),
    );
  }
}

class AnotherPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return EasyPage(
      title: 'Another Page',
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            EasierNavigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

2.3 快速显示对话框

easier_flutter 提供了简化的对话框显示方法。

import 'package:easier_flutter/easier_flutter.dart';

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return EasyPage(
      title: 'Home',
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            EasierDialog.showAlert(
              context,
              title: 'Alert',
              message: 'This is an alert dialog!',
            );
          },
          child: Text('Show Alert'),
        ),
      ),
    );
  }
}

2.4 快速加载数据

easier_flutter 提供了一个 EasyFutureBuilder 组件，用于简化异步数据的加载和显示。

import 'package:easier_flutter/easier_flutter.dart';

class MyHomePage extends StatelessWidget {
  Future<String> fetchData() async {
    await Future.delayed(Duration(seconds: 2));
    return 'Data Loaded!';
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return EasyPage(
      title: 'Home',
      body: EasyFutureBuilder<String>(
        future: fetchData(),
        builder: (context, data) {
          return Center(
            child: Text(data),
          );
        },
      ),
    );
  }
}
回到顶部