Flutter文本输入插件material_text_fields的使用

发布于 1周前 作者 wuwangju 来自 Flutter

Flutter文本输入插件material_text_fields的使用

简介

Material Text Field 是一个用于Dart中输入文本值的可定制小部件。您可以在应用程序的主题文件中定义文本字段的样式，或者创建具有不同样式的多个文本字段。您可以轻松创建具有可自定义样式和行为的文本输入字段。

安装

要将 Material Text Field 添加到您的 Dart 项目中，在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  material_text_fields: ^<latest-version>

然后运行 flutter pub get 来安装该包。

在库中添加以下导入：

import 'package:material_text_fields/material_text_fields.dart';

使用方法

基本用法

要在 Flutter 应用程序中使用 Material Text Field，导入包并创建 MaterialTextField 小部件的新实例。

MaterialTextField(
  keyboardType: TextInputType.emailAddress,
  hint: 'Email',
  textInputAction: TextInputAction.next,
  prefixIcon: Image.asset('assets/images/ic_email.png'),
  controller: _emailTextController, // TextEditingController _emailTextController = TextEditingController()
  validator: FormValidation.emailTextField,
)

通过提供 theme 属性，可以创建具有不同样式的多个文本字段。

MaterialTextField(
  keyboardType: TextInputType.text,
  labelText: 'Name',
  theme: FilledOrOutlinedTextTheme(
    enabledColor: Colors.grey,
    focusedColor: Colors.green,
    fillColor: Colors.transparent,
  ),
  prefixIcon: Image.asset('assets/images/ic_email.png'),
)

高级用法

使用所有可能的参数。

MaterialTextField(
  keyboardType: TextInputType.emailAddress,
  hint: 'Email',
  textInputAction: TextInputAction.next,
  prefixIcon: Image.asset('assets/images/ic_lock.png'),
  controller: _emailTextController,
  validator: FormValidation.emailTextField,
  onChanged: (text) {
    print('First text field: $text');
  },
  suffixIcon: Image.asset('assets/images/ic_lock.png'),
  enabled: false,
  obscureText: true,
  style: const TextStyle(fontSize: 16, color: Colors.black),
  labelText: 'Password',
  theme: FilledOrOutlinedTextTheme(
    enabledColor: Colors.grey,
    focusedColor: Colors.green,
    fillColor: Colors.transparent,
  ), // you can use theme param to differ this text field from app level theming
)

主题设置

应用程序级别主题

您可以使用 MaterialTextFieldTheme 类为文本字段设置主题。这个主题类定义了填充/轮廓和下划线文本字段的主题。您可以使用这个类来设置文本字段的主题。

示例 1（填充文本字段）

MaterialTextField(
  keyboardType: TextInputType.emailAddress,
  hint: 'Email',
  textInputAction: TextInputAction.next,
  prefixIcon: const Icon(Icons.email_outlined),
  suffixIcon: const Icon(Icons.check),
  controller: _emailTextController,
  validator: FormValidation.emailTextField,
)

在应用程序级别的主题文件中定义文本字段样式：

ThemeData(
  inputDecorationTheme: FilledOrOutlinedTextTheme(
    radius: 16,
    contentPadding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
    errorStyle: const TextStyle(fontSize: 16, fontWeight: FontWeight.w700),
    fillColor: Colors.red.withAlpha(50),
    suffixIconColor: Colors.green,
    prefixIconColor: Colors.blue,
  ),
);

输出

Alt text

示例 2（带边框的填充文本字段）

MaterialTextField(
  keyboardType: TextInputType.emailAddress,
  hint: 'Email',
  textInputAction: TextInputAction.next,
  prefixIcon: const Icon(Icons.email_outlined),
  suffixIcon: const Icon(Icons.check),
  controller: _emailTextController,
  validator: FormValidation.emailTextField,
)

在应用程序级别的主题文件中定义文本字段样式：

ThemeData(
  inputDecorationTheme: FilledOrOutlinedTextTheme(
    radius: 30,
    contentPadding: const EdgeInsets.symmetric(horizontal: 4, vertical: 4),
    errorStyle: const TextStyle(fontSize: 16, fontWeight: FontWeight.w700),
    fillColor: Colors.grey.withAlpha(30),
    suffixIconColor: Colors.red,
    prefixIconColor: Colors.blue,
    enabledColor: Colors.grey,
    focusedColor: Colors.green
  ),
);

