Flutter - #47. AnimatedDefaultTextStyle

Flutter日記
注意:Flutter.dev - material - AnimatedDefaultTextStyle
AnimatedDefaultTextStyle
最近アニメのパーツをたくさん見ていて、少し前に使ったDefaultTextStyleのアニメバージョンがあったので持ってみました.
公式サイトにはサンプルgifのみコードがありません...そのgifにそっくりな
DefaultTextStyleと同様に、スタイルをサブテキストコンポーネントに適用するクラスであり、アニメーション効果を提供します.duration、child、styleの3つの属性が必要です.
より洗練されたアニメーションを作りたい場合は、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の値が変更され、テキストコンポーネントの色と太さが変更されると予測できます.
実行画面はこうです.

何の説明もない.
Plutter公式YouTubeの今日の部品は100個を超えています.YouTubeにもアップロードされていない動画がたくさんありますが、とても大きな数字のはずです.
私のウィジェット日記はもうすぐ50個になりますが、よく使うウィジェットも処理したようです.勉強するたびに新しい部品が出てくるけど...
今は日記でパッカードを書くようになりましたパッケージを書くのが苦手だったので日記を書いていませんでしたどうせ日記です!私は勝手に使います.
今日の日記はここまで!