Inscription
- Holding the sword in the world, starting from your accumulation, wherever you go, you must strive for perfection, that is, toss every day.

important news

• For those who are proficient, you can check it out here
• Flutter's UI basics video from getting started practice to developing an APP
• From entry to mastery of flutter series of articles

TextField series of articles

• The basic use of TextField and the common properties of TextField
• TextField focus acquisition control chapter "click to view details"
• TextField input text style TextStyle article "In progress"
• TextField input text textAlign alignment analysis article "This is the article"
• TextField input text decoration configure border style and prompt text analysis article "in progress"
• TextField TextEditingController analysis article "In progress"

When we use a TextField to build an input box, it will have the following effects:

In the development of actual applications, sometimes we want the input text to be center-aligned or right-aligned, so it applies to what I described in this article. , we must strive for perfection whenever a content is involved.

1 TextField input text alignment configuration

In the TextField component, you can configure the TextField input text alignment through the textAlign property. The more advanced usage is to combine the textDirection text direction to configure the input text alignment.

The general text alignment is as follows,

we can easily achieve this through the textAlign property

   // TextAlign.center is centered 
   // TextAlign.left is left aligned TextField defaults to 
   // TextAlign.right is right aligned

• 1
• 2
• 3

Then for the following values

   // TextAlign.start text start position alignment 
   // TextAlign.end text end position alignment

• 1
• 2

It is related to the drawing direction of the


text. It can be seen from the above figure that the text drawing direction is nothing more than left to right or right to left, which can be configured through the textDirection property of TextField.

/// TextDirection.ltr left to right Text from left to right 
/// TextDirection.rtl right to left Text from right to left

• 1
• 2

2 Code implementation and configuration instructions

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

/// Organization 
///TextField input text textAlign 
class  TextFeildHomePage4  extends  StatefulWidget  { 
  @override 
  State < StatefulWidget >  createState ( )  { 
    return  TextFeildHomePageState ( ) ; 
  } 
}

class TextFeildHomePageState extends State {


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

  }

  @override 
  Widget build ( BuildContext context )  { 
    return  Scaffold ( 
      appBar :  AppBar ( 
        title :  Text ( "TextField Explanation" ) , 
      ) , 
      body :  Container ( 
        ///SizedBox is used to limit a space with a fixed width and height 
        child :  SizedBox ( 
          width :  400 , 
          height :  100 , 
          child :  Container (
            color : Colors . white24 , 
            padding : EdgeInsets . all ( 10 ) , 
            ///Alignment is used to align Widget 
            alignment :  Alignment ( 0 ,  0 ) , 
            ///Text input box 
            child :  TextField ( 
              ///Enter text in the input box Center Align 
              ///Set the alignment of the text 
              // TextAlign.center Center 
              // TextAlign.left Left-align TextField defaults 
              // TextAlign.right Right-align 
              // TextAlign.justify Stretches the end-of-text line to fill the container Width. It takes effect even if decorationStyle is used
              // TextAlign.start uses textDirection for text direction 
              // TextDirection.ltr TextAlign.start left 
              // TextDirection.rtl TextAlign.start right 
              // TextAlign.end 
              // TextDirection.ltr TextAlign.end right 
              // TextDirection. rtl TextAlign.end left-aligned 
              textAlign : TextAlign . start , 
              /// Used to set the drawing direction of the text 
              /// TextDirection.ltr left to right Text from left to right 
              /// TextDirection.rtl right to left Text from right Left 
              textDirection : TextDirection .rtl , ) , ) , ) , ) , ) ; _
            
          
        
      
    
  } 
}

• 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