Drawing Animation in Flutter with svg

To make your UI look awesome, animation in an important aspect in Front End Techs.

So we will be seeing how to implement drawing animation in Flutter using svg.

Lets Start

First import the library,

Import the latest from Drawing Animation Lib

Drawing Animation Lib

We will using this

drawing_animation: ^1.0.0 

in this tutorial

Now copy the SVG Assets in your project by creating assets folder.

Add it in pubspec.yaml file as

assets:
  - assets/

if you don’t have an image use this

Dino Image

Create a Stateful widget

class HomePage extends StatefulWidget {
 const HomePage({Key? key}) : super(key: key);
 @override
 State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
 @override
 Widget build(BuildContext context) {
  Size size = MediaQuery.of(context).size;
  return Scaffold(
  body: Container(
   height: size.height,
   width: size.width,
   decoration: const BoxDecoration(
    gradient: LinearGradient(
     begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: <Color>[
       Colors.black,
       Color.fromRGBO(9, 18, 23, 1),
     ])),
   ),
  );
 }
}

Like Above

As the image is white we are using black background

also create this

bool run = true;

lets add a child to it

child: AnimatedDrawing.svg(
 Assets.child,
 run: this.run,
 duration: Duration(seconds: 3),
 onFinish: () => setState(() {
 this.run = false;
 }),
)

We are good to go….

lets run it

Here is a gif

Consider Liking and Following for more stuff…