Flutter - make button fill the entire container

Question

I am very new to Flutter and I trying to make button fill the entire parent container. I want to create two buttons each of them 50% of device height and 100% width using two Flexible with flex parameters.

This is What I have:

Flexible(
  flex: 1,

  child: Container(
    color: Color.fromARGB(255, 20, 20, 20),
    alignment: Alignment.center,
            
   child: ElevatedButton(
     child:Text('$_counter1'),
     onPressed: _pop1,
    ),

  ),
),

Everyday I create websites using CSS and HTML and here in Flutter everything works completly diferent. It's hard to understand the code at the begining. With CSS I cloud only add 100% width and height and done but here I am little bit lost.

This is What I am trying to get:

Add UI visuals of what you are trying to achieve – Prashant Aug 21 '22 at 16:12 — Prashant, Aug 21 '22 at 16:12

score 0 · Answer 1 · answered Aug 21 '22 at 16:20

With flutter, you can use Column, Expanded

Column(
          children: [
            Expanded(
              flex: 1,
              child: Container(
                color: const Color.fromARGB(255, 20, 20, 20),
                alignment: Alignment.center,
                child: ElevatedButton(
                  child: Text('Button 1'),
                  onPressed: (){},
                ),
              ),
            ),
            Expanded(
              flex: 1,
              child: Container(
                color:  Colors.green,
                alignment: Alignment.center,
                child: ElevatedButton(
                  child: Text('Button 2'),
                  onPressed: (){},
                ),
              ),
            ),
          ],
        )

DTodt · Answer 2 · 2022-08-21T17:55:20.083

You could combine Column with cross axis alignment strech to achieve this. Like so:

  Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Expanded(
        child: Container(
          color: Colors.grey,
          child: TextButton(
            onPressed: () {},
            child: Text(
              'Button 1',
              style: Theme.of(context).textTheme.headline2!.copyWith(
                    color: Colors.grey.shade700,
                  ),
            ),
          ),
        ),
      ),
      Expanded(
        child: Container(
          color: Colors.grey.shade700,
          child: TextButton(
            onPressed: () {},
            child: Text(
              'Button 2',
              style: Theme.of(context).textTheme.headline2!.copyWith(
                    color: Colors.grey,
                  ),
            ),
          ),
        ),
      ),
    ],

Running example: https://dartpad.dev/?enchanted-pomelo-5708

score 0 · Answer 3 · answered Aug 21 '22 at 17:26

you are almost right. Flexible takes only the needed space. if you want to takes all space available like 100% then you need to add another properties for Flexible : https://stackoverflow.com/a/52646036/12838877

Flexible(
  fit: FlexFit.tight,
  child: Foo(),
);

or is just shorthand with Expanded

Flexible(
  fit: FlexFit.tight,
  child: Foo(),
);

for comparison : reff

as you can see, Flexible will only take as minimum space needed. and by default expanded will take 100% available space.

if you want to modify, you just change the flex value

Flutter - make button fill the entire container

3 Answers3