Flutter TextField border style and prompt text, Flutter input text TextField

Inscription
- Holding the sword in the world, starting from your accumulation, you will strive for perfection wherever you go.

This article was first published on the WeChat public account (biglead), my big front-end career, and published in various technical forums simultaneously.

insert image description here


TextField series of articles


1 Introduction

1.1 Scenario 1

A text box is editable by default (allowing text input) and when it gets focus (text is being entered), there will be a default underline, and the color of this underline is the style in the textTheme theme configured by them in the obtained MaterialApp component.
insert image description here

1.2 Scenario 2

When this box is editable, but it does not get the focus (that is, when it is not inputting), there will also be a style as follows:
insert image description here
the effect different from scene 1 is that the style of the underline is different and there is no cursor

1.3 Scenario 3

In actual development, in some application scenarios, the text input box cannot enter text (by configuring enabled: false), TextFeild will also have different styles as follows:
insert image description here

Taken together, in the above scenarios, TextFeild has different responses in different states.

2 Customize the underline style and outer border style of TextFeild

insert image description here

insert image description here
Source code at a glance, detailed in the comments


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

/// Organization 
//TextField input text decoration configure border style and prompt text analysis 
class  TextFeildHomePage5  extends  StatefulWidget  { 
  @override 
  State < StatefulWidget >  createState ( )  { 
    return  TextFeildHomePageState ( ) ; 
  } 
}

class TextFeildHomePageState extends State {

  ///Used to control the acquisition and closing of the focus of TextField 
  FocusNode focusNode =  new  FocusNode ( ) ; 
  ///Whether the text input box can be edited 
  bool isEnable =  true ;

