flutterflutter-layout

how to position linear progress bar at appbar bottom?


How to position linear progress bar at appbar bottom without using the bottom property of the appbar and without inscreasing the appbar height?

like the following image: Material design appbar


Solution

  • Why you don't want to use the bottom property? That is the hook the Flutter AppBar widget provides to add things there. Otherwise you have to create your own version of the AppBar.

    In case it is useful to you, I have created the snippet below that you can use in your appbar like this.

      appBar: new AppBar(
        title: new Text("Title"),
        backgroundColor: Colors.orange,
        bottom: MyLinearProgressIndicator(
          backgroundColor: Colors.orange,
        ),
      ),
    

    MyLinearProgressIndicator must implement the preferredSize getter. That is why you need to create your own version.

    // Cant't use _kLinearProgressIndicatorHeight 'cause it is private in the
    // progress_indicator.dart file
    const double _kMyLinearProgressIndicatorHeight = 6.0;
    
    class MyLinearProgressIndicator extends LinearProgressIndicator
        implements PreferredSizeWidget {
      MyLinearProgressIndicator({
        Key key,
        double value,
        Color backgroundColor,
        Animation<Color> valueColor,
      }) : super(
              key: key,
              value: value,
              backgroundColor: backgroundColor,
              valueColor: valueColor,
            ) {
        preferredSize = Size(double.infinity, _kMyLinearProgressIndicatorHeight);
      }
    
      @override
      Size preferredSize;
    }
    

    And this is the result:

    enter image description here