How to use Intrinisic Height for column in flutter

Question

I'm struggling with building a fraction in Flutter.

I would like my Column to render two independent containers: nominator and denominator. And I would like them to be the same exact size. I mean when the nominator has another fraction in it, the denominator should be the same height.

Is it possible to have a Column with two elements of each size depending on the highest one?

I do NOT want to use Expanded because I use heights dynamically. I use it in the SingleChildScrollView.

I can't predict the exact height because just imagine a fraction like this

1/2 / 3

and I would like a "3" object to have the same height like "1/2".

My code:

Column(
            children: [

              IntrinsicWidth(
                child: Column( children: [

                  numerator,
                  SizedBox(height: 5),
                  fractionBar,
                  SizedBox(height: 5),
                  denominator

                ],),
              )


            ],
          ),

@pskink Just imagine that numerator is 2 times higher than the denominator. I want both of those elements to have a height of numerator. I would like to have it calculated automatically and dynamically. If the denominator is higher than the numerator, the numerator should be as high as the denominator is. That's why I want to use IntrinisicHeight in column, but it seems it doesn't work — Jakub Klementewicz, Nov 24 '20 at 12:13
It doesn't work because it says the height isn't defined, Columns is one of children of SingleChildScrollView and it expands infinitely — Jakub Klementewicz, Nov 24 '20 at 12:22
i never tried `Offstage` but its docs say: *"Offstage can be used to measure the dimensions of a widget without bringing it on screen (yet)."* ... — pskink, Nov 24 '20 at 14:29
Thanks! Checked but there is no answer on how to measure the dimensions with it. — Jakub Klementewicz, Nov 24 '20 at 15:03

score 0 · Answer 1 · edited Dec 05 '20 at 22:26

0

As you sure know, actually in Flutter everything is a Widget, that also means you can store every Widget as a variable and use the getter to get the parameters.

Here's an example code:

import 'package:flutter/material.dart';

class Test extends StatelessWidget {


//saving the Container as variables, your nominator & dominator widgets could be placed as child's inside them
final Container nominator = Container(height: 50.0, color: Colors.purple);
final Container denominator = Container(height: 100.0, color: Colors.red);

double getContainerHeight () { //helper function for dynamically setting the height depending on which widget is bigger.
  var _height;
  nominator.constraints.minHeight < denominator.constraints.minHeight ?
    _height = denominator.constraints.minHeight :
      _height = nominator.constraints.minHeight;
  return _height;
}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(height: 100.0),
            Container(
              height: getContainerHeight(),
              color: Colors.green,
              child: Center(child: nominator),
            ),
            Container(
              height: getContainerHeight(),
              color: Colors.blue,
              child: Center(child: denominator),
            )
          ],
        ),
      )
    );
  }
}

In this example I used Container to wrap the denominator & nominator for an easy access to their height parameters: Container.constraints.minHeight

Also notice that the nominator & denominator get built before the Container in the Column.

Here's the output:

edited Dec 05 '20 at 22:26

halfer

19,824
17
99
186

answered Nov 24 '20 at 13:17

Nuqo

3,793
1
25
37

Thank you for such a detailed descripition but what happens if I can't predict the height both of numerator and the denominator. I mean I create them before I put them in a fraction. Sometimes the nominator might be single number, but sometimes it's a fraction in a numerator etc. – Jakub Klementewicz Nov 24 '20 at 13:57
I mean will this work: nominator.constraints.minHeight even if there is no height defined: Container(height: 50.0, color: Colors.purple); Let's imagine there's something like this Container(child: Text("12")); – Jakub Klementewicz Nov 24 '20 at 13:59
In my case it keeps saying: The getter 'minHeight' was called on null. Receiver: null Tried calling: minHeight – Jakub Klementewicz Nov 24 '20 at 14:02
it should work, if you put them in the variables before the build method (the 'child:' property of the Container variables). Could you provide the code for your nominator? – Nuqo Nov 24 '20 at 14:29
It doesn't work. My code for nominator is much more complicated because it uses recurency. It simply build a row that might be 2 + 3 + 5 * 10 And it might be a fraction itself. I put them in the variables before the build method but it keeps saying constrains are null. – Jakub Klementewicz Nov 24 '20 at 14:40
you are right, sry, maybe this helps you: https://stackoverflow.com/questions/49307677/how-to-get-a-height-of-a-widget – Nuqo Nov 24 '20 at 15:28

How to use Intrinisic Height for column in flutter

1 Answers1