Flutter美化文本框插件beautiful

Flutter美化文本框插件beautiful_textfields的使用

概述

beautiful_textfields 是一个用于美化 Flutter 应用中文本输入框的插件。通过该插件，您可以轻松创建具有美观外观的文本框，支持多种功能如标签文本、提示文本、密码隐藏等。

特性

标签文本
提示文本
输入类型（如邮箱、电话等）
密码隐藏
大小写格式化
控制器支持

使用步骤

在 pubspec.yaml 文件中添加依赖项：
```
dependencies:
  beautiful_textfields: ^版本号
```
（请根据实际可用版本替换 ^版本号）

导入插件并初始化：

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

创建一个简单的文本框示例：

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

class MyApp extends StatelessWidget {
  final TextEditingController emailController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Beautiful Textfields 示例')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              // 邮箱输入框
              MyTextField(
                hintText: 'Enter your Email',
                inputType: TextInputType.emailAddress,
                labelText2: 'Email',
                secure1: false,
                capital: TextCapitalization.none,
                nameController1: emailController,
              ),
              SizedBox(height: 20), // 添加间距
              // 密码输入框
              MyTextField(
                hintText: 'Enter your Password',
                inputType: TextInputType.visiblePassword,
                labelText2: 'Password',
                secure1: true, // 隐藏密码
                capital: TextCapitalization.sentences,
                nameController1: passwordController,
              ),
              SizedBox(height: 20),
              // 提交按钮
              ElevatedButton(
                onPressed: () {
                  print('邮箱: ${emailController.text}');
                  print('密码: ${passwordController.text}');
                },
                child: Text('提交'),
              )
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter美化文本框插件beautiful_textfields的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

caililin 1楼

更多关于Flutter美化文本框插件beautiful_textfields的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

beautiful_textfields 是一个用于 Flutter 的插件，旨在为文本框（TextField 或 TextFormField）提供更加美观和定制化的外观。它允许开发者轻松地添加各种装饰效果，如边框、阴影、圆角、图标等，从而提升用户界面的视觉效果。

安装

首先，你需要在 pubspec.yaml 文件中添加 beautiful_textfields 依赖：

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

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

基本使用

beautiful_textfields 提供了 BeautifulTextField 和 BeautifulTextFormField 两个组件，分别对应 TextField 和 TextFormField。

1. 使用 `BeautifulTextField`

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Beautiful TextFields Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: BeautifulTextField(
          decoration: TextFieldDecoration(
            labelText: 'Username',
            hintText: 'Enter your username',
            prefixIcon: Icon(Icons.person),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
            filled: true,
            fillColor: Colors.grey[200],
          ),
        ),
      ),
    );
  }
}

2. 使用 `BeautifulTextFormField`

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

class MyFormPage extends StatelessWidget {
  final _formKey = GlobalKey<FormState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Beautiful TextFormField Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              BeautifulTextFormField(
                decoration: TextFieldDecoration(
                  labelText: 'Email',
                  hintText: 'Enter your email',
                  prefixIcon: Icon(Icons.email),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                  filled: true,
                  fillColor: Colors.grey[200],
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your email';
                  }
                  return null;
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    // 表单验证通过
                  }
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

自定义装饰

TextFieldDecoration 提供了多种属性来自定义文本框的外观，包括：

labelText: 标签文本
hintText: 提示文本
prefixIcon: 前缀图标
suffixIcon: 后缀图标
border: 边框样式
filled: 是否填充背景
fillColor: 背景颜色
errorText: 错误提示文本
errorStyle: 错误提示文本样式
focusedBorder: 获取焦点时的边框样式
enabledBorder: 未获取焦点时的边框样式
disabledBorder: 禁用时的边框样式

示例

以下是一个更复杂的示例，展示了如何使用 BeautifulTextField 和 BeautifulTextFormField 来创建美观的表单：

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

class MyFormPage extends StatelessWidget {
  final _formKey = GlobalKey<FormState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Beautiful TextFields Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              BeautifulTextField(
                decoration: TextFieldDecoration(
                  labelText: 'Username',
                  hintText: 'Enter your username',
                  prefixIcon: Icon(Icons.person),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                  filled: true,
                  fillColor: Colors.grey[200],
                ),
              ),
              SizedBox(height: 20),
              BeautifulTextFormField(
                decoration: TextFieldDecoration(
                  labelText: 'Password',
                  hintText: 'Enter your password',
                  prefixIcon: Icon(Icons.lock),
                  suffixIcon: Icon(Icons.visibility),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                  filled: true,
                  fillColor: Colors.grey[200],
                ),
                obscureText: true,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your password';
                  }
                  return null;
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    // 表单验证通过
                  }
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Flutter美化文本框插件beautiful_textfields的使用