Question 270634 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Align all the widgets of row to top

I have a Row which contains three widget, [icon, button, text]. I want all of them to align at the top. If the text is long everything is fine. But if the text is short, It is not align.

Here is the code: https://pastebin.com/e4iRVSFz

enter image description here

Tags:

3

Answers


  1. 0

    TextButtons have an iternal padding. It helps to remove this by giving a style that removes them like this

        child: TextButton(
      style: TextButton.styleFrom(
        minimumSize: Size.zero, // Set this
        padding: EdgeInsets.zero, // and this
      ),
      onPressed: () {
        // Add your middle widget click logic here
      },
      child: Text(
        'Short',
        style: TextStyle(
          color: Colors.blue,
          decoration: TextDecoration.underline,
        ),
      ),
    ),
    Login or Signup to reply.
  2. 0 
      TextButton(
    style: ButtonStyle(
        alignment: Alignment.topLeft
    ),

    onPressed: () {
      // Add your middle widget click logic here
    },
    child: Text(
      'Short',
      style: TextStyle(
        color: Colors.blue,
        decoration: TextDecoration.underline,
      ),
    ),
  ),

    try add a ButtonStyle to TextButton

    Login or Signup to reply.
  3. 0

    The issue is occur because you use Textbutton here. By default Textbutton has some height and width thats you didn’t see the proper alignment. So replace TextButton with GestureDetector and see the magic.

    Flexible(
                  child: Container(
                    constraints:
                        BoxConstraints(minHeight: 24.0), // Set a minimum height
                    child: TextButton( // use GestureDetector and see the magic
                      onPressed: () {
                        // Add your middle widget click logic here
                      },
                      child: Text(
                        'Short',
                        style: TextStyle(
                          color: Colors.blue,
                          decoration: TextDecoration.underline,
                        ),
                      ),
                    ),
                  ),
                ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search