0Pricing
Flutter Mobile Development · レッスン

暗黙的アニメーション

`AnimatedContainer`や`AnimatedOpacity`などのウィジェットを使って暗黙的アニメーションを実装し、滑らかで自動的な遷移を実現します。

「暗黙的アニメーション」はCoddyKit上の無料Flutter Mobile Developmentレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFlutter Mobile Development学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Flutter Mobile Developmentコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Easy Animations with Implicit Widgets

Flutter offers an easy way to add smooth animations to your app: Implicit Animations. These are "set-and-forget" animations where you simply tell Flutter the desired end state, and it handles the transition.

You don't need to manage animation controllers or listeners. Just change a property, and Flutter animates it for you!

The Magic Behind Implicit Animations

When you use an implicit animation widget, you provide a new value for one of its animated properties (like size or color). Flutter then automatically interpolates between the old value and the new value over a set duration.

It's like telling Flutter: "Go from A to B in 500 milliseconds." Flutter figures out all the steps in between.

Animating Size & Color with Container

The AnimatedContainer is one of the most versatile implicit widgets. It automatically animates changes to its properties like width, height, color, alignment, and decoration.

You just update the state with new values, and AnimatedContainer does the rest!

Try AnimatedContainer

Tap the container below! Notice how its size and color smoothly transition. We're just changing its properties and calling setState, and AnimatedContainer handles the animation.

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(
      title: 'AnimatedContainer Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const AnimatedContainerScreen(),
    );
  }
}

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

  @override
  State<AnimatedContainerScreen> createState() => _AnimatedContainerScreenState();
}

class _AnimatedContainerScreenState extends State<AnimatedContainerScreen> {
  double _width = 100.0;
  double _height = 100.0;
  Color _color = Colors.blue;
  BorderRadiusGeometry _borderRadius = BorderRadius.circular(8.0);

  void _updateContainer() {
    setState(() {
      _width = _width == 100.0 ? 200.0 : 100.0;
      _height = _height == 100.0 ? 150.0 : 100.0;
      _color = _color == Colors.blue ? Colors.red : Colors.blue;
      _borderRadius = _borderRadius == BorderRadius.circular(8.0)
          ? BorderRadius.circular(50.0)
          : BorderRadius.circular(8.0);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('AnimatedContainer')),
      body: Center(
        child: GestureDetector(
          onTap: _updateContainer,
          child: AnimatedContainer(
            width: _width,
            height: _height,
            decoration: BoxDecoration(
              color: _color,
              borderRadius: _borderRadius,
            ),
            alignment: Alignment.center,
            duration: const Duration(seconds: 1),
            curve: Curves.fastOutSlowIn,
            child: const Text(
              'Tap me!',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

Fading Widgets with AnimatedOpacity

The AnimatedOpacity widget is perfect for smoothly showing or hiding parts of your UI. It animates changes to its opacity property.

An opacity of 0.0 means completely transparent (invisible), and 1.0 means fully opaque (visible).

See AnimatedOpacity in Action

Watch the text fade in and out with a smooth transition. We're just toggling a boolean state and updating the opacity value based on it.

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(
      title: 'AnimatedOpacity Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const AnimatedOpacityScreen(),
    );
  }
}

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

  @override
  State<AnimatedOpacityScreen> createState() => _AnimatedOpacityScreenState();
}

class _AnimatedOpacityScreenState extends State<AnimatedOpacityScreen> {
  bool _isVisible = true;

  void _toggleVisibility() {
    setState(() {
      _isVisible = !_isVisible;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('AnimatedOpacity')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AnimatedOpacity(
              opacity: _isVisible ? 1.0 : 0.0,
              duration: const Duration(milliseconds: 500),
              curve: Curves.easeInOut,
              child: const Text(
                'Hello Flutter!',
                style: TextStyle(fontSize: 24),
              ),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _toggleVisibility,
              child: Text(_isVisible ? 'Hide Text' : 'Show Text'),
            ),
          ],
        ),
      ),
    );
  }
}

Smoothly Cross-Fading Widgets

When you need to switch between two different widgets with a smooth fading effect, AnimatedCrossFade is your go-to. It's great for showing different states, like a loading spinner turning into content.

You provide a firstChild and a secondChild, and control which one is visible using crossFadeState.

Try AnimatedCrossFade

Tap the button to switch between two different text widgets. Notice how one fades out while the other fades in, creating a clean transition.

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(
      title: 'AnimatedCrossFade Demo',
      theme: ThemeData(
        primarySwatch: Colors.purple,
      ),
      home: const AnimatedCrossFadeScreen(),
    );
  }
}

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

  @override
  State<AnimatedCrossFadeScreen> createState() => _AnimatedCrossFadeScreenState();
}

