[Flutter]AppBarの下にプログレスバーを表示する方法

Flutter

2021.10.14

どうも、ちょげ(@chogetarou)です。

AppBarの下にプログレスバーを表示するには、どうしたらいいのでしょうか？

方法
まとめ

方法

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(
            'Sample',
            style: TextStyle(color: Colors.blue),
          ),
          bottom: PreferredSize(
              child: LinearProgressIndicator(
                value: 0.6,
                color: Colors.red,
              ),
              preferredSize: Size.fromHeight(10)),
        ),
        body: Center());
  }

AppBarの下にプログレスバーを表示するには、まず、引数「bottom」に「PreferredSize」を指定します。

   AppBar(
          bottom: PreferredSize(
               ・・・    
          ),
     ),

次に、PreferredSizeの引数「preferredSize」に高さを設定します。

AppBar(
     bottom: PreferredSize(
           ・・・
     　　　　　　　　preferredSize: Size.fromHeight(10)
　　　　　　),
  ),

そして、PreferredSizeの引数「child」に「LinearProgressBar」を指定します。

 appBar: AppBar(
          bottom: PreferredSize(
              child: LinearProgressIndicator(),
              preferredSize: Size.fromHeight(10)
　　　　　　　　　),
 ),

これでAppBarの下にプログレスバーを表示することが出来ます。

最後に、プログレスバーの設定をLinearProgreddIndicatorの引数で行います。