Flutter Mobile Development · Lekcja

Animacje niejawne

Zaimplementują Państwo animacje niejawne za pomocą widgetów takich jak `AnimatedContainer` i `AnimatedOpacity`, aby uzyskać płynne, automatyczne przejścia.

Animacje niejawne to bezpłatna lekcja Flutter Mobile Development na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Flutter Mobile Development, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Flutter Mobile Development zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

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.

Często zadawane pytania

Czy lekcja „Animacje niejawne” jest bezpłatna?

Tak — pełny tekst „Animacje niejawne” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Flutter Mobile Development, przejdź na CoddyKit PRO. Kurs Flutter Mobile Development zawiera 4 lekcji w sumie.

Co nauczysz się w „Animacje niejawne”?

Zaimplementują Państwo animacje niejawne za pomocą widgetów takich jak `AnimatedContainer` i `AnimatedOpacity`, aby uzyskać płynne, automatyczne przejścia. Ćwiczysz Flutter Mobile Development z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Flutter Mobile Development?

Nie wymagamy żadnego doświadczenia. Flutter Mobile Development w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Animacje niejawne”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Flutter Mobile Development?

Tak. Każda lekcja Flutter Mobile Development zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Flutter Mobile Development