get height of element on buildtime to adapt element in stack

Question

I want to have the background color of my ListTile be like a progressbar. Only some parts of it should be colorized depending on a double value.

I use the following code:

InkWell(
    child: Stack(
      alignment: Alignment.centerRight,
      children: [
        Container(
            width: 100.w,
            child: FractionallySizedBox(
              alignment: Alignment.centerLeft,
              widthFactor: getAnswerScore(index),
              child: Container(
                color: Colors.purpleAccent,
                child: Text(""),
              ),
            )),
        ListTile(
            contentPadding: EdgeInsets.all(0),
            title: Text("my Text",
              style: TextStyle(fontSize: 14.sp),
            ),
            leading: Radio(
              activeColor: Colors.purple,
              value: index,
              groupValue: answer,
              onChanged: (int value) {
                onClick(index);
              },
            )),
        getResultIcon(index)
      ],
    ),
    onTap: () {
      onClick(index);
    }
);

this results in this (factor 0.5)

the width is set correctly (the purple container) but I need the height to be set to the height of the ListTile. The problem is, that the height of the listTile depends on the length of the child title. So this is set dynamically on build time.

What would be the correct approach to fix this?

Answer 1

You can use Positioned.fill with Container to fill the background and FractionallySizedBox used to fill Container's color.

InkWell(
    child: Stack(
      alignment: Alignment.centerRight,
      children: [
        Positioned.fill(
          child: FractionallySizedBox(
            alignment: Alignment.centerLeft,
            widthFactor: sliderValue,
            child: Container(
              color: Colors.purpleAccent,
              child: Text(""),
            ),
          ),
        ),

To have a partial progress bar, Use Positioned widget with providing top and bottom 0.

InkWell(
    child: Stack(
      alignment: Alignment.centerRight,
      children: [
        Positioned(
          top: 0,
          bottom: 0,
          left: 0, // left and right is based on your max progress value
          right: 100,
          child: FractionallySizedBox(
            alignment: Alignment.centerLeft,
                        widthFactor: sliderValue,

Answer 2

You can use ConstrainedBox to set a minimum height on your purple Container.

ConstrainedBox(
  constraints: const BoxConstraints(
    minHeight: 70,
  ),
  child: Container(...),
),

Answer 3

I think wrapping your outer Container with a positioned and setting top and bottom to 0 would solve your problem.