How to change TextField's height and width?

后端 未结 7 1660
既然无缘
既然无缘 2020-12-13 08:02

How to customise TextField\'s width and height?

相关标签:
7条回答
  • 2020-12-13 08:57

    To adjust the width, you could wrap your TextField with a Container widget, like so:

    Container(              
      width: 100.0,
      child: TextField()
    )
    

    I'm not really sure what you're after when it comes to the height of the TextField but you could definitely have a look at the TextStyle widget, with which you can manipulate the fontSize and/or height

    Container(              
      width: 100.0,
      child: TextField(                                 
        style: TextStyle(
          fontSize: 40.0,
          height: 2.0,
          color: Colors.black                  
        )
      )
    )
    

    Bear in mind that the height in the TextStyle is a multiplier of the font size, as per comments on the property itself:

    The height of this text span, as a multiple of the font size.

    When [height] is null or omitted, the line height will be determined by the font's metrics directly, which may differ from the fontSize. When [height] is non-null, the line height of the span of text will be a multiple of [fontSize] and be exactly fontSize * height logical pixels tall.

    Last but not least, you might want to have a look at the decoration property of you TextField, which gives you a lot of possibilities

    EDIT: How to change the inner padding/margin of the TextField

    You could play around with the InputDecoration and the decoration property of the TextField. For instance, you could do something like this:

    TextField(                                
        decoration: const InputDecoration(
            contentPadding: const EdgeInsets.symmetric(vertical: 40.0),
        )
    )
    
    0 讨论(0)
提交回复
热议问题