输出

Alt text

示例 3（带边框的文本字段）

MaterialTextField(
  keyboardType: TextInputType.emailAddress,
  hint: 'Email',
  labelText: 'Email',
  textInputAction: TextInputAction.next,
  prefixIcon: const Icon(Icons.email_outlined),
  controller: _emailTextController,
  validator: FormValidation.emailTextField,
)

在应用程序级别的主题文件中定义文本字段样式：

ThemeData(
  inputDecorationTheme: FilledOrOutlinedTextTheme(
    radius: 8,
    contentPadding: const EdgeInsets.symmetric(horizontal: 4, vertical: 4),
    errorStyle: const TextStyle(fontSize: 16, fontWeight: FontWeight.w700),
    fillColor: Colors.transparent,
    prefixIconColor: Colors.green,
    enabledColor: Colors.grey,
    focusedColor: Colors.green,
    floatingLabelStyle: const TextStyle(color: Colors.green),
    width: 1.5,
    labelStyle: const TextStyle(fontSize: 16, color: Colors.black),
  );
);

输出

Alt text

示例 4（下划线/默认文本字段）

MaterialTextField(
  keyboardType: TextInputType.emailAddress,
  hint: 'Email',
  textInputAction: TextInputAction.next,
  suffixIcon: const Icon(Icons.email_outlined),
  controller: _emailTextController,
  validator: FormValidation.emailTextField,
)

如果要对下划线/默认字段应用主题，请使用 MaterialTextFieldTheme.borderlessTextTheme 函数。

ThemeData(
  inputDecorationTheme: BorderlessTextTheme(
    errorStyle: const TextStyle(fontSize: 16, fontWeight: FontWeight.w700),
    prefixIconColor: Colors.green,
    enabledColor: Colors.grey,
    focusedColor: Colors.green,
    floatingLabelStyle: const TextStyle(color: Colors.green),
    width: 1,
  )
);

输出

Alt text

示例 5（标签文本字段）

LabeledTextField(
  title: 'Password',
  labelSpacing: 8,
  titleStyling: const TextStyle(
    fontSize: 16,
    color: Colors.black,
    fontWeight: FontWeight.w700,
  ),
  child: MaterialTextField(
    keyboardType: TextInputType.emailAddress,
    hint: 'Password',
    textInputAction: TextInputAction.done,
    obscureText: true,
    theme: FilledOrOutlinedTextTheme(
      fillColor: Colors.green.withAlpha(50),
      radius: 12,
    ),
    prefixIcon: Image.asset('assets/images/ic_lock.png'),
    suffixIcon: const Icon(Icons.visibility),
    controller: _passwordTextController,
    validator: FormValidation.requiredTextField,
  ),
);

输出

Alt text

小部件级别主题

直接在小部件上指定样式。

MaterialTextField(
  keyboardType: TextInputType.text,
  hint: 'Full Name',
  labelText: 'Name',
  theme: FilledOrOutlinedTextTheme(
    enabledColor: Colors.grey,
    focusedColor: Colors.green,
    fillColor: Colors.transparent,
  ),
  textInputAction: TextInputAction.next,
  prefixIcon: Image.asset('assets/images/ic_email.png'),
  validator: FormValidation.requiredTextField,
);

作者

DevCrew.IO

联系我们

devcrew.io mycompany devcrew.io devcrew.io DevCrew-io

贡献

欢迎贡献、问题和功能请求！

表达支持

如果这个项目对你有帮助，请给它一个星。

错误和功能请求

如果有错误或功能请求，请先搜索现有的已关闭的问题。如果您的问题或想法尚未解决，请 新建一个问题。

版权与许可证

代码版权归 © 2023–2024 DevCrew I/O 所有。代码发布在 MIT 许可证 下。

示例Demo

