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

flutter 6 buttons 2 row dont take all space

I want to make view with 6 buttons in 2 rows ( 1 row – 3 buttons).
My problem is the buttons dont take all free space.
Probably row is limiting space but i dont know how to fix it.
I was trying to use Expanded but it not help.
It must be buttons or something else wchich have onPress action and frame with color wchich i can change.
https://imgur.com/IzKGX0D

    return Scaffold(
      backgroundColor: Colors.green,
      body: Container(
        child: Column(
            children: <Widget>[
              Expanded(
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: OutlinedButton(
                        child: Text('test'),
                        onPressed: () => null,
                      ),
                    ),
                    Expanded(
                      child: OutlinedButton(
                        child: Text('test'),
                        onPressed: () => null,
                      ),
                    ),
                    Expanded(
                      child: OutlinedButton(
                        child: Text('test'),
                        onPressed: () => null,
                      ),
                    )
                  ],
                ),
              ),
              Expanded(
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: OutlinedButton(
                        child: Text('test'),
                        onPressed: () => null,
                      ),
                    ),
                    Expanded(
                      child: OutlinedButton(
                        child: Text('test'),
                        onPressed: () => null,
                      ),
                    ),
                    Expanded(
                      child: OutlinedButton(
                        child: Text('test'),
                        onPressed: () => null,
                      ),
                    )
                  ],
                ),
              )
            ],
          ),
      ),
    );
Tags:

2

Answers


  1. 0

    That’s because you are using a predefined widget OutlinedButton that has some constraints, that’s what you see the height is fixed.

    The beauty of Flutter is you can create any widget you want, this is a sample widget I created for you:

    class MyOwnButton extends StatelessWidget {
  const MyOwnButton({
    required this.child,
    this.onPressed,
    super.key,
  });

  final Widget child;
  final VoidCallback? onPressed;

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black, width: 2),
      ),
      child: InkWell(
        onTap: onPressed,
        child: Center(
          child: child,
        ),
      ),
    );
  }
}

    Now just replace OutlinedButton by MyOwnButton (or change the name if you want).

    Example:

    ...
                  Expanded(
                      child: MyOwnButton(
                        child: Text('test'),
                        onPressed: () => null,
                      ),
                    ),
                    Expanded(
                      child: MyOwnButton(
                        child: Text('test'),
                        onPressed: () => null,
                      ),
                    ),
...

    Result:

    enter image description here

    Dartpad sample: https://dartpad.dev/?id=0802859474f1a2f855e9153141302bce

    Of course you can change the color of the borders or background.

    Login or Signup to reply.
  2. 0

    if i understand your question correctly, you want to your button get all possible width and height.
    for this you can set Style to your buttons.
    for instance one of your button convert to this:

    OutlinedButton(
    style: OutlinedButton.styleFrom(
              minimumSize: Size.fromWidth(40),),
    child: Text('test'),
    onPressed: () => null,
)

    because of "Expanded" min width(40) ignore in rendering.

    or your can create stateless custom view and handle it by yourself.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search