Flutter 일기
참고 : Flutter.dev - material - AnimatedDefaultTextStyle

AnimatedDefaultTextStyle

요즘은 애니메이션 위젯을 많이 보는데, 얼마 전에 썼던 DefaultTextStyle의 Animated 버전이 있길래 가져와보았다.
공식 사이트에 예시 gif만 나와있고 코드가 없어... 그냥 그 gif랑 똑같이 생긴 걸 만들어보았다.

DefaultTextStyle 과 마찬가지로 자손 Text 위젯들에 동일하게 style을 적용하는 클래스이고, animation 효과를 줄 수 있다. duration, child, style 이 세가지 속성이 필수이다.

만약 좀 더 정교힌 애니메이션을 만들고 싶다면 DefaultTextStyleTransition 을 쓸 것을 추천한다. 이건 AnimationController를 사용해서 애니메이션을 관리할 수 있는 클래스인 모양이다.

코드 예시로 알아보자

매우매우 간단한 코드를 만들어보았다.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyStatelessWidget(),
    );
  }
}

class MyStatelessWidget extends StatefulWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  State<MyStatelessWidget> createState() => _MyStatelessWidgetState();
}

class _MyStatelessWidgetState extends State<MyStatelessWidget> {
  bool isBlue = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('AnimatedDefaultTextStyle'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              AnimatedDefaultTextStyle(
                style: TextStyle(
                  fontSize: 60,
                  color: isBlue ? Colors.blue : Colors.red,
                  fontWeight: isBlue ? FontWeight.bold : FontWeight.w300,
                ),
                duration: const Duration(milliseconds: 600),
                curve: Curves.elasticInOut,
                child: Column(
                  children: const [
                    Text('Flutter'),Text('Color'),Text('Size'),
                  ],
                ),
              ),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    isBlue = !isBlue;
                  });
                },
                child: const Text(
                  'Change Color',
                  style: TextStyle(fontSize: 20),
                ),
              ),
            ],
          ),
        ));
  }
}

코드에서 예측할 수 있듯 ElevatedButton을 누르면 isBlue의 값이 변하고, 이에 따라서 Text위젯들의 색과 굵기가 변한다.

실행화면은 이렇다.

더 이상 설명할 게 없다.




플러터 공식 유튜브의 오늘의 위젯은 100개를 넘겼다. 유튜브에 영상으로 올라오지 않은 것도 많으니, 엄청난 숫자일 것이다.
내 위젯일기는 이제 50개를 향해 달려가는데, 자주 사용하는 위젯들은 어느 정도 다뤄본 거 같기도 하다. 그런거 치곤 공부할 때마다 매번 새로운 위젯들이 나오긴 하지만...
이제 슬 package들도 일기로 써봐야 할 것 같다. 원래는 package 잘 쓸 줄 몰라서 일기로 안 썼는데, 어차피 일기인거! 내 마음대로 써야지


오늘의 일기는 여기까지!