如何将线性进度条放置在appbar底部？

Question

如何在不使用appbar的bottom属性且不增加appbar高度的情况下将线性进度条放置在appbar底部？

如下图所示： Material design appbar

Answer 1

简单的方法

   bottom: PreferredSize(
  preferredSize: Size.fromHeight(6.0),
  child: LinearProgressIndicator(backgroundColor: Colors.red.withOpacity(0.3),valueColor:new AlwaysStoppedAnimation<Color>(Colors.red),value: 0.25,),
),

Answer 2

为什么不想使用bottom属性？这就是Flutter AppBar小部件提供的用于在其中添加内容的钩子。否则，您必须创建自己的版本AppBar。

为了对您有用，我在下面创建了您可以在应用栏中使用的代码段。

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

MyLinearProgressIndicator必须实现preferredSizegetter。因此，您需要创建自己的版本。

// 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;
}

结果如下：

Answer 3

@chemamolins 的回答是完全有效的，但将您的小部件包装在首选尺寸小部件中可能会更容易。小部件采用 achild和 apreferredSize类型Size以下是我正在开发的应用程序中的一个示例，它包装了一个 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();
        }
      }
    );
  }
}