Scribd
Upload
26 views

Flutter Animate Color

This document discusses how to animate the color of a widget in Flutter using a ColorTween. It provides an example of animating the color of a button from indigo to lime when pressed using an AnimationController and ColorTween. It then modifies the example to toggle the animation direction by using controller.forward() and controller.reverse() when the button is pressed to change the color back and forth between the two colors.

Uploaded by

Taoufik Rachdi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
26 views

Flutter Animate Color

This document discusses how to animate the color of a widget in Flutter using a ColorTween. It provides an example of animating the color of a button from indigo to lime when pressed using an AnimationController and ColorTween. It then modifies the example to toggle the animation direction by using controller.forward() and controller.reverse() when the button is pressed to change the color back and forth between the two colors.

Uploaded by

Taoufik Rachdi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Flutter Animate Color

Flutter Animate Color

In this tutorial, we will learn how to animate color of a widget, i.e., transitioning from a starting color to ending
color.

You can animate color of a widget using ColorTween.

In the following example, we shall animate color of a button, when it is pressed.

main.dart

import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatefulWidget {


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

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {


Animation<Color> animation;
AnimationController controller;

@override
void initState() {
super.initState();
controller =
AnimationController(duration: const Duration(seconds: 1), vsync: this);
animation =
ColorTween(begin: Colors.indigo, end: Colors.lime).animate(controller)
..addListener(() {
setState(() {
// The state that has changed here is the animation object’s value.
});
});
}

void animateColor() {
controller.forward();
}

@override
Widget build(BuildContext context) {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Center(child: Text('Flutter - tutorialkart.com')),
),
body: ListView(children: <Widget>[
Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(20),
height: 400,
child: RaisedButton(
onPressed: () => {animateColor()},
color: animation.value,
child: Text(''),
))
]),
));
}

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

When you run this application, and click on the big square button which is colored indigo, animation of color
starts and changes the color of button to limegreen.
Now let us modify the application, such that the color toggles when button is pressed.

We shall use controller.reverse() function to reverse the animation.

main.dart

import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatefulWidget {


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

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {


Animation<Color> animation;
AnimationController controller;

@override
void initState() {
super.initState();
controller =
AnimationController(duration: const Duration(seconds: 1), vsync: this);
animation =
ColorTween(begin: Colors.indigo, end: Colors.lime).animate(controller)
..addListener(() {
setState(() {
// The state that has changed here is the animation object’s value.
});
});
}

bool buttonToggle = true;

void animateColor() {
if (buttonToggle) {
controller.forward();
} else {
controller.reverse();
}
buttonToggle = !buttonToggle;
}

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Center(child: Text('Flutter - tutorialkart.com')),
),
body: ListView(children: <Widget>[
Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(20),
height: 400,
child: RaisedButton(
onPressed: () => {animateColor()},
color: animation.value,
child: Text(''),
))
]),
));
}

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

When you run this application and click on the colored button, color animation toggles using controller.forward()
and controller.reverse().
Conclusion

In this Flutter Tutorial, we learned how to animate Color property using Animation and AnimationController
classes.

Flutter Tutorial

✦ Flutter Tutorial

✦ Flutter - Install on Linux - Ubuntu

✦ Flutter - Basic Application Example

Flutter Widgets

✦ Flutter Text

✦ Flutter TextField

✦ Flutter FlatButton

✦ Flutter RaisedButton

✦ Flutter SnackBar

✦ Flutter Switch

✦ Flutter ToggleButtons

✦ Flutter Table

✦ Flutter DataTable

✦ Flutter Tooltip

✦ Flutter TabBar & TabBarView

Flutter Animation

✦ Flutter Animation Basic Example

➩ Flutter Animate Color

Flutter Packages

✦ Flutter sqflite - SQLite Tutorial

Flutter Examples
Flutter Examples

✦ Flutter Login Screen Sample

You might also like