Material 文本框

pub package license

Material 文本框是一个可自定义的 Dart 文本输入小部件。您可以在应用的 theme 文件中定义文本框的样式，或者创建多个具有不同样式的文本框。您可以轻松创建具有可自定义样式和行为的文本输入字段。

安装

要在您的 Dart 项目中使用 Material 文本框，请将以下依赖项添加到您的 “pubspec.yaml” 文件中

dependencies:
material_text_fields: ^<latest-version>

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

在您的库中添加以下导入

import 'package:material_text_fields/material_text_fields.dart';

用法

要在您的 Flutter 应用中使用 Material 文本框，请导入该包并创建一个新的 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,
                // You can use all properties of FilledOrOutlinedTextTheme
                // to decor text field
              ),
              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
              )

主题化

要定义文本框的样式，您可以选择使用应用级别的 theme 文件，或直接在小部件上指定样式。

应用级别 theme

您可以使用 MaterialTextFieldTheme 类进行文本框主题化。这个 Theme 类定义了填充式/轮廓式和下划线式文本框的主题。您可以使用此类进行文本框主题化。

示例 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,
      )

要在您的应用级别 theme 文件中定义文本框样式，请将以下代码添加到您的 ThemeData 中

    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,
       )

要在您的应用级别 theme 文件中定义文本框样式，请将以下代码添加到您的 ThemeData 中

    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,
    )

要在您的应用级别 theme 文件中定义文本框样式，请将以下代码添加到您的 ThemeData 中

     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

小部件级别 theme

您可以直接在小部件上指定样式

    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

贡献

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

表示您的支持

如果此项目对您有帮助，请给个 star。

Bug 和功能请求

有 Bug 或功能请求？请先搜索现有和已关闭的问题。如果您的问题或想法尚未得到解决，请提交新问题。

版权和许可

代码版权 2023–2024 DevCrew I/O。代码根据 MIT 许可证发布。

GitHub

查看 Github