Hari 24: Animasi Dasar di Flutter

Animasi di Flutter

import "package:flutter/material.dart";

class AnimatedBox extends StatefulWidget {
  @override _AnimatedBoxState createState() => _AnimatedBoxState();
}

class _AnimatedBoxState extends State with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation _scaleAnim;
  late Animation _colorAnim;

  @override void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 1),
      vsync: this,
    );

    _scaleAnim = Tween(begin: 1.0, end: 1.5).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
    );

    _colorAnim = ColorTween(begin: Colors.blue, end: Colors.purple).animate(_controller);
  }

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

  @override Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        if (_controller.isCompleted) {
          _controller.reverse();
        } else {
          _controller.forward();
        }
      },
      child: AnimatedBuilder(
        animation: _controller,
        builder: (ctx, _) => Transform.scale(
          scale: _scaleAnim.value,
          child: Container(
            width: 100, height: 100,
            color: _colorAnim.value,
            child: Center(child: Text("Tap me!", style: TextStyle(color: Colors.white))),
          ),
        ),
      ),
    );
  }
}

AnimatedContainer — Cara Mudah

class AnimatedBox extends StatefulWidget {
  @override State createState() => _State();
}
class _State extends State {
  bool _expanded = false;

  @override Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => _expanded = !_expanded),
      child: AnimatedContainer(
        duration: Duration(milliseconds: 300),
        curve: Curves.easeInOut,
        width: _expanded ? 200 : 100,
        height: _expanded ? 200 : 100,
        color: _expanded ? Colors.green : Colors.blue,
        child: Center(child: Text("Tap!")),
      ),
    );
  }
}