0

I want to make a simple calculator application in Flutter. After three days of work, I couldn't get it to behave as designed at different resolutions and screen sizes.

The home screen is divided into 3 areas:

  1. A top area, where the operations history is shown
  2. A middle area, for the calculator display of the current computation
  3. A bottom area for the keyboard.

This screenshot of the design can be helpful to understand the global idea

The display and keyboard areas have the constraints of minHeight and maxHeight and all the free top space of the screen is used to shows the operation history (who has only a minHeight constraints).

The display and keyboard areas try to use their maxHeight until the screen height is small enough to activate the minHeight of the top area.

As the height of the screen continues to shrink, the display and keyboard areas shrink proportionally until they reach their minHeight.

I've code this toy example but it's not has the desired behavior:

class HomePage extends StatelessWidget {
  const HomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(children: <Widget>[
      Expanded(
        child: ConstrainedBox(
          constraints:
              BoxConstraints(maxHeight: double.infinity, minHeight: 20),
          child: Container(
            color: Colors.red,
          ),
        ),
      ),
      Expanded(
          child: ConstrainedBox(
        constraints: BoxConstraints(maxHeight: 100, minHeight: 50),
        child: Container(
          color: Colors.blue,
        ),
      )),
      Expanded(
          child: ConstrainedBox(
        constraints: BoxConstraints(maxHeight: 400, minHeight: 300),
        child: Container(
          color: Colors.green,
        ),
      )),
    ]));
  }
}

Can anyone guide me to achieve the described behavior of the three areas as the screen height change?

Thank you very much!

Regards

Cesar Verdes
  • 1
  • 3
  • add flex:0, to expanded,`Expanded(flex:0,child:ConstrainedBox(....))`@Cesar Verdes – Abhijith Oct 20 '20 at 05:33
  • Dear @Assassin. adding the flex:0 to the expended, It still have two problems: 1. As the screen shrink its height It is not respected the minHeight of the top area, the top area height goes to zero... and 2. As soon the screen height is a pixel less than the sum of the maxHeight of the middle and bottom area, the bottom overflow. – Cesar Verdes Oct 20 '20 at 14:06
  • I fount these question that ask the same thing in a simpler way: [specific min and max size for expanded widgets in Column](https://stackoverflow.com/questions/56417186/specific-min-and-max-size-for-expanded-widgets-in-column) and [flutter - correct way to create a box that starts at minHeight, grows to maxHeight](https://stackoverflow.com/questions/48675781/flutter-correct-way-to-create-a-box-that-starts-at-minheight-grows-to-maxheig) but sadly they don't have an answer that solves it – Cesar Verdes Oct 20 '20 at 17:34

0 Answers0