Flutter LinearProgressIndicator relative height

user_6345958 0
Viewed 177

I am trying to show a progress bar in a container which have few items. The problem is I can't figure out a way to make the progress bar height same as the container (I don't want to make the container fixed height). The few examples of the LinearProgressIndicator I found all uses SizedBox to set a fixed height. How can I set the height of the progress bar relative to the container?

What I have tried -

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        LinearProgressIndicator(
          value: 0.5,
          valueColor: AlwaysStoppedAnimation<Color>(Color(0x88888888)),
        ),
        Container(
          child: Column(children: [
              Text(
                "Title",
                textScaleFactor: 1.2,
                style: TextStyle(color: Colors.white38),
              ),
              Text(
                "Content",
                textScaleFactor: 2,
                style: TextStyle(color: Colors.white),
              )
            ])
        )
      ],
    );
  }
}

DartPad link - https://dartpad.dev/be0ae9c94833d27134256763136cfca1

flutter-layout dart flutter
1 Answers

Solution 1

Use the fit: StackFit.expand parameter for Stack:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      fit: StackFit.expand,
      children: [
        LinearProgressIndicator(
          value: 0.5,
          valueColor: AlwaysStoppedAnimation<Color>(Color(0x88888888)),
        ),
        Container(
          child: Column(children: [
              Text(
                "Title",
                textScaleFactor: 1.2,
                style: TextStyle(color: Colors.white38),
              ),
              Text(
                "Content",
                textScaleFactor: 2,
                style: TextStyle(color: Colors.white),
              )
            ])
        )
      ],
    );
  }
}

This will also expand your Container.

Solution 2

Positioned.fill your LinearProgressIndicator:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned.fill(
          child: LinearProgressIndicator(
            value: 0.5,
            valueColor: AlwaysStoppedAnimation<Color>(Color(0x88888888)),
          ),
        ),
        Container(
          child: Column(children: [
              Text(
                "Title",
                textScaleFactor: 1.2,
                style: TextStyle(color: Colors.white38),
              ),
              Text(
                "Content",
                textScaleFactor: 2,
                style: TextStyle(color: Colors.white),
              )
            ])
        )
      ],
    );
  }
}
user_101185050
Related