Shutter input box assembly

Flutter Input box components

Basic attributes

autofocus： Get focus automatically .

obscureText： Password input box .

showCursor & cursorWidth & cursorRadius & cursorColor： Whether the cursor displays 、 Cursor width 、 Round corners 、 Color .

textAlign： Horizontal alignment of text .

textAlignVertical： Vertical alignment of text .

style： Text style .

maxLength： Input box maximum length .

inputFormatters： Format the contents of the input box , Value allows you to enter data in the specified format .
	- FilteringTextInputFormatter.allow(RegExp("[a-zA-Z]"))： Only a-zA-Z.
	- FilteringTextInputFormatter.digitsOnly： Number only 1-9.

decoration：TextField Decoration of components , The type is InputDecoration, You can set the text 、 Tip text 、 Patterns, etc .
	- labelText：label Text .
	- labelStyle：label Text style 
	- hintText： Prompt text when the input box is empty .
	- hintStyle：hint Text style .
	- icon： The icon in front of the input box 
	- prefixIcon： The icon in front of the input box .
	- prefix： Input the front components in the box .
	- contentPadding： padding .

controller： Used to control the input box , Listen for changes in the input box 、 Set default text 、 Check the contents of the input box .

onChange： Listen for changes in the input box .

onTap： Callback when clicking the input box .

onSubmitted： Call back when you click the Enter key on the soft keyboard .

keyboardType： Control the type of soft keyboard input 
    - text： Universal keyboard .
    - multiline： Multiline text , Support line break , Need to cooperate with maxLines Use .
    - number： The keypad .
    - phone： The phone keyboard , Compared with the number keyboard “*” and “#”.
    - datetime： Date time keyboard .
    - emailAddress： Mail keyboard .
    - url：url Input keyboard .
    - visiblePassword： Letter and number keyboards .

textInputAction： Soft keyboard enter icon .

Easy to use

final TextEditingController _usernameController = TextEditingController();
final TextEditingController _descController = TextEditingController();
var descriptionCount = "";

@override
void initState() {
    // Monitoring content changes 
    _usernameController.addListener(() {
        print(" Content monitoring 1：${_usernameController.text}");
    });

    // Set the default value 
    _descController.text = "helloworld";
    // Set selection text 
    _descController.selection = TextSelection(
        baseOffset: 0,
        extentOffset: _descController.text.length,
    );
    super.initState();
}

@override
void dispose() {
    _usernameController.dispose();
    _descController.dispose();
    super.dispose();
}

TextField(
    controller: _usernameController,
    inputFormatters: [
        FilteringTextInputFormatter.allow(RegExp("[a-zA-Z]")),
    ],
    decoration: const InputDecoration(
        labelText: " user name ",
        hintText: " Please enter a user name ( Only English characters are allowed )",
        prefixIcon: Icon(Icons.person),
    ),
    onChanged: (value) {
        print(" Content monitoring 2：$value");
    },
),
TextField(
    inputFormatters: [
        FilteringTextInputFormatter.allow(RegExp("[a-zA-Z0-9.]")),
    ],
    decoration: const InputDecoration(
        labelText: " mailbox ",
        hintText: " Please enter your email account ",
        prefixIcon: Icon(Icons.mail),
    ),
    keyboardType: TextInputType.emailAddress,
),
TextField(
    inputFormatters: [
        FilteringTextInputFormatter.digitsOnly,
    ],
    decoration: const InputDecoration(
        labelText: " password ",
        hintText: " Please input a password （ Allow input only 6 Bit is the number above ）",
        prefixIcon: Icon(Icons.lock),
    ),
    keyboardType: TextInputType.number,
    obscureText: true,
),
TextField(
    autofocus: true,
    maxLines: 3,
    maxLength: 32,
    controller: _descController,
    onChanged: (value) {
        setState(() {
            descriptionCount = value;
        });
    },
    decoration: InputDecoration(
        labelText: " describe ",
        hintText: " Please enter a description ",
        prefixIcon: const Icon(Icons.description),
        counterText: "${descriptionCount.length}/32",
    ),
    keyboardType: TextInputType.multiline,
)

Focus control

Focus control can be achieved by FocusNode and FocusScopeNode To control . In general , Simple by FoucusNode management , It represents the focus control area , You can go through... In this range FocusScopeNode Move focus between input boxes 、 Set default focus etc .

