A collection of Animations that aims to improve the user experience for your next flutter project.

Overview


Flutter Animations

A collection of Animations that aims to improve the user experience for your next flutter project. Built by Ezaldeen SAHB I hope that these sample can help you in your real projects or just for the purpose of learning and inspiration.

In addition to forking and reviewing the MIT licensed code available here.


About me

I am a mobile developer from Iraq, this repo is just to share source code for my Instagram page @ezaldeen_sahb Videos.


The Animations


Animated onBoarding

Use slider and lottie files to build an animated on boarding screens, it can be used to gain user attraction to your app when it launch at first.

View Code















Furniture app (Dark / White) Theme support

Draw curved vector animations to switch between white/dark themes. It also make use of a custom flash indicator for the selected category.

View Code















No Wifi internet connection

Uses the Custom painter to draw wifi animations on your app screens. In this case I also used some text animated widget to animated the type writing animations.

View Code















Flutter circular widget animator

Demonstrates how you can use custom painters in your Flutter app and how to tie multi custom animations controllers.

View Code















Profile weather animations

Example of a profile view with animated weather indicators that change size, shape, and color

View Code















Rotating wave progress indicator

Again custom painters are being used here, drawing some paths on screen and use animation controllers to delay each path to make this nice movement

View Code















Flutter custom hero animations

Flutter Hero Animations are amazing, however, the default hero animation is not giving the best U/X. We will implement a white page route animations to improve this issue

View Code
















Installation

If you're new to Flutter the first thing you'll need is to follow the setup instructions. Once you're set up and can compile the sample Flutter app, you're ready to run some examples!

Each project is stored in its own folder in the repository. Using your IDE of choice, open the project root directory you'd like to run. Then, using the terminal inside your IDE, run flutter pub get to fetch any dependencies, and flutter run to deploy to your connected device or simulator.

If you would like to try these for Flutter for web, you can use flutter run -d chrome. For more information on enabling Flutter for web follow the setup instructions.


License


These examples are released under the MIT license. You can use the code for any purpose, including commercial projects.

license


You might also like...

Fun canvas animations in Flutter based on time and math functions.

Fun canvas animations in Flutter based on time and math functions.

funvas Flutter package that allows creating canvas animations based on time and math (mostly trigonometric) functions. The name "funvas" is based on F

Jan 9, 2023

A flutter package that adds support for vector data based animations.

animated_vector Description and inspiration A package that adds support for vector data based animations. The data format is heavily inspired from the

Apr 26, 2022

Timer UI animation challenge from 'Flutter Animations Masterclass'

stopwatch_flutter An IOS stopwatch challenge from Flutter Animations Masterclass - Full Course What I learned; Use timer Use ticker Create custom shap

Jan 4, 2023

🐱‍👤 Flutter-Animation 🔥 🔥 List Animated Staggered Animations

 🐱‍👤 Flutter-Animation 🔥 🔥 List Animated Staggered Animations

🐱‍👤 Staggered Animations made with algeria ❤

Nov 22, 2022

A Flutter Log In Page using Flare Animations

A Flutter Log In Page using Flare Animations

Bear_log_in An example built using JCToon's Flare File as a custom UI component. Bear will follow the cursor as you type or move it around. Overview T

Oct 19, 2022

A package to create nice and smooth animations for flutter

A package to create nice and smooth animations for flutter

animation_director A package to create nice and smooth animations for flutter Introduction A simple package to build beautiful and smooth animations f

Nov 28, 2022

A Flutter package with a selection of simple yet very customizable set of loading animations.

A Flutter package with a selection of simple yet very customizable set of loading animations.

Flutter Loading Animations A simple yet very customizable set of loading animations for Flutter projects. Installation Add the following to your pubsp

Sep 23, 2022

☀️ A Flutter package for some material design app intro screens with some cool animations.

☀️ A Flutter package for some material design app intro screens with some cool animations.

IntroViews is inspired by Paper Onboarding and developed with love from scratch. Checkout our fully responsive live example app. Table of contents Fea

Dec 30, 2022

Render After Effects animations natively on Flutter. This package is a pure Dart implementation of a Lottie player.

Lottie for Flutter Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and rende

Jan 2, 2023
Owner
Ezaldeen Sahb
Welcome, I am an Electrical Engineer who loves to write code, let's make a project together ^^
Ezaldeen Sahb
A collection of Screens and attractive UIs built with Flutter ready to be used in your applications. No external libraries are used. Just download, add to your project and use.

Flutter Screens A collection of Login Screens, Buttons, Loaders and Widgets with attractive UIs, built with Flutter, ready to be used in your applicat

Samarth Agarwal 5k Dec 31, 2022
A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations.

flutter_animated_dialog A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations. Dialog barrier i

null 20 Dec 3, 2022
Create powerful animations in Flutter and use the hero animation for complex animations

Hero Animation - Locations UI - Flutter Create powerful animations in Flutter and use the hero animation for complex animations. ⚡  Social Media  Twit

null 3 Dec 11, 2021
🚅Flutter out-of-the-box collection animations written in pure dart.

LoadingIndicator A collection of out of the box loading animations written in pure dart, no extra dependency, inspired by loaders.css and NVActivityIn

Tino 170 Jan 1, 2023
A collection of awesome loading animations

NVActivityIndicatorView ⚠️ Check out LoaderUI (ready to use with Swift Package Mananger supported) for SwiftUI implementation of this. ?? Introduction

Vinh Nguyen 10.3k Jan 3, 2023
Simple reactive animations in your Flutter apps.

just.motion Flutter package to create organic motion transitions. Why? The Motion Value stateless hot reload status notifier Ease Motion Spring Motion

Roi Peker 49 Nov 14, 2022
Easily add staggered animations to your ListView, GridView, Column and Row children.

Flutter Staggered Animations Easily add staggered animations to your ListView, GridView, Column and Row children as shown in Material Design guideline

null 1.2k Jan 6, 2023
Organize your animations.

montage Organize your animations. Quickstart // 1. Define your animations const entrance = MontageAnimation( key: 'entrance', duration: Duration(s

Aloïs Deniel 14 Oct 19, 2022
🔔 A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

Animated Text Kit A flutter package which contains a collection of some cool and awesome text animations. Recommended package for text animations in C

Ayush Agarwal 1.4k Jan 6, 2023
Flutter package for creating awesome animations.

?? Simple Animations Simple Animations is a powerful package to create beautiful custom animations in no time. ?? fully tested ?? well documented ?? e

Felix Blaschke 879 Dec 31, 2022