0Pricing
Flutter Mobile Development · Aula

Animações implícitas

Implemente animações implícitas usando widgets como `AnimatedContainer` e `AnimatedOpacity` para criar transições suaves e automáticas.

Animações implícitas é uma aula grátis de Flutter Mobile Development no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Flutter Mobile Development, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Flutter Mobile Development inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

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.

Perguntas Frequentes

A aula “Animações implícitas” é grátis?

Sim — o texto completo de “Animações implícitas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Flutter Mobile Development, atualize para CoddyKit PRO. O curso de Flutter Mobile Development inclui 4 aulas no total.

O que vou aprender em “Animações implícitas”?

Implemente animações implícitas usando widgets como `AnimatedContainer` e `AnimatedOpacity` para criar transições suaves e automáticas. Você pratica Flutter Mobile Development com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Flutter Mobile Development?

Nenhuma experiência prévia é necessária. Flutter Mobile Development no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Animações implícitas”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Flutter Mobile Development?

Sim. Cada aula de Flutter Mobile Development inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. CustomPainter e Canvas
  2. Animações implícitas
  3. Animações explícitas e Heroes
  4. Animações Escalonadas e Baseadas em Física
← Voltar para Flutter Mobile Development