Flutter圆角文本输入框插件rounded_text_form_field的使用

Flutter圆角文本输入框插件rounded_text_form_field的使用

rounded_text_form_field 是一个用于在Flutter应用中创建具有自定义设计和装饰的圆角文本输入框的库。它支持标签、提示文字、验证等功能，简化了文本输入字段的创建和定制过程。

安装

首先，创建一个新的Flutter项目：

flutter create MyApp

然后，在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  rounded_text_form_field: ^版本号

或者直接在终端运行：

flutter pub add rounded_text_form_field

接下来，在你的库文件中导入该包：

import 'package:rounded_text_form_field/rounded_text_form_field.dart';

使用

以下是一个简单的示例，展示了如何使用 RoundedTextFormField 创建一个带有验证功能的圆角文本输入框：

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Rounded Text Form Field',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final nameTextField = TextEditingController(text: "");

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("Rounded Text Form Field"),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16),
          child: Column(
            children: [
              const SizedBox(height: 16),
              const Text(
                "Name",
                style: TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.w600,
                ),
              ),
              const SizedBox(height: 8),
              RoundedTextFormField(
                textInputAction: TextInputAction.done,
                controller: nameTextField,
                hintText: "Please enter your name",
                validator: (value) {
                  if (value!.isEmpty) {
                    return "Please enter your name";
                  } else if (value.length < 4) {
                    return "Please enter valid name";
                  }
                  return null;
                },
              ),
              const SizedBox(height: 20),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter中使用rounded_text_form_field插件来创建一个带有圆角的文本输入框的示例代码。首先，确保你已经在pubspec.yaml文件中添加了rounded_text_form_field依赖：

dependencies:
  flutter:
    sdk: flutter
  rounded_text_form_field: ^0.0.6  # 请检查最新版本号

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

接下来是一个完整的Flutter应用示例，展示如何使用rounded_text_form_field：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Rounded Text Form Field Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormState>();
  String _username = '';

  void _submit() {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();
      print('Username: $_username');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rounded Text Form Field Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              RoundedTextFormField(
                labelText: 'Username',
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter a username';
                  }
                  return null;
                },
                onSaved: (value) {
                  _username = value!;
                },
                borderRadius: 20.0,  // 设置圆角半径
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.person),
                ),
              ),
              SizedBox(height: 20.0),
              ElevatedButton(
                onPressed: _submit,
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个带有圆角边框的文本输入框（RoundedTextFormField）。以下是关键点：

  1. 依赖添加：确保在pubspec.yaml中添加了rounded_text_form_field依赖。
  2. 导入包：在代码文件中导入rounded_text_form_field包。
  3. 使用RoundedTextFormField：
    • labelText：输入框的标签文本。
    • validator：验证函数，用于在提交表单时验证输入值。
    • onSaved：保存函数，用于在验证通过后保存输入值。
    • borderRadius：设置输入框的圆角半径。
    • decoration：允许进一步自定义输入框的外观，例如添加前缀图标。

这个示例展示了如何使用rounded_text_form_field插件来创建一个带有圆角的文本输入框，并处理表单的验证和提交。希望这对你有所帮助！

回到顶部