how to position linear progress bar at appbar bottom?

Question

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

Answer 1

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:

Answer 2

@chemamolins's answer is perfectly valid, but it might be easier just to wrap your widget in a Preferred Size widget. The widget takes a child and a preferredSize of type Size Here's an example from an app I'm working on, wrapping a StreamBuilder:

return Scaffold(
  appBar: AppBar(
    bottom: PreferredSize(
              preferredSize: Size(double.infinity, 1.0),
              child: ProgressBar(widget.bloc.isLoading),
    ),

---snip---

class ProgressBar extends StatelessWidget {
  final Stream<bool> _isLoading;
  ProgressBar(this._isLoading);

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: _isLoading,
      builder: (context, snapshot) {
        if (snapshot.hasData && snapshot.data) {
          return LinearProgressIndicator();
        }
        else {
          return Container();
        }
      }
    );
  }
}