So I'm trying to create a linear progress indicator in Flutter, that over 5 seconds, smoothly fill in the indicator. Currently my approach is the following:
import 'dart:async';
import 'package:flutter/material.dart';
class MyFile extends StatefulWidget {
const MyFile({super.key});
@override
State<MyFile> createState() => _MyFileState();
}
class _MyFileState extends State<MyFile> {
double _value = 0.0;
@override
void initState() {
super.initState();
Timer.periodic(const Duration(seconds: 1), (timer) {
setState(() {
_value += .2;
});
if (_value == 1) {
timer.cancel();
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: LinearProgressIndicator(
value: _value,
),
),
);
}
}
This works but the progress is shown in steps rather than smoothly filling the progress indicator. Is there any way I can accomplish that? Thank you
To create a smooth LinearProgressIndicator gradually fills over a period of time, you can use the
AnimationController and TweenAnimationBuilder
for more precise and smooth animation.
import 'package:flutter/material.dart';
class MyFile extends StatefulWidget {
const MyFile({super.key});
@override
State<MyFile> createState() => _MyFileState();
}
class _MyFileState extends State<MyFile> with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
// Initialize the AnimationController
_controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 5), // total duration for the progress
)..forward(); // start the animation immediately
}
@override
void dispose() {
_controller.dispose(); // Always dispose of the controller when not needed
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return LinearProgressIndicator(
value: _controller.value, // This value changes smoothly over time
);
},
),
),
),
);
}
}
AnimationController
: We use this to control the animation. It smoothly changes its value from 0.0 to 1.0 over a period of time, which you specify (in this case, 5 seconds).
forward()
: This starts the animation immediately after the controller is created.
AnimatedBuilder
: This widget rebuilds the LinearProgressIndicator whenever the animation's value changes, providing a smooth transition.
dispose()
: We make sure to dispose of the AnimationController when it's no longer needed to prevent memory leaks.