iDigiSol Web | Building An Animation Package In Flutter

Welcome back! In this part of our journey, we’ll cover Building an Animation Package in Flutter and walk through the steps to publish it. Let’s dive right in!

Step 1: Project Setup

Start by creating a new Flutter package:

flutter create --template=package custom_animation_package

cd custom_animation_package

Step 2: Define Animation Widgets

Inside the lib folder, create a new Dart file for your animation widgets. Let’s name it custom_animations.dart.

// lib/custom_animations.dart

import 'package:flutter/material.dart'; 


///WE ONLY MADE USE OF OF 1 ANIMATION BUT YOU CAN EXTEND IT WITH ALL THE ANIMATIONS THAT ARE AVAILABLE
class BounceInAnimator extends StatefulWidget { 
   final Widget child; 
   final Duration duration; 
   const BounceInAnimator({ Key? key, required this.child, this.duration = const Duration(milliseconds: 500), }) : super(key: key); 


@override _BounceInAnimatorState createState() => _BounceInAnimatorState(); } 

class _BounceInAnimatorState extends State<BounceInAnimator> with SingleTickerProviderStateMixin { 

  late AnimationController _controller; 
  late Animation<double> _animation;


@override void initState() {

   super.initState();
   _controller = AnimationController( vsync: this, duration: widget.duration, ); 
   _animation = Tween<double>(begin: 0.0, end: 1.0).animate( CurvedAnimation( parent: _controller, curve: Curves.bounceIn, ),);
   _controller.forward();

} 

@override void dispose() {
  _controller.dispose(); 
  super.dispose(); 
} 

@override Widget build(BuildContext context) { 

  return AnimatedBuilder(
           animation: _animation, 
           builder: (context, child) { 
                      return Transform.scale( 
                      scale: _animation.value,
                      child: widget.child, 
                    );
                   }, 
                 );

           }

 }


class BounceInAnimator extends StatefulWidget { 

   final Widget child; 
   final Duration duration; 
   const BounceInAnimator({ Key? key, required this.child, this.duration = const Duration(milliseconds: 500), }) : super(key: key); 

@override _BounceInAnimatorState createState() => _BounceInAnimatorState(); } 

class _BounceInAnimatorState extends State<BounceInAnimator> with SingleTickerProviderStateMixin { 

  late AnimationController _controller; 
  late Animation<double> _animation;

 @override void initState() {
   super.initState();
   _controller = AnimationController( vsync: this, duration: widget.duration, ); 
   _animation = Tween<double>(begin: 0.0, end: 1.0).animate( CurvedAnimation( parent: _controller, curve: Curves.bounceIn, ),);
   _controller.forward();
} 

@override void dispose() {

 _controller.dispose(); 
 super.dispose(); 
} 

@override Widget build(BuildContext context) { 

  return AnimatedBuilder(
           animation: _animation, 
           builder: (context, child) { 
                    return Transform.scale( 
                             scale: _animation.value,
                             child: widget.child, 
                           );

                    }, 

         );

    }

 }

Step 3: File Structure For A Flutter Package

Your project structure should resemble the following:

custom_animation_package/ 
|-- lib/
| |  -- custom_animations.dart 
|-- test/ 
|-- example/ 
|-- pubspec.yaml

lib: This folder contains your library code.
test: You can include tests for your package in this folder.
example: This folder is used to showcase and test your package.
pubspec.yaml: The configuration file for your package.

Step 7: Let’s Test

Step 7.1: Create A Flutter Project

Open VS Code and ensure you have the Flutter and Dart extensions installed.
Open the terminal in VS Code and run the following commands:
flutter create custom_animation_app
cd custom_animation_app

Step 7.2: Pubspec.Yaml

Add the dependency to your pubspec.yaml file to link your local custom animation package:

dependencies:
  flutter:
    sdk: flutter
  custom_animation_package:
    path: Replace /path/to/your/custom_animation_package with the actual local path to your Flutter package.

Step 3: Implement The Custom Animation

In your main Dart file (e.g., lib/main.dart), use the BounceInAnimator widget from your custom animation package:

// lib/main.dart 
import 'package:flutter/material.dart'; import 'package:custom_animation_package/custom_animations.dart'; 
void main() {   runApp(MyApp()); 
} 

class MyApp extends StatelessWidget {  @override Widget build(BuildContext context) {   return MaterialApp( 
    home: Scaffold(appBar: AppBar( title: Text('Custom Animation App'), ), 
 body: Center( child: BounceInAnimator( child: FlutterLogo(size: 150),
 ),
 ),
 ),
 ); 
}
}

Step 4: Run The App

In the terminal, run the app using the command:

flutter run

This will launch the app on a connected emulator or device.

Now you have a Flutter project that uses your custom animation package. Any changes you make to the package code will be immediately reflected in your app since you’re linking to the local package.

Remember to run flutter pub get in the project directory whenever you make changes to the package code.

Feel free to experiment with more widgets and animations from your custom package to enhance your Flutter app!

Step 4: Add Documentation And Metadata

Include a comprehensive README.md file in the root of your package. This file should provide instructions on how to use your package and any additional information users might need.

Step 5: Version Your Package

Update the pubspec.yaml file with your package information, including versioning.

name: custom_animation_package 
version: 0.1.0 
description: A custom animation package for Flutter dependencies: 
flutter: sdk: flutter

Step 6: Publish Your Package

Before publishing, ensure you have a pub.dev account. Run the following command to publish your package:

flutter pub publish

Follow the prompts to log in with your pub.dev credentials and publish your package.

Step 7: Use Your Package

Now that your package is published, others can use it in their Flutter projects. To use your custom_animation_package in a Flutter project, add the following to the dependencies section of your project’s pubspec.yaml file:

dependencies: custom_animation_package: ^0.1.0

Run flutter pub get to fetch and add the package to your project.

Well done you have created your own animation package and you have tested it locally.

Full code on our Github repository here.

If you are interest in our development services please dont hesitate to contact us at www.idigisolweb.com

iDigiSol Web | App Development and E-commerce cosnulting ad | Turn your app ideas into digital reality

Building An Animation Package In Flutter – A Step-By-Step Guide