颤动圆形进度指示器未显示在应用栏中

Question

我正在创建一个项目，我需要在 appbar 中显示一个进度条。代码如下

bool loader_saver=false;
return Scaffold(
  appBar: new AppBar(
    title: new Text("add data"),
    actions: <Widget>[
      loader_saver?
          new CircularProgressIndicator()
      :
      new FlatButton(
          onPressed: () {
            _add_Data();
          },
          child: new Icon(
            Icons.save,
            color: Colors.white,
          ))

    ],
  )

这是 onpressed 方法

void _add_data(){ 
final _formstate = _form_key.currentState;
if (_formstate.validate()) {
  _form_key.currentState.save();
  setState(() {
    loader_saver=true;
  });
  }
}

Answer 1

旧线程，但对于现在阅读的人来说：

我猜测它没有显示，因为在默认材质主题中，appBar 背景的颜色与圆形进度指示器完全相同。

但是，即使您更改颜色，将 CircularProgressIndicator 放入 appBar 中也很困难，因为该栏会拉伸其中的内容。看到这个问题。这就是我如何让它看起来像一个操作按钮并遵循正确的主题：

 class ProgressRefreshAction extends StatelessWidget {
   final bool isLoading;
   final Function() onPressed;

   ProgressRefreshAction({
     this.isLoading,
     this.onPressed,
   });
   @override
   Widget build(BuildContext context) {
     if (isLoading) {
       final theme = Theme.of(context);
       final iconTheme =
           theme.appBarTheme.actionsIconTheme ?? theme.primaryIconTheme;
       return Column(mainAxisAlignment: MainAxisAlignment.center, children: [
         Padding(
           padding: const EdgeInsets.only(right: 12),
           child: Container(
             width: iconTheme.size ?? 24,
             height: iconTheme.size ?? 24,
             child: CircularProgressIndicator(
               valueColor: AlwaysStoppedAnimation<Color>(iconTheme.color),
             ),
           ),
         ),
       ]);
     }
     return IconButton(
       icon: Icon(
         Icons.refresh,
       ),
       onPressed: onPressed,
     );
   }
 }

 //build(context) {
 return Scaffold(
     appBar: AppBar(
       title: Text("MyApp"),
       actions: [
         ProgressRefreshAction(_isLoading),
       ],
       body: //...,
     ),

Answer 2

这将在应用栏中显示您的 CircularProgressIndicator，根据您的要求进行更改

actions: <Widget>[
new Container(width: 60.0, height: 20.0, color: Colors.lightGreen,
child: new CircularProgressIndicator(),)]