LinearPercentIndicator not displayed when defined in function Flutter - flutter

Question

I'm rather new to Flutter/Dart so I could have made a foolish mistake. I have defined a LinearPercentIndicator in what I believe is a function inside my class _FourthRouteState. I call this function inside Widget build(BuildContext context) with 3 parameters: context, var1, var2 where var1 is a double between 0.0 and 1.0 and var2 is a text object.
The default PercentIndicator should display 75% whereas if the user presses the Confirm button, the percentage should change to 100%. It would be ideal if the animation of the LinearPercentIndicator starts over, since the value changes from 75 to 100.
The problem is that the LinearPercentIndicator is not displayed on my page and I don't receive any errors so I'm not sure what I'm doing wrong. If you could both help me with my code (I only included the relevant parts) and provide me with some relevant/useful documentation, that would be great!
import 'package:flutter/material.dart';
import 'package:percent_indicator/percent_indicator.dart';
import 'package:page_transition/page_transition.dart';
void main() {
runApp(MaterialApp(
theme:
ThemeData(accentColor: Colors.black87),
home: FourthRoute(),
));
}
class FourthRoute extends StatefulWidget {
final value;
FourthRoute({Key key, this.value}) : super(key: key);
#override
_FourthRouteState createState() => new _FourthRouteState();
}
class _FourthRouteState extends State<FourthRoute> {
var _textController = new TextEditingController();
var _formKey = GlobalKey<FormFieldState>();
getPercentageIndicator(context, var1,var2) {
setState(() {
LinearPercentIndicator(
width: MediaQuery
.of(context)
.size
.width - 50,
animation: true,
lineHeight: 20.0,
animationDuration: 2000,
percent: var1,
center: Text(var2),
linearStrokeCap: LinearStrokeCap.roundAll,
progressColor: Colors.green,
backgroundColor: Colors.green.withOpacity(0.2),
);
});
}
#override
Widget build(BuildContext context) {
Color foreground = Colors.green;
Color background = foreground.withOpacity(0.2);
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Color.fromRGBO(53, 73, 94, 0.9)),
),
Positioned(
top: 0.0,
left: 0.0,
right: 0.0,
child: AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(vertical: 50.0),
),
Padding(
padding: EdgeInsets.fromLTRB(20.0,16.0,0.0,0.0), // left, top, right, bottom
child: getPercentageIndicator(context,0.75,"75%"),
),
],
),
Positioned(
bottom: 150.0,
right: 20.0,
child: ButtonTheme(
minWidth: 150.0,
child: RaisedButton(
padding: EdgeInsets.all(8.0),
child: Text('Confirm',
style: TextStyle(
fontSize: 24,
color: Colors.black87,
fontWeight: FontWeight.bold
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0)
),
color: Colors.white,
splashColor: Colors.blueGrey,
onPressed: () {
if (_formKey.currentState.validate()) {
getPercentageIndicator(context,1.0,"100%");
// Navigator.push(
// context,
// PageTransition(
// type: PageTransitionType.fade,
// child:HomePage(),
// duration: Duration(
// seconds: 1
// ),
// ),
// );
}
}
),
),
),
],
),
);
}
}

Answer 1

Why do you make instance of LinearPercentIndicator widget inside of setState in getPercentageIndicator? It makes no sense. You probably wanted just to return it:
getPercentageIndicator(context, var1,var2) {
return LinearPercentIndicator(
width: MediaQuery
.of(context)
.size
.width - 50,
animation: true,
lineHeight: 20.0,
animationDuration: 2000,
percent: var1,
center: Text(var2),
linearStrokeCap: LinearStrokeCap.roundAll,
progressColor: Colors.green,
backgroundColor: Colors.green.withOpacity(0.2),
);
}
By the way, you shouldn't use mediaquery size here. Use LayoutBuilder to change width depending on how much space your widget has:
getPercentageIndicator(context, var1,var2) {
return LayoutBuilder(
builder: (context, constraints) {
return LinearPercentIndicator(
width: constraints.maxWidth - 50,
animation: true,
lineHeight: 20.0,
animationDuration: 2000,
percent: var1,
center: Text(var2),
linearStrokeCap: LinearStrokeCap.roundAll,
progressColor: Colors.green,
backgroundColor: Colors.green.withOpacity(0.2),
);
}
);
}