Mobiele ontwikkeling met Flutter · Les

Expliciete animaties en Heroes

Beheers expliciete animaties met `AnimationController` en `Tween`s en maak boeiende overgangen met gedeelde elementen met Hero-widgets.

Les 3 van 410 stappen

Expliciete animaties en Heroes is een gratis Mobiele ontwikkeling met Flutter-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Mobiele ontwikkeling met Flutter. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Mobiele ontwikkeling met Flutter bevat in totaal 4 lessen.

Introductie tot expliciete animaties

Welkom bij expliciete animaties! In tegenstelling tot impliciete animaties, die automatisch animeren wanneer eigenschappen veranderen, geven expliciete animaties je volledige controle.

Je bepaalt hoe en wanneer een animatie wordt uitgevoerd, evenals de duur en de curve. Dat is krachtig voor complexe, aangepaste effecten.

AnimationController: de dirigent

De kern van expliciete animaties is AnimationController. Zie deze als de dirigent van een orkest, die het afspelen van de animatie beheert.

Deze genereert bij elk beeld een nieuwe waarde.
Deze bepaalt de duur van de animatie.
Deze kan vooruit, achteruit of herhaald worden afgespeeld.

Hiervoor is een TickerProviderStateMixin nodig om te synchroniseren met de vernieuwingsfrequentie van het scherm.

AnimationController instellen

Je initialiseert een AnimationController meestal in de initState van je widget en ruimt deze op in dispose om geheugenlekken te voorkomen.

Hier zie je een eenvoudige configuratie:

import 'package:flutter/material.dart';

class MyAnimationScreen extends StatefulWidget {
  @override
  _MyAnimationScreenState createState() => _MyAnimationScreenState();
}

class _MyAnimationScreenState extends State<MyAnimationScreen> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Controller Setup')),
      body: Center(
        child: Text('Animation controller ready!')
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: MyAnimationScreen()));
}

Tween: het bereik definiëren

Terwijl AnimationController gedurende zijn looptijd een waarde van 0.0 tot 1.0 levert, definieert een Tween (afkorting van 'in-betweening') het bereik van de waarden die je daadwerkelijk wilt animeren.

Een Tween brengt het bereik 0.0-1.0 van de controller in kaart op de gewenste waarden voor begin en end.
Veelgebruikte typen zijn Tween, ColorTween en SizeTween.

Tween en controller verbinden

Om een Tween te gebruiken, maak je een Animation-object door animate() aan te roepen op de Tween en je AnimationController mee te geven.

Dit Animation-object levert vervolgens waarden binnen het door jou gedefinieerde bereik terwijl de controller van 0.0 naar 1.0 vordert.

import 'package:flutter/material.dart';

class MyTweenExample extends StatefulWidget {
  @override
  _MyTweenExampleState createState() => _MyTweenExampleState();
}

class _MyTweenExampleState extends State<MyTweenExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
    // Define a tween that animates a double from 0.0 to 200.0
    _animation = Tween<double>(begin: 0.0, end: 200.0).animate(_controller);
    _controller.forward(); // Start the animation
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Tween Connection')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Animation value: ${_animation.value.toStringAsFixed(2)}'),
            // Note: This won't update automatically without a listener or AnimatedBuilder yet
          ],
        )
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: MyTweenExample()));
}

AnimatedBuilder voor efficiëntie

Om je gebruikersinterface op animatiewaarden te laten reageren, kun je addListener en setState gebruiken. AnimatedBuilder is hiervoor echter een efficiëntere widget.

Deze bouwt alleen het animerende deel van je widgetstructuur opnieuw op en voorkomt onnodige nieuwe opbouw van statische widgets.

import 'package:flutter/material.dart';

class MyAnimatedBuilder extends StatefulWidget {
  @override
  _MyAnimatedBuilderState createState() => _MyAnimatedBuilderState();
}