  @override
  void initState() {
    super.initState();

    
    ///Add a concurrent focusNode for gaining focus and losing focus . addListener ( ( ) { 
      ///Whether the current TextFeild has acquired the input focus 
      bool hasFocus = focusNode . hasFocus ; 
      ///Whether the current focusNode has added a concurrent 
      bool hasListeners = focusNode . hasListeners ;

      print("focusNode 兼听 hasFocus:$hasFocus  hasListeners:$hasListeners");
    });

    /// WidgetsBinding It can monitor the completion of the first frame drawing, and the completion of the first frame drawing indicates that the build has been completed . 
    WidgetsBinding . instance . addPostFrameCallback ( ( _ )  { 
      ///Get the focus of the input box 
      FocusScope . of ( context ) . requestFocus ( focusNode ) ; 
    } ) ; 
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: <Widget>[
          FlatButton(child: Text("获取焦点"),onPressed: (){
            FocusScope.of(context).requestFocus(focusNode);
          },), 
          FlatButton ( child :  Text ( "loses focus" ) , onPressed :  ( ) { 
            focusNode . unfocus ( ) ; 
          } , ) , 
          FlatButton ( child :  Text ( "edit" ) , onPressed :  ( ) { 
            setState ( ( )  { 
              isEnable =  true ; 
            } ) ; 
          } ,) , 
          FlatButton ( child :  Text ( "not editable" ) , onPressed :  ( ) { 
            setState ( ( )  { 
              isEnable =  false ; 
            } ) ; 
          } , ) , 
        ] , 
      ) , 
      body :  Container ( 
        ///SizedBox is used to limit A space 
        child with a fixed width and height :  SizedBox ( 
          width :  400 ,
          height :  130 , 
          child :  Container ( 
            color : Colors . white24 , 
            /// distance from the top 
            margin : EdgeInsets . only ( top :  30 ) , 
            padding : EdgeInsets . all ( 10 ) , 
            ///Alignment is used to align Widget 
            alignment :  Alignment ( 0 ,  0 ) , 
            ///Text input box
            child: TextField(

              ///Whether it can be edited 
              enabled : isEnable , 
              ///The focus gets 
              focusNode : focusNode , 
              ///The style used to configure the TextField 
              decoration :  InputDecoration ( 
                ///Set the prompt text of the input text box 
                ///The input box gets the focus When and no text is 
                entered hintText :  "Please enter the user name" , 
                ///Set the style of the prompt text of the input text box 
                hintStyle :  TextStyle ( color : Colors . grey , textBaseline : TextBaseline . ideographic , ) ,
                ///The prompt in the input box displays 
                labelText :  "Username" , 
                labelStyle :  TextStyle ( color : Colors . blue ) when the input box does not get the focus , 
                /// The text displayed under the input box 
                helperText :  "Here is the help prompt "language" , 
                helperStyle :  TextStyle ( color : Colors . green ) ,

                ///The text displayed under the input box 
                /// will cover the helperText content 
                errorText :  "This is the error text prompt" , 
                errorStyle :  TextStyle ( color : Colors . red ) ,

                ///The front of the input text will be displayed when the input box gets the focus 
                prefixText :  "prefix" , 
                prefixStyle :  TextStyle ( color : Colors . deepPurple ) , 
                ///The input box will only be displayed when the input box gets the focus The back of the input text 
                suffixText :  "suf " , 
                suffixStyle :  TextStyle ( color : Colors . black ) ,

                ///The text displayed in the lower right corner of the text input box 
                ///The text counter defaults to 
                counterText :  "count" , 
                counterStyle : TextStyle ( color : Colors . deepPurple [ 800 ] ) ,

                ///Small icon before input text 
                prefixIcon :  Icon ( Icons . phone ) , 
                /// Small icon after input text 
                suffixIcon :  Icon ( Icons . close ) ,

                /// Cannot be set at the same time with prefixText 
// prefix: Text("A") , 
                /// Cannot be set at the same time as suffixText 
// suffix: Text("B") , 
                /// Set border 
                /// InputBorder.none None Underline 
                /// OutlineInputBorder has borders on top, bottom, left and right 
                /// UnderlineInputBorder only the bottom border uses the bottom border by default 
                border :  OutlineInputBorder ( 
                  ///Set the radians of the four corners of the border 
                  borderRadius : BorderRadius . all ( Radius . circular ( 10 ) ) , 
                  ///The style used to configure the border 
                  borderSide :  BorderSide ( 
                    ///Set the color of the border
                    color : Colors . red , 
                    ///Set the thickness of the border 
                    width :  2.0 , 
                  ) , 
                ) , 
                ///Set the border style when the input box is editable 
                enabledBorder :  OutlineInputBorder ( 
                  ///Set the radian of the four corners of the border 
                  borderRadius : BorderRadius .all ( Radius . circular ( 10 ) ) , ///The style used to configure the border 
                  borderSide : BorderSide ( /// Set the color of the border
                   
                    
                    color : Colors . blue , 
                    ///Set the thickness of the border 
                    width :  2.0 , 
                  ) , 
                ) , 
                disabledBorder :  OutlineInputBorder ( 
                  ///Set the radians of the four corners of the border 
                  borderRadius : BorderRadius . all ( Radius . circular ( 10 ) ) , 
                  / //The style used to configure the border 
                  borderSide :  BorderSide ( 
                    ///Set the color of the border 
                    color :Colors . red , 
                    ///Set the thickness of the border 
                    width :  2.0 , 
                  ) , 
                ) , 
                ///Used to configure the color of the input box when it gets the focus 
                focusedBorder :  OutlineInputBorder ( 
                  ///Set the radians of the four corners of the border 
                  borderRadius : BorderRadius . all ( Radius . circular ( 20 ) ) , 
                  ///The style used to configure the border 
                  borderSide :  BorderSide ( 
                    /// Set the color of the border 
                    color : Colors.green ,
                     /// Set the thickness of the border 
                    width :  2.0 , 
                  ) , 
                ) , 
              ) , 
            ) , 
          ) , 
        ) , 
      ) , 
    ) ; 
  } 
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182

insert image description here

Tags: Flutter TextField border style and prompt text, Flutter input text TextField

A full set of tutorials for Flutter project development Flutter text box Flutter border style

Related: Flutter TextField border style and prompt text, Flutter input text TextField