flutter_textfiled_util

The custom input box can implement the TextView function of iOS, that is, it can support multi-line text input, support basic text operations such as scrolling and maximum character limit, and is convenient for users to input and edit text.

Import the library into the project

dependecies:
  flutter_textfiled_util: ^2.0.0

And the following shows how to export that object

import 'package:flutter_textfiled_util/flutter_textfiled_util.dart'

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 点击按钮有高亮背景色及水波纹 都设置透明色
        highlightColor: const Color.fromRGBO(1, 0, 0, 0.0),
        splashColor: const Color.fromRGBO(1, 0, 0, 0.0),
        cardColor: const Color.fromRGBO(1, 1, 1, 0.65),
        primarySwatch: Colors.blue,
      ),
      home: const CustomTextFiledPage(),
      // home: const TextFiledPage(),
      // home: const TextViewPage(),
      // home: const LoginTextFiledPage(),
    );
  }
}

How to use custom_textfiled_util

The custom input box can implement the TextView function of iOS, that is, it can support multi-line text input, support basic text operations such as scrolling and maximum character limit, and is convenient for users to input and edit text, etc.

CustomTextFieldInput(
    title: 'title',
    controller: controller,
    hintText: 'please enter',
    isPassword: false,
    // borderBgColor: Colors.blue,
    // radius:20,
    regexString: regexNoNull,
    onChanged: (text) {
        setState(() {
            // Interaction logic processing response event
        });
    },
),

How to use login_textfiled_util

The login_textfiled_util is different from the login_textfiled_util input box: the focus of the input box is centered, and the input box has left and right buttons to meet the corresponding needs, etc.

LoginTextFieldInput(
    controller: controller,
    hintText: 'please enter',
    isPassword: false,
    isDownArrow: false,
    regexString: regexNoNull,
    historyRecordAction: () {
        setState(() {
            // Interaction logic processing response event
        });
    },
    onChanged: (text) {
        setState(() {
            // Interaction logic processing response event
        });
    },
    closeHistoryRecordList: () {
        setState(() {
            // Interaction logic processing response event
        });
    },
),

How to use textfiled_util

1、When the input state starts and ends, the background of the input box is gray and has no border 2、When inputting, and when the input is correct, the background color of the input box is white, with a blue border and a blue shadow on the outer edge 3、When entering, and when the input is wrong, the background color of the input box is white, with a red border, and a red shadow on the outer edge

TextFieldInput(
    title: 'title',
    controller: controller,
    hintText: 'please enter',
    isError: false,
    regexString: regexNoNull,
    onChanged: (text) {
        setState(() {
            // Interaction logic processing response event
        });
    },
),

How to use textview_util

TextView is used to display editable text content on the screen, where users can enter, modify, delete, select text and other operations. Its appearance is similar to a text box, but unlike a text box, TextView can automatically scroll text content, support text styles and formatting, and respond to user touch events 1、When there is no focus and the input state is over, the background of the input box is gray and has no border 2、With focus, the background color of the input box is white, with a blue border and a blue shadow on the outer edge

TextViewInput(
    title: 'title',
    describeHint: 'Here are the relevant hints',
    controller: controller,
    hintText: 'please enter',
    regexString: regexNoNull,
    outsideBoxH: 120,
    onChanged: (text) {
        setState(() {
            // Interaction logic processing response event
        });
    },
),

How to use textinputformatter_util

Custom TextInputFormatter text input filter

TextField(
    controller: widget.controller,
    focusNode: _focusNode,
    decoration: InputDecoration( ... ),
    inputFormatters: <TextInputFormatter>[
        RegexFormatter(regex: RegexUtil.regexNoNull),
        // The maximum input character limit, the default is 16
        LengthLimitingTextInputFormatter(16) 
    ]
)