class _AnimatedCrossFadeScreenState extends State<AnimatedCrossFadeScreen> {
  bool _showFirst = true;

  void _toggleChild() {
    setState(() {
      _showFirst = !_showFirst;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('AnimatedCrossFade')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AnimatedCrossFade(
              duration: const Duration(milliseconds: 700),
              crossFadeState: _showFirst
                  ? CrossFadeState.showFirst
                  : CrossFadeState.showSecond,
              firstChild: Container(
                width: 200,
                height: 100,
                color: Colors.blueAccent,
                alignment: Alignment.center,
                child: const Text(
                  'First Widget',
                  style: TextStyle(color: Colors.white, fontSize: 18),
                ),
              ),
              secondChild: Container(
                width: 200,
                height: 100,
                color: Colors.deepOrange,
                alignment: Alignment.center,
                child: const Text(
                  'Second Widget',
                  style: TextStyle(color: Colors.white, fontSize: 18),
                ),
              ),
            ),
            const SizedBox(height: 30),
            ElevatedButton(
              onPressed: _toggleChild,
              child: const Text('Toggle Widget'),
            ),
          ],
        ),
      ),
    );
  }
}

Fine-Tuning Animations: Duration & Curve

Two crucial properties for all implicit animations are duration and curve:

  • duration: Defines how long the animation takes to complete. Use Duration(milliseconds: ...) or Duration(seconds: ...).
  • curve: Controls the animation's speed over its duration. Curves.linear is constant speed, Curves.easeOut starts fast and slows down, Curves.bounceIn adds a bouncy effect.

Experiment with different curves to find the perfect feel!

Implicit Animation Check

You want to create a button that, when tapped, makes a text widget smoothly disappear. Which implicit animation widget is best suited for this task?

Implicit Animations Recap

Great job! You've learned about the power of Implicit Animations in Flutter. They allow you to add smooth, automatic transitions by simply changing widget properties.

  • We explored AnimatedContainer for animating size, color, and shape.
  • AnimatedOpacity for fading elements in and out.
  • AnimatedCrossFade for switching between two widgets with a smooth blend.
  • Remember to set duration and choose an appropriate curve for your animations!

Next, we'll dive into Explicit Animations for more complex, custom control.

よくある質問

「暗黙的アニメーション」レッスンは無料ですか？

はい。「暗黙的アニメーション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Flutter Mobile Developmentコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Flutter Mobile Developmentコースには全4レッスンが含まれています。

「暗黙的アニメーション」で何を学びますか？

`AnimatedContainer`や`AnimatedOpacity`などのウィジェットを使って暗黙的アニメーションを実装し、滑らかで自動的な遷移を実現します。 ブラウザで直接実行するハンズオンコードでFlutter Mobile Developmentを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Flutter Mobile Developmentを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFlutter Mobile Developmentは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「暗黙的アニメーション」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFlutter Mobile Developmentレッスンでコードを書いて実行できますか？

はい。すべてのFlutter Mobile Developmentレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. CustomPainterとCanvas
  2. 暗黙的アニメーション
  3. 明示的アニメーションとHero
  4. スタガードアニメーションと物理ベースアニメーション
← Flutter Mobile Developmentに戻る