[Flutter Error]-Making Linear Progress Indicator Responsive

Question

So I've created a Card which hold certain information of a course,It shows the percentage of the course you have completed using a LinearProgressIndicator.

Widget top(BuildContext context) {
return Row(
  children: <Widget>[
    Image.network(
      image,
      height: 100,
      width: 100,
    ),
    SizedBox(
      width: 16,
    ),
    Flexible(
        child: Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(checkTitle(title),
            style: Theme.of(context).textTheme.headline3),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            SizedBox(
              width: MediaQuery.of(context).size.width * 0.5,
              child: LinearProgressIndicator(
                value: int.parse(progress) * 0.01,
                valueColor: AlwaysStoppedAnimation<Color>(LightSeaGreen),
                backgroundColor: Colors.greenAccent,

                // (int.parse(progress)).roundToDouble(),
              ),
            ),
            Text('$progress%')
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [Text(startDate), Text(finishDate)],
        ),
      ],
    )),
  ],
);
}

My output, enter image description here

but when I change the width of my screen I get this error enter image description here

what I want is for the LinearProgressIndicator to be responsive according to the screen width.Please help!!!

Answer 1

Wrap LinearProgressIndicator with Expanded.

            Expanded(
              child: LinearProgressIndicator(
                value: int.parse(progress) * 0.01,
                valueColor: AlwaysStoppedAnimation<Color>(LightSeaGreen),
                backgroundColor: Colors.greenAccent,

                // (int.parse(progress)).roundToDouble(),
              ),
            ),