Home Flutter Animated Builder

Animated Builder

0
Animated Builder

Animated Builder Widget serbaguna untuk membuat animasi. Animated Builder berguna untuk widget yang lebih kompleks yang ingin menyertakan animasi sebagai bagian dari fungsi build yang lebih besar. Untuk menggunakan Animated Builder, cukup buat widget dan teruskan ke fungsi builder. Untuk kasus sederhana tanpa status tambahan, pertimbangkan untuk menggunakan Animated Widget.

1. Start a new Flutter project

2. Pilih flutter pplication

3. Konfigurasi project anda

4. Edit main.dart menjadi seperti ini

import 'package:flutter/material.dart';
import 'package:random_pk/random_pk.dart';
import 'dart:math' as math;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnimatedBuilderExample(

      )
    );
  }
}

class AnimatedBuilderExample extends StatefulWidget {
  @override
  _AnimatedBuilderExampleState createState() => _AnimatedBuilderExampleState();
}

class _AnimatedBuilderExampleState extends State<AnimatedBuilderExample>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController =
    AnimationController(duration: Duration(seconds: 3), vsync: this)
      ..repeat();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RandomContainer(
          height: 20.0,
          width: 200.0,
          child: AnimatedBuilder(
            animation: _animationController,
            child: Container(
              height: 50.0,
              width: 50.0,
              color: Colors.amber,
            ),
            builder: (context, child) => Transform.rotate(
              child: child,
              angle: _animationController.value * 1.0 * math.pi,
            ),
          ),
        ),
      ),
    );
  }
}