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
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: