How to resize in flutter with flexible

Question

I'm using flexible to make it responsible

  Widget build(BuildContext context) {
return Scaffold(
  body: Stack(
    children: [
      SafeArea(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          //Creating timer for white side
          Flexible(child: TimerBox(WhiteSideColor, WhiteSideRotation),),

          //Creating buttons in the middle
          Flexible(child: SizedBox(child: ButtonsInTheMiddle(),)),

          //Creating timer for black side
          Flexible(child: TimerBox(BlackSideColor, BlackSideRotation)),
        ],
      ))
    ],
  ),
); 
}

And I want to make it like this picture below, but i can't resize the Flexible widget in the middle, I tried sizedbox and FractionallySizedBox. And thanks in advance for helping.

PD: I draw some green/blue (i can't tell the color) line boxes arounds that is the size I want to make for the widgets

Solution 1

You can add the flex factor to each Flexible widget to decide what it's size will be compared to the other Flexible widgets. https://api.flutter.dev/flutter/widgets/Flexible/flex.html

Solution 2

I don't think if I really understand. Do you want to make the middle button has some size? If you want a specific size, use SizedBox to give a height and width, and in its child pass your desired size. If not, use flex factor to Flexible

Comments

[Raul Penate]

Yeah it worked, I tried before but I didn't fully read how it works. Thanks <3 !!! imgur.com/qMZSAdb

[Raul Penate]

Yeah i ended using flex thanks to Yair, It was my bad for not fully reading how flex works, thanks for your interest. imgur.com/qMZSAdb