CODEWITHSUNDEEP
flutterflutter-layout
flutterNoob
flutterNoob

Reputation: 67

Textfield alignment

I want to align my TextField with my text. Currently it looks like this:

enter image description here

I have tried different ways to align it but any way i've tried messed up where I can click to make the TextField active ( can only click right at the top of the text field ) Here is the code:

    Container(
                  padding: EdgeInsets.all(5),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10)),
                  margin: EdgeInsets.all(20),
                  width: 300,
                  height: 45,
                  child: Row(
                    children: <Widget>[
                      Text(
                        'Name: ',
                        style: TextStyle(
                            fontSize: 25, fontWeight: FontWeight.bold),
                      ),
                      Expanded(
                        child: Container(
                          child: TextField(
                            decoration: InputDecoration.collapsed(
//                                border: InputBorder.none,
                                hintText: '                               ',
                                hintStyle: TextStyle(fontSize: 23)),
                            controller:
                                _nameController ?? TextEditingController()
                                  ..text = widget.name,
                            onChanged: (text) => {},
                            style: TextStyle(fontSize: 23),
                          ),
                        ),
                      )
                    ],
                  ),
                )

Thank you

Upvotes: 0

Views: 56

Answers (1)

Marcel Dz
Marcel Dz

Reputation: 2714

enter image description here

I just removed your padding, as it disaligns your elements. Now it works fine.

Container(
                 // padding: EdgeInsets.all(5),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10)),
                 margin: EdgeInsets.all(20),
                  width: 300,
                  height: 45,
                  child: Row(
                    children: <Widget>[
                      Text(
                        'Name: ',
                        style: TextStyle(
                            fontSize: 25, fontWeight: FontWeight.bold),
                      ),
                      Expanded(
                        //child: Container(
                          child: TextField(
                            decoration: InputDecoration.collapsed(
//                                border: InputBorder.none,
                                hintText: '                               ',
                                hintStyle: TextStyle(fontSize: 23)),
                            controller:
                                TextEditingController()
                                  ..text = 'widget.name',
                            onChanged: (text) => {},
                            style: TextStyle(fontSize: 23),
                          ),
                       // ),
                      )
                    ],
                  ),
                )

Upvotes: 1

Related Questions