class _MyAnimatedBuilderState extends State<MyAnimatedBuilder> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
    _animation = Tween<double>(begin: 50.0, end: 150.0).animate(_controller);

    _controller.forward(); // Start animation
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AnimatedBuilder Demo')),
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return Container(
              width: _animation.value,
              height: _animation.value,
              color: Colors.blue,
              child: Center(child: Text('Size', style: TextStyle(color: Colors.white))),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _controller.reset();
          _controller.forward();
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: MyAnimatedBuilder()));
}

Hero-widgets introduceren

Met Hero-widgets kun je een indrukwekkende overgang met gedeelde elementen tussen routes (schermen) maken. Wanneer je van het ene scherm naar het andere navigeert, vliegt een Hero-widget van zijn positie op het eerste scherm naar zijn nieuwe positie op het tweede scherm.

Dit zorgt voor een visueel aantrekkelijke en intuïtieve gebruikerservaring en maakt de verbinding tussen de twee schermen duidelijk.

Hero-overgangen implementeren

Om een Hero-widget te gebruiken, heb je twee widgets nodig, één op elk scherm, met exact dezelfde tag. Wanneer je tussen deze schermen navigeert, handelt Flutter de animatie automatisch af.

De tag moet uniek zijn voor alle Hero-widgets die momenteel op het scherm staan.

import 'package:flutter/material.dart';

// First Screen
class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Screen')),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.push(
              context, MaterialPageRoute(builder: (_) => SecondScreen()));
          },
          child: Hero(
            tag: 'hero-image-tag',
            child: Container(
              width: 100,
              height: 100,
              color: Colors.red,
              child: Center(child: Text('Tap Me', style: TextStyle(color: Colors.white))),
            ),
          ),
        ),
      ),
    );
  }
}

// Second Screen
class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Screen')),
      body: Center(
        child: Hero(
          tag: 'hero-image-tag',
          child: Container(
            width: 300,
            height: 300,
            color: Colors.blue,
            child: Center(child: Text('Big Hero', style: TextStyle(color: Colors.white))),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: FirstScreen()));
}

Quiz over expliciete animaties en Heroes

Welke van de volgende uitspraken over AnimationController en Hero-widgets zijn juist?

Beantwoord dit in de interactieve les

Samenvatting: expliciete animaties en Heroes

In deze les heb je expliciete animaties en Hero-widgets onder de knie gekregen:

Expliciete animaties: bieden gedetailleerde controle over het afspelen van animaties met AnimationController en Tween.
AnimationController: beheert de duur en het afspelen van animaties (vooruit, achteruit).
Tween: definieert het specifieke bereik van waarden dat een animatie doorloopt.
AnimatedBuilder: een efficiënte manier om alleen de geanimeerde delen van je gebruikersinterface opnieuw op te bouwen.
Hero-widgets: maken boeiende overgangen met gedeelde elementen tussen schermen met overeenkomende tag-eigenschappen.

Je hebt nu krachtige hulpmiddelen om dynamische en boeiende gebruikersinterfaces te maken!

Gratis beginnen

Leer Dart met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 22
Lessen: 88

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Expliciete animaties en Heroes” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Mobiele ontwikkeling met Flutter, waaronder “Expliciete animaties en Heroes”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Mobiele ontwikkeling met Flutter bevat in totaal 4 lessen.

Wat leer ik in “Expliciete animaties en Heroes”?

Beheers expliciete animaties met `AnimationController` en `Tween`s en maak boeiende overgangen met gedeelde elementen met Hero-widgets. Je oefent met Mobiele ontwikkeling met Flutter door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Mobiele ontwikkeling met Flutter te beginnen?

Ervaring vooraf is niet nodig. Mobiele ontwikkeling met Flutter op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “Expliciete animaties en Heroes”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Mobiele ontwikkeling met Flutter?

Ja. Elke les over Mobiele ontwikkeling met Flutter bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Mobiele ontwikkeling met Flutter