CODEWITHSUNDEEP
flutterdart
James Widjaja
James Widjaja

Reputation: 23

How to align a TextField and a Text on the same level

I'm trying to align horizontal bottom 1 Text and 1 TextField value using Row, but TextField value always higher than the left Text.

is it possible to align horizontal bottom Text and TextField value even when the font-size more bigger ?

Here are my code and screenshot: 

body: Column(  
            children: <Widget>[
                    Row(
                    children: <Widget>[
                        Text('Number 1 : '),
                        Expanded(
                            child:
                            TextField(
                                textAlign: TextAlign.start,
                                textAlignVertical: TextAlignVertical.bottom,
                                textCapitalization: TextCapitalization.sentences,
                                maxLength: 10,
                            ),
                        ),  

                    ]),

                ],
            )

Upvotes: 2

Views: 1052

Answers (1)

Kirill Matrosov
Kirill Matrosov

Reputation: 6010

You should set textBaseline and crossAxisAlignment for Row.

Row(
    crossAxisAlignment: CrossAxisAlignment.baseline, // <--
    textBaseline: TextBaseline.alphabetic, // <--
    children: <Widget>[
        Text('Number 1 : '),
    ...

It will look like this enter image description here

Upvotes: 4

Related Questions