flutter AnimatedContainer 로 에니메이션 주기

영상: https://www.youtube.com/watch?v=sZw8opj38Vo&list=PL4cUxeGkcC9gP1qg8yj-Jokef29VRCLt1&index=2

 

AnimatedContainer  안에 시간 속성이 있어서

몇가지 옵션들을 설정하면 입력한 시간동안 변환이 이뤄지면서 에니메이션 되는것 처럼 보입니다.

 

코드:

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

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool toogle = false;
  Duration d = Duration(milliseconds: 5000);
  double mg = 50;
  Color bg = Colors.green;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // print("build");
    return MaterialApp(
      title: "Title",
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.green,
          brightness: Brightness.dark,
        ),
      ),
      home: SafeArea(
        child: AnimatedContainer(
          duration: d,
          margin: EdgeInsets.all(mg),
          color: bg,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              OutlinedButton(
                onPressed: () {
                  setState(() {
                    toogle = !toogle;
                    if (toogle) {
                      bg = Colors.red;
                      mg = 100;
                    } else {
                      bg = Colors.green;
                      mg = 50;
                    }
                  });
                },
                child: BigText("button3"),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 쉽게 줄여서 쓰려고 만듬
  Widget BigText(String text, {double size = 30}) {
    return Text(text, style: TextStyle(fontSize: size));
  }
}

 

결과물: https://www.youtube.com/shorts/484v08WCk5M