import 'package:flutter/material.dart';
import 'package:material_text_fields/labeled_text_field.dart';
import 'package:material_text_fields/material_text_fields.dart';
import 'package:material_text_fields/theme/material_text_field_theme.dart';
import 'package:material_text_fields/utils/form_validation.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Text Fields',
      theme: ThemeData.light(),
      home: const MyHomePage(title: 'Material Text Fields'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<FormState> _key = GlobalKey<FormState>();

  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        centerTitle: false,
      ),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Form(
          key: _key,
          child: SingleChildScrollView(
            child: Column(
              children: [
                const SizedBox(height: 16),
                MaterialTextField(
                  textAlign: TextAlign.center,
                  keyboardType: TextInputType.emailAddress,
                  hint: "Email",
                  textInputAction: TextInputAction.next,
                  prefixIcon: Image.asset('assets/images/ic_email.png'),
                  controller: _emailController,
                  validator: FormValidation.emailTextField,
                ),
                const SizedBox(height: 20),
                MaterialTextField(
                  keyboardType: TextInputType.text,
                  hint: "Full Name",
                  labelText: "Name",
                  maxLines: 2,
                  theme: FilledOrOutlinedTextTheme(
                    enabledColor: Colors.grey,
                    focusedColor: Colors.green,
                    fillColor: Colors.transparent,
                  ),
                  textInputAction: TextInputAction.next,
                  prefixIcon: Image.asset('assets/images/ic_email.png'),
                  validator: FormValidation.requiredTextField,
                ),
                const SizedBox(height: 20),
                MaterialTextField(
                  keyboardType: TextInputType.number,
                  hint: "age",
                  theme: BorderlessTextTheme(),
                  textInputAction: TextInputAction.next,
                  validator: FormValidation.requiredTextField,
                ),
                const SizedBox(height: 20),
                LabeledTextField(
                  title: 'Password',
                  textField: MaterialTextField(
                    keyboardType: TextInputType.emailAddress,
                    hint: 'Password',
                    textInputAction: TextInputAction.done,
                    obscureText: true,
                    theme: FilledOrOutlinedTextTheme(
                      fillColor: Colors.red.withAlpha(50),
                      radius: 80,
                    ),
                    prefixIcon: Image.asset('assets/images/ic_lock.png'),
                    suffixIcon: const Icon(Icons.visibility),
                    controller: _passwordController,
                    validator: FormValidation.requiredTextField,
                  ),
                ),
                const SizedBox(height: 20),
                ElevatedButton(
                  onPressed: onSubmitBtnPressed,
                  child: const Text('Submit'),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

  void onSubmitBtnPressed() {
    if (_key.currentState?.validate() == true) {
      // perform some task.
    }
  }
}

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter项目中使用material_text_fields插件的示例代码。material_text_fields是一个增强版的Material Design文本输入字段插件，它提供了更多定制选项和更好的用户体验。

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

dependencies:
  flutter:
    sdk: flutter
  material_text_fields: ^x.y.z  # 替换为最新版本号

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

接下来，你可以在你的Flutter应用中使用material_text_fields。以下是一个简单的示例，展示如何使用该插件创建一个自定义的文本输入字段：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material Text Fields Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            MTFTextField(
              controller: _controller,
              labelText: 'Name',
              validator: (value) {
                if (value.isEmpty) {
                  return 'Name is required';
                }
                return null;
              },
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                prefixIcon: Icon(Icons.person),
              ),
              style: TextStyle(fontSize: 18),
              onSubmitted: (value) {
                print('Name submitted: $value');
              },
            ),
            SizedBox(height: 20),
            MTFTextField(
              labelText: 'Email',
              keyboardType: TextInputType.emailAddress,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                prefixIcon: Icon(Icons.email),
              ),
              style: TextStyle(fontSize: 18),
              validator: (value) {
                if (!value.contains('@')) {
                  return 'Please enter a valid email address';
                }
                return null;
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 这里可以添加表单验证逻辑
          if (_controller.text.isEmpty || !_controller.text.contains('@')) {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Please fill in the form correctly')),
            );
          } else {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Form submitted')),
            );
          }
        },
        tooltip: 'Submit',
        child: Icon(Icons.send),
      ),
    );
  }

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

在这个示例中，我们做了以下几件事：

  1. 导入material_text_fields包。
  2. 使用MTFTextField替代标准的TextField。MTFTextField提供了更多的定制选项，比如前缀图标、样式等。
  3. 为每个文本字段添加了标签、装饰和验证器。
  4. 使用TextEditingController来控制文本输入，并在按钮点击时检查输入的有效性。

这个示例展示了如何使用material_text_fields插件来创建和定制文本输入字段。你可以根据需要进一步自定义这些字段，以满足你的应用需求。

回到顶部