Question

I am trying to align the icon button to the right of the Text field, I tried the row which made the icon button not centered vertically and now I am trying out the Stack widget. Here is my code -

   
    Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Image.asset(
                 assets/images/phone_number.png ,
                width: 400,
                height: 400,
                opacity: const AlwaysStoppedAnimation(.5),
              ),
              Stack(
                alignment: AlignmentDirectional.bottomCenter,
                children: [
                  IntlPhoneField(
                    decoration: const InputDecoration(
                      labelText:  Lets start with your phone number ,
                      focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.green, width: 1.0),
                      ),
                    ),
                  ),
                  IconButton(
                    color: Colors.green,
                    iconSize: 90,
                    icon: const Icon(Icons.arrow_right),
                    onPressed: () => nextScreen(2),
                  ),
                ],
              ),
            ],
          ),

UPDATE - 23/05/2023

Seyit - You answer was my first attempt at this. The issue I had with that setup was the icon button was not centered horizontally.

The second option I tried which is the code above I was able to center everything horizontally but was not able to push the icon button to the far right.

The first one is with the row and the second one is with the Stack widget.

Answer 1

The reason for this is that you are trying to place two widgets in a horizontal alignment, one of which is a TextField. The TextField, by its nature, tries to occupy the entire horizontal space, pushing the other element you added out of the screen and causing an error. To resolve this issue, you can use a simple technique called the Expanded widget. With the Expanded widget, you can determine how much space each widget can occupy within a Row or Column. Here is an example code:

Column(
      children: [
        Text("First Item"),

        // PhoneField and IconButton
        Row(
          children: [
            const Expanded(
              flex: 3,
              child: TextField(
                // IntlPhoneField is also a TextField
              ),
            ),
            Expanded(
              flex: 1,
              child: IconButton(
                onPressed: () {},
                icon: Icon(Icons.arrow_right),
              ),
            ),
          ],
        ), // end of the row 

        Text("Last Item"),
      ],
    ),

By enclosing the TextField and IconButton widgets with Expanded, you ensure that they share the horizontal space. The TextField, inside the Expanded with a flex value of 3, will take up 3 units of width, while the IconButton, inside the Expanded with a flex value of 1, will take up 1 unit of width. As a result, the two widgets will be aligned side by side.

友情链接