mirkancal
mirkancal

Reputation: 5345

How to position two widget in a same Row?

I have a Country code(DropdownMenu) and phone (TextFormField), how can I put them in same level? I've tried Align widget.

Row(
                children: <Widget>[
                  Flexible(
                    flex: 1,
                    child: DropdownButtonFormField(
                      value: _selectedCountryCode ?? 'TR',
                      onChanged: (value) {
                        setState(() {
                          _selectedCountryCode = value;
                        });
                      },
                      items: countryCodes,
                    ),
                  ),
                  Flexible(
                    flex: 4,
                    child: Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: TextFormField(
                        decoration: InputDecoration(labelText: "Phone"),
                      ),
                    ),
                  ),
                ],
              ),

screenshot

Upvotes: 3

Views: 3463

Answers (1)

mirkancal
mirkancal

Reputation: 5345

Thanks to @danish-khan-I, I solved using crossAxisAlignment: CrossAxisAlignment.baseline. But you also have to provide textBaseline otherwise it gives an exception.

So in my row I've used:

crossAxisAlignment: CrossAxisAlignment.baseline
textBaseline: TextBaseline.ideographic,

Upvotes: 14

Related Questions