flutter circular progress indicator not showing in appbar

user_6077841 0
Viewed 4016

i am creating a project where i need to show a progress bar in the appbar.the code is given below

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,
          ))

    ],
  )

here is the onpressed method

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

This will show your CircularProgressIndicator in appbar, change it as per your requirement

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

Old thread but for anyone reading now:

I'm guessing that it wasn't showing up because in the default material theme the appBar background is the exact same color as the circular progress indicator.

But, even when you change the color, putting a CircularProgressIndicator in the appBar is hard because the bar will want to stretch the things inside it. See this issue. This is how I got it to look just like an action button and follow the correct theming:

 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: //...,
     ),
user_11158760

i got the answer...thanks all of you for your response..here is the solution.

new Theme(
    data: Theme.of(context).copyWith(accentColor: Colors.yellow),
  child: new CircularProgressIndicator(),
);
user_60778410

Looks you are having bool loader_saver=false; as a local variable inside build method. It should be a state variable.

As you are calling setState you are having the above code inside StatefulWidget.

class MyAppState extends State<MyApp> {
 bool loader_saver=false; // add this line (state variable)

 @override
 Widget build(BuildContext context) {
 // bool loader_saver=false; remove this line (local variable)

Stateful widgets will get rebuild only for state variable change. Not for local/global variable change.

user_53059620

Could you verify or change the color of the AppBar or CircularProgressIndicator i remember that they have the same default color the blue one.

Please before do something else verify that.

user_86381530
Related