CODEWITHSUNDEEP
flutter
Tolsto
Tolsto

Reputation: 1428

How to add a LinearProgressIndicator to the top of an AlertDialog

I'm trying to add a LinearProgressIndicator to the top of an AlertDialog and I'm struggling with the width of the progress indicator.

Stack(alignment: Alignment(0.0, -0.8), children: [
    AlertDialog(
        title: const Text('Title'),
        content: Column(children: [
          const Text('Content'),
          const SizedBox(height: 50)
        ])),
    Container(
      width: MediaQuery.of(context).size.width * 0.21,
      child: LinearProgressIndicator(
        value: _controller.value,
        semanticsLabel: 'Linear progress indicator',
      ),
    )
    ]);

In the code sample above the width of the LinearProgressIndicator is not dynamic relative to the width of the AlertDialog. Obviously, I want the LinearProgressIndicator to scale with the AlertDialog. How would I achieve that?

enter image description here

Upvotes: 0

Views: 740

Answers (1)

Chirag Bargoojar
Chirag Bargoojar

Reputation: 1214

Instead of adding Title() to AlertBox() you can achieve this by giving only content and making contentPadding:EdgeInsets.zero.

Then you can set the width of the Container holding the LinearProgressIndicator to double.infinity which makes it take all of the available width in it's parent.

Widget build(BuildContext context) {
  return Stack(alignment: Alignment(0.0, -0.8), children: [
    AlertDialog(
      contentPadding: EdgeInsets.zero,
      content: Column(children: [
        Container(
          width:double.infinity,
          child: LinearProgressIndicator(
            value: _controller.value,
            semanticsLabel: 'Linear progress indicator',
          ),
        ),
        const Text('Content'),
        const SizedBox(height: 50)
      ])),
  ]);
}

enter image description here

With Bigger content LinearProgreesIndicator() will not go outside AlertBox()

enter image description here

Upvotes: 1

Related Questions