-1.4 C
New York
Wednesday, November 29, 2023

Flutter: ColorTween Example

A short example of using ColorTween in Flutter.

App Preview

The complete code:

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

void main() {

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),

class HomePage extends StatefulWidget {
  _HomePageState createState() => _HomePageState();

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Color?> _color;

  void initState() {
    _controller = AnimationController(
      duration: Duration(seconds: 5),
      vsync: this,
    )..repeat(reverse: true);

    _color =
        ColorTween(begin: Colors.blue, end: Colors.amber).animate(_controller);

  void dispose() {

  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        color: Colors.black87,
        child: AnimatedBuilder(
          animation: _color,
          builder: (BuildContext _, Widget? __) {
            return Container(
              width: 300,
              height: 300,
                  BoxDecoration(color: _color.value, shape: BoxShape.circle),

Further reading:

You can also take a tour around our Flutter topic page and Dart topic page to see the latest tutorials and examples.


Related Articles

Latest Articles