A line animation in Flutter could involve drawing and animating lines on the screen. To implement this in Flutter, we can use the Flutter custom painting to draw this. In this article, we are going to draw a line using a custom painting class and then add some animated motion to it like the effect of a line moving horizontally across the screen. A sample video is given below to get an idea about what we are going to do in this article.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Import the Package
First of all import material.dart file.
import 'package:flutter/material.dart';
Step 3: Execute the main Method
Here the execution of our app starts.
void main() {
runApp(
MyApp(),
);
} |
Step 4: Create MyApp Class
In this class we are going to implement the MaterialApp and the Scaffold , here we are also set the Theme of our App.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, // Set the app's primary theme color
),
debugShowCheckedModeBanner: false ,
home: Scaffold(
appBar: AppBar(
title: Text( 'Line Animation Example' ), // App bar title
),
body: LineAnimationView(),
),
);
}
} |
Step 5: Create LineAnimationView Class
The LineAnimationView class sets up and controls an animation of a line using an AnimationController and a CustomPainter(LinePainter).Comments are added for better understanding.
class LineAnimationView extends StatefulWidget {
@override
_LineAnimationViewState createState() => _LineAnimationViewState();
} class _LineAnimationViewState extends State<LineAnimationView>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this , // Synchronize animation with this widget
duration: Duration(seconds: 2), // Animation duration
)..repeat(reverse: true ); // Repeat the animation back and forth
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return CustomPaint(
size: Size(
MediaQuery.of(context).size.width,
100.0,
),
painter: LinePainter(
_controller.value), // Use LinePainter to draw the line
);
},
);
}
@override
void dispose() {
_controller.dispose(); // Dispose of the animation controller
super.dispose();
}
} |
Step 6: Create LinePainter Class
The LinePainter class is responsible for painting a line on the canvas, and the position of the line is controlled by the animationValue. This class is used in conjunction with an animation controller to create the effect of a line moving horizontally across the screen as part of an animation.
class LinePainter extends CustomPainter {
final double animationValue; // Animation value to control line position
LinePainter( this .animationValue);
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.green // Line color
..style = PaintingStyle.stroke // Stroke style
..strokeWidth = 5.0; // Stroke width
final double startX = 0;
final double endX = size.width;
final double y = size.height / 2;
final double currentX = startX + (endX - startX) * animationValue;
// Draw the line
canvas.drawLine(Offset(startX, y), Offset(currentX, y), paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true ; // Repaint the line continuously
}
} |
Here is the full Code of main.dart file
import 'package:flutter/material.dart' ;
void main() {
runApp(
MyApp(),
);
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, // Set the app's primary theme color
),
debugShowCheckedModeBanner: false ,
home: Scaffold(
appBar: AppBar(
title: Text( 'Line Animation Example' ), // App bar title
),
body: LineAnimationView(),
),
);
}
} class LinePainter extends CustomPainter {
final double animationValue; // Animation value to control line position
LinePainter( this .animationValue);
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.green // Line color
..style = PaintingStyle.stroke // Stroke style
..strokeWidth = 5.0; // Stroke width
final double startX = 0;
final double endX = size.width;
final double y = size.height / 2;
final double currentX = startX + (endX - startX) * animationValue;
// Draw the line
canvas.drawLine(Offset(startX, y), Offset(currentX, y), paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true ; // Repaint the line continuously
}
} class LineAnimationView extends StatefulWidget {
@override
_LineAnimationViewState createState() => _LineAnimationViewState();
} class _LineAnimationViewState extends State<LineAnimationView>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this , // Synchronize animation with this widget
duration: Duration(seconds: 2), // Animation duration
)..repeat(reverse: true ); // Repeat the animation back and forth
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return CustomPaint(
size: Size(
MediaQuery.of(context).size.width,
100.0,
),
painter: LinePainter(
_controller.value), // Use LinePainter to draw the line
);
},
);
}
@override
void dispose() {
_controller.dispose(); // Dispose of the animation controller
super.dispose();
}
} |