flutter_animated_theme

Description:

flutter animated theme

flutter_animated_theme #



Customize animation on theme changing in Flutter, the idea was inspired by the Telegram theme changing animation, I researched for it and did not find anything similar in Flutter, so that how this package spotted the light
Getting Started #
Add dependency #
dependencies:
flutter_animated_theme: ^1.0.0
copied to clipboard
Available animations #
Trust me the animation is smoother than it's looking, they are laggy in the demonstration below because it's a GIF.



AnimationType
Fade animation(default)
Scale animation
Circular animation




Result






How to use it #
We'll start by declaring our light and dark themes first
final lightTheme = ThemeData(
brightness: Brightness.light,
primaryColor: Colors.white,
accentColor: Colors.greenAccent,
bottomAppBarColor: Colors.greenAccent,
hintColor: Colors.yellowAccent,
textTheme: TextTheme(
title: TextStyle(
color: Colors.white,
),
),
);
copied to clipboard
final darkTheme = ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.black,
accentColor: Colors.blueAccent,
hintColor: Colors.deepOrangeAccent,
bottomAppBarColor: Colors.grey,
textTheme: TextTheme(
title: TextStyle(
color: Colors.white,
),
),
);
copied to clipboard
Now import the package files
import 'package:flutter_animated_theme/animated_theme_app.dart';
import 'package:flutter_animated_theme/animation_type.dart';
copied to clipboard
Then you will have to use a custom application that is inside the package, it only adds the animation feature to your app, so you'll still be getting all the features that a normal MaterialApp uses, in your build function for the app class add this.
return AnimatedThemeApp(
debugShowCheckedModeBanner: false,
themeMode: ThemeMode.light,
theme: lightTheme,
darkTheme: darkTheme,
home: //Your home page,
);
copied to clipboard
Now you will be getting the default animation which is Fade in that comes right off the bat from Flutter, with a default animation duration of 600 milliseconds.
You can customize it like this.
return AnimatedThemeApp(
debugShowCheckedModeBanner: false,
themeMode: ThemeMode.light,
animationDuration: Duration(milliseconds: 500),
animationType: AnimationType.CIRCULAR_ANIMATED_THEME,
theme: lightTheme,
darkTheme: darkTheme,
home: //Your home page,
);

copied to clipboard
You can change the animation type to one of the currently implemented animations.
enum AnimationType {
FADE_ANIMATED_THEME,
SCALE_ANIMATED_THEME,
CIRCULAR_ANIMATED_THEME,
}
copied to clipboard
Also change the animation duration to fit your needs.
Now if you want to switch the themes, you have to let the light and dark themes as they are, and change the ThemeMode value to be dark or light according to your user's preferences
How it was implemented #
You can check the full article that describes how this package was implemented on your prefered platform.
LinkedIn
Medium
Where we are going with this #
We are trying to implement more animations to enhance the package even more, so please don't hesitate to let us know the ideas you have in mind so that we can work on making it available for the public.