Flutter文本输入插件bs_flutter_inputtext的使用

Flutter文本输入插件bs_flutter_inputtext的使用

在本教程中，我们将详细介绍如何使用 bs_flutter_inputtext 插件来创建带有不同样式的文本输入框。我们将通过一个完整的示例代码来展示如何实现这些功能。

开始使用

首先，在 pubspec.yaml 文件中添加 bs_flutter_inputtext 依赖：

dependencies:
  ...
  bs_flutter_inputtext: any

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

文本输入

小输入文本（带边框）

以下是一个小输入文本框的例子，它使用了轮廓边框样式。

// 导入必要的包
import 'package:bs_flutter_inputtext/bs_flutter_inputtext.dart';

// 使用BsInput组件创建一个小输入文本框
BsInput(
  size: BsInputSize.sm, // 设置大小为小
  hintText: 'Small input', // 设置提示文字
  controller: TextEditingController(), // 设置控制器
  validators: [
    BsInputValidators.required // 添加必填验证器
  ],
),

小输入文本（底部边框）

以下是一个小输入文本框的例子，它只在底部显示边框。

// 创建一个底部边框的小输入文本框
BsInput(
  style: BsInputStyle.outlineBottom, // 设置样式为底部边框
  size: BsInputSize.outlineBottomSm, // 设置大小为小
  hintTextLabel: 'Small input', // 设置提示文字
  controller: TextEditingController(), // 设置控制器
),

自定义验证器

BsValidator 是一个自定义验证器，你可以使用它来创建自己的验证逻辑。例如：

// 创建一个必填字段验证器
static BsValidator get required => BsValidator(
  validator: (value) {
    String valueValidate = value.toString().trim(); // 去除空格
    if(valueValidate.isEmpty) return "Field cannot be empty"; // 如果为空则返回错误信息

    return null; // 否则返回null表示验证通过
  },
);

完整示例

下面是一个完整的示例代码，展示了如何使用 bs_flutter_inputtext 插件创建各种样式的文本输入框，并包含表单验证功能。

import 'package:bs_flutter_buttons/bs_flutter_buttons.dart';
import 'package:flutter/material.dart';
import 'package:bs_flutter_inputtext/bs_flutter_inputtext.dart';

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  GlobalKey<FormState> _formState = GlobalKey<FormState>();

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Input Text'),
        ),
        body: Scrollbar(
          child: SingleChildScrollView(
            child: Container(
              padding: EdgeInsets.all(20.0),
              child: Form(
                key: _formState,
                child: Column(
                  children: [
                    // 小输入文本框（带边框）
                    Container(
                      margin: EdgeInsets.only(bottom: 20.0),
                      child: BsInput(
                        size: BsInputSize.sm,
                        hintTextLabel: 'Small input',
                        controller: TextEditingController(),
                        validators: [BsInputValidators.required],
                      ),
                    ),
                    // 小输入文本框（底部边框）
                    Container(
                      margin: EdgeInsets.only(bottom: 20.0),
                      child: BsInput(
                        style: BsInputStyle.outlineBottom,
                        size: BsInputSize.outlineBottomSm,
                        hintTextLabel: 'Small input',
                        controller: TextEditingController(),
                        suffixIcon: Icons.remove_red_eye,
                      ),
                    ),
                    // 中等输入文本框（带边框）
                    Container(
                      margin: EdgeInsets.only(bottom: 20.0),
                      child: BsInput(
                        size: BsInputSize.md,
                        hintTextLabel: 'Medium input',
                        controller: TextEditingController(),
                        validators: [BsInputValidators.required],
                      ),
                    ),
                    // 大输入文本框（带边框）
                    Container(
                      margin: EdgeInsets.only(bottom: 20.0),
                      child: BsInput(
                        size: BsInputSize.lg,
                        obscureText: true,
                        hintTextLabel: 'Large input',
                        controller: TextEditingController(),
                      ),
                    ),
                    // 带有前缀和后缀图标的输入框
                    Container(
                      margin: EdgeInsets.only(bottom: 20.0),
                      child: BsInput(
                        style: BsInputStyle.outlineRounded,
                        size: BsInputSize.md,
                        hintText: 'Medium input',
                        controller: TextEditingController(text: 'Testing'),
                        validators: [BsInputValidators.required],
                        prefixIcon: Icons.delete,
                        suffixIcon: Icons.panorama_fish_eye,
                      ),
                    ),
                    // 表单验证按钮
                    Container(
                      margin: EdgeInsets.only(bottom: 20.0),
                      child: BsButton(
                        label: Text('Validate'),
                        prefixIcon: Icons.open_in_new,
                        style: BsButtonStyle.primary,
                        onPressed: () {
                          _formState.currentState!.validate();
                        },
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}