FocusNode focusNode1 = FocusNode();
FocusNode focusNode2 = FocusNode();
FocusScopeNode? focusScopeNode;

@override
void dispose() {
    focusNode1.dispose();
    focusNode2.dispose();
    focusScopeNode?.dispose();
    super.dispose();
}

TextField(
    autofocus: true,
    focusNode: focusNode1,
    decoration: const InputDecoration(
        labelText: "input1",
    ),
),
TextField(
    autofocus: true,
    focusNode: focusNode2,
    decoration: const InputDecoration(
        labelText: "input2",
    ),
),
ElevatedButton(
    onPressed: () {
        // Mode one 
        FocusScope.of(context).requestFocus(focusNode1);
    },
    child: const Text("input1 Get focus "),
),
ElevatedButton(
    onPressed: () {
        // Mode two 
        focusScopeNode ??= FocusScope.of(context);
        focusScopeNode?.requestFocus(focusNode2);
    },
    child: const Text("input2 Get focus "),
),
ElevatedButton(
    onPressed: () {
        // Mode one 
        focusNode1.unfocus();
        focusNode2.unfocus();
        // Mode two 
        // focusScopeNode?.unfocus();
    },
    child: const Text(" Hidden keyboard "),
),

Custom style 1

Padding(
    padding: EdgeInsets.all(10),
    child: TextField(
        textAlign: TextAlign.center,
        decoration: InputDecoration(
            fillColor: Color(0x30cccccc),
            filled: true,
            hintText: "QQ/ mailbox / cell-phone number ",
            enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(100)),
                borderSide: BorderSide(color: Colors.grey),
            ),
            focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(100)),
                borderSide: BorderSide(color: Colors.black),
            ),
        ),
    ),
)

Custom style 2

final FocusNode focusNode1 = FocusNode();
final FocusNode focusNode2 = FocusNode();
bool _hasFocus1 = false;
bool _hasFocus2 = false;

@override
void initState() {
    super.initState();
    focusNode1.addListener(() {
        if (_hasFocus1 != focusNode1.hasFocus) {
            setState(() {
                _hasFocus1 = focusNode1.hasFocus;
            });
        }
    });

    focusNode2.addListener(() {
        if (_hasFocus2 != focusNode2.hasFocus) {
            setState(() {
                _hasFocus2 = focusNode2.hasFocus;
            });
        }
    });
}

@override
void dispose() {
    focusNode1.dispose();
    focusNode2.dispose();
    super.dispose();
}

Padding(
    padding: const EdgeInsets.all(10),
    child: Column(
        children: [
            Container(
                child: TextField(
                    focusNode: focusNode1,
                    cursorColor: Colors.black,
                    decoration: InputDecoration(
                        labelText: " user name ",
                        labelStyle: TextStyle(
                            color: _hasFocus1 ? Colors.black : Colors.grey,
                        ),
                        hintText: " Please enter a user name ",
                        prefixIcon: Icon(
                            Icons.people,
                            color: _hasFocus1 ? Colors.red : Colors.grey,
                        ),
                        border: InputBorder.none,
                    ),
                ),
                decoration: BoxDecoration(
                    border: Border.all(
                        color: _hasFocus1 ? Colors.red : Colors.grey,
                        width: 1,
                    ),
                    borderRadius: const BorderRadius.all(Radius.circular(10)),
                ),
            ),
            const SizedBox(
                height: 5,
            ),
            Container(
                child: TextField(
                    focusNode: focusNode2,
                    cursorColor: Colors.black,
                    decoration: InputDecoration(
                        labelText: " password ",
                        labelStyle: TextStyle(
                            color: _hasFocus2 ? Colors.black : Colors.grey,
                        ),
                        hintText: " Please input a password ",
                        prefixIcon: Icon(
                            Icons.lock,
                            color: _hasFocus2 ? Colors.red : Colors.grey,
                        ),
                        border: InputBorder.none,
                    ),
                    obscureText: true,
                ),
                decoration: BoxDecoration(
                    border: Border.all(
                        color: _hasFocus2 ? Colors.red : Colors.grey,
                        width: 1,
                    ),
                    borderRadius: BorderRadius.circular(10),
                ),
            ),
        ],
    ),
)