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;
});
}
}
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(),)]
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(),
);
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: //...,
),
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.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.