flutter & dart - AnimatedSwicher , AnimatedOpacity , AnimatedDefaultTextStyle

Overview.

귀찮으니 AnimatedSwicher , AnimatedOpacity , AnimatedDefaultTextStyle 를 한번에 작성해보장

각각 보면 그냥 다 아실거 같아요 ㅎㅎ.. 그래서 그냥 코드와 영상만 보여드리겠습니다.

1. AnimatedSwicher 
2. AnimatedOpacity
3. AnimatedDefaultTextStyle

0. 문서

https://api.flutter.dev/flutter/widgets/AnimatedSwitcher-class.html

AnimatedSwitcher class - widgets library - Dart API

https://api.flutter.dev/flutter/widgets/AnimatedOpacity-class.html

AnimatedOpacity class - widgets library - Dart API

https://api.flutter.dev/flutter/widgets/AnimatedDefaultTextStyle-class.html

AnimatedDefaultTextStyle class - widgets library - Dart API

 

1. AnimatedSwicher

AnimatedSwicher 은 위젯을 바꿀 수 가 있어요!!

위젯 1을 위젯 2로 변경하는 데 애니메이션을 주고 싶을 때 사용합니다.

 

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: _Home(),
    );
  }
}

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

  @override
  State<_Home> createState() => _HomeState();
}

class _HomeState extends State<_Home> {
  // dynamic 어떤 타입이 들어와도 상관없슴
  dynamic mWidget = FirstWidget();

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
            AnimatedSwitcher(
              duration: Duration(seconds: 3),
              child: mWidget,
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  mWidget = mWidget.runtimeType == FirstWidget
                      ? SecondWidget()
                      : FirstWidget();
                });
              },
              child: Text("버튼"),
            ),
          ]),
        ),
      ),
    );
  }
}

class FirstWidget extends StatelessWidget {
  const FirstWidget({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      width: 100,
      height: 100,
    );
  }
}

class SecondWidget extends StatelessWidget {
  const SecondWidget({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.orange,
      width: 300,
      height: 300,
    );
  }
}

 

 

2. AnimatedOpacity

AnimatedOpacity 는 옅기?? 투명 불투명?? 을 지정 할 수 있어요

0 ~ 1 값을 지정해서 사용할 수 있습니다.

...

class _HomeState extends State<_Home> {
  double boxOpacity = 1;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: Column(
            children: [
              AnimatedOpacity(
                opacity: boxOpacity, // 이 값을 바꾸면 됨
                duration: Duration(seconds: 2),
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                ),
              ),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    boxOpacity = boxOpacity == 1 ? 0.2 : 1;
                  });
                },
                child: Text("버튼"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

3. AnimatedDefaultTextStyle

AnimatedDefaultTextStyle 은 텍스트의 변화를 주고 싶을 때 사용해요!!

여러 텍스트에 변화를 줄 수 있어요.

...

class _HomeState extends State<_Home> {
  Color mColor = Colors.red;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: Column(
            children: [
              AnimatedDefaultTextStyle(
                style: TextStyle(color: mColor , fontSize: 50),
                duration: Duration(seconds: 2),
                child: Text("안녕"),
              ),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    mColor = mColor == Colors.red ? Colors.blue : Colors.red;
                  });
                },
                child: Text("버튼"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}