flutter_animated_theme 0.9.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 74

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: ^0.9.0

Available animations #

Trust me the animation is smoother than it's looking, they are laggy in the demonstration below because it's a GIF.

AnimationTypeFade animation(default)Scale animationCircular 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,
          ),
        ),
      );
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,
          ),
        ),
      );

Now import the package files

import 'package:flutter_animated_theme/animated_theme_app.dart';
import 'package:flutter_animated_theme/animation_type.dart';

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,
    );

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,
    );

You can change the animation type to one of the currently implemented animations.

enum AnimationType {
  FADE_ANIMATED_THEME,
  SCALE_ANIMATED_THEME,
  CIRCULAR_ANIMATED_THEME,
}

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.

0.9.0 #

Release version of

  • Fix blurry screenshot
  • Fix console issues

0.9.0-dev.1 #

A beta version to test these issues

  • Fix blurry screenshot
  • Fix console issues

0.5.0+2 #

  • Update README.md

0.5.0+1 #

  • Fix losing the app's state in circular animation

0.5.0 #

  • Implementing Scale and Circular animations.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_animated_theme_example/app.dart';

void main() => runApp(App());

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_animated_theme: ^0.9.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_animated_theme/flutter_animated_theme.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
57
Health:
Code health derived from static analysis. [more]
86
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
74
Learn more about scoring.

We analyzed this package on Jul 11, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package does not support Flutter platform linux

Because:

  • package:flutter_animated_theme/flutter_animated_theme.dart that declares support for platforms: android, ios

Package does not support Flutter platform macos

Because:

  • package:flutter_animated_theme/flutter_animated_theme.dart that declares support for platforms: android, ios

Package does not support Flutter platform web

Because:

  • package:flutter_animated_theme/flutter_animated_theme.dart that declares support for platforms: android, ios

Package does not support Flutter platform windows

Because:

  • package:flutter_animated_theme/flutter_animated_theme.dart that declares support for platforms: android, ios

Package not compatible with SDK dart

Because:

  • flutter_animated_theme that is a package requiring null.

Health issues and suggestions

Fix lib/animated_theme_app.dart. (-14.26 points)

Analysis of lib/animated_theme_app.dart reported 3 warnings:

line 473 col 5: Missing case clause for 'linux'.

line 473 col 5: Missing case clause for 'macOS'.

line 473 col 5: Missing case clause for 'windows'.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
rect_getter ^0.1.0 0.1.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test