フラッターのマスター:アニメーションパート1

あなたのフラッタアプリケーションfancierをする場合は、適切な場所にしてください.2つの部分でこのチュートリアルでは、あなたのアプリケーションにアニメーションを追加する方法を学びます.
この最初の部分では、アニメーションのすべての単一の側面をカスタマイズすることなく素晴らしいアニメーションを表示することができますフレームワークで利用可能な素晴らしいウィジェットを使用します.
最終的な結果は以下のビデオのようになります.

を作成しましょうContainer 画面の中央には、そのプロパティを変更するボタン.

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

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

  @override
  _ImplicitAnimationsScaffoldState createState() =>
      _ImplicitAnimationsScaffoldState();
}

class _ImplicitAnimationsScaffoldState
    extends State<ImplicitAnimationsScaffold> {
  double _width = 200;
  double _height = 200;
  double _borderRadius = 20;
  Color _color = Colors.red;

  final _random = Random();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animations'),
      ),
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              child: Center(
                child: Container(
                  width: _width,
                  height: _height,
                  decoration: BoxDecoration(
                    color: _color,
                    borderRadius: BorderRadius.all(
                      Radius.circular(_borderRadius),
                    ),
                  ),
                ),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                OutlinedButton(
                  child: Text('Size'),
                  onPressed: () => _changeSize(),
                ),
                OutlinedButton(
                  child: Text('Borer Radius'),
                  onPressed: () => _changeBorderRadius(),
                ),
                OutlinedButton(
                  child: Text('Color'),
                  onPressed: () => _changeColor(),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }

  void _changeSize() { }

  void _changeBorderRadius() { }

  void _changeColor() { }
}

4プロパティを定義しました_width , _height , _borderRadius and _color .
これらの値を変更する関数を実装しましょう.

void _changeSize() {
  setState(() {
    _width = 100 + _random.nextInt(100).toDouble();
    _height = 100 + _random.nextInt(100).toDouble();
  });
}

void _changeBorderRadius() {
  setState(() {
    _borderRadius = _borderRadius == 20 ? 0 : 20;
  });
}

void _changeColor() {
  setState(() {
    var rnd = Random();
    var r = rnd.nextInt(16) * 16;
    var g = rnd.nextInt(16) * 16;
    var b = rnd.nextInt(16) * 16;
    _color = Color.fromARGB(255, r, g, b);
  });
}

我々は、我々のプロパティのランダムな値を生成するために、あなたはボタンを押すとコンテナーが変更されます.たとえば、あなたが押すとColor ボタンは、ランダムなものでその色を変更します.
しかし、Watchはアニメーションについてのこのチュートリアルではありません.
我々の容器への変更をアニメーション化するためにAnimatedContainer 単純な代わりにContainer , アニメーションの持続時間を指定します.

AnimatedContainer(
  duration: const Duration(milliseconds: 500),
  width: _width,
  height: _height,
  decoration: BoxDecoration(
  color: _color,
  borderRadius: BorderRadius.all(
    Radius.circular(_borderRadius),
    ),
  ),
)

それでは、不透明度アニメーションをAnimatedOpacity ウィジェット.
新しい変数を_opacity を初期値と1のボタンを変更します.

double _opacity = 1;

...

OutlinedButton(
  child: Text('Opacity'),
  onPressed: () => _changeOpacity(),
),

...

void _changeOpacity() {
  setState(() {
    _opacity = _opacity == 1 ? 0.5 : 1.0;
  });
}

この値を使いましょうAnimatedOpacity ウィジェット

AnimatedOpacity(
                  opacity: _opacity,
                  duration: const Duration(milliseconds: 500),
                  child: AnimatedContainer(
...
),

おめでとう、あなたのアプリに最初のアニメーションを追加しました、より複雑で美しいアニメーションを作る方法を学ぶために、このチュートリアルの2番目の部分をチェックしてください.
より素晴らしいフラッターチュートリアルをチェックしたいですか?Click here!