Mobiludvikling med Flutter · Lektion

Implicitte animationer

Implementer implicitte animationer med widgets som `AnimatedContainer` og `AnimatedOpacity` for jævne, automatiske overgange.

Lektion 2 af 411 trin

Implicitte animationer er en gratis Mobiludvikling med Flutter-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Mobiludvikling med Flutter, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Mobiludvikling med Flutter-kurset indeholder 4 lektioner i alt.

Nem animation med implicitte widgets

Flutter tilbyder en nem måde at føje glidende animationer til din app på: implicitte animationer. Det er animationer, hvor du blot angiver den ønskede sluttilstand, hvorefter Flutter håndterer overgangen.

Du behøver ikke administrere animationscontrollere eller lyttere. Du skal bare ændre en egenskab, så animerer Flutter den for dig!

Magien bag implicitte animationer

Når du bruger en widget med implicit animation, angiver du en ny værdi for en af dens animerede egenskaber (f.eks. størrelse eller farve). Flutter interpolerer derefter automatisk mellem den gamle og den nye værdi over en angivet duration.

Det svarer til at fortælle Flutter: "Gå fra A til B på 500 millisekunder." Flutter beregner selv alle trinnene imellem.

Animer størrelse og farve med Container

AnimatedContainer er en af de mest alsidige implicitte widgets. Den animerer automatisk ændringer i egenskaber som width, height, color, alignment og decoration.

Du skal bare opdatere tilstanden med nye værdier, så klarer AnimatedContainer resten!

Prøv AnimatedContainer

Tryk på containeren nedenfor! Bemærk, hvordan dens størrelse og farve ændrer sig glidende. Vi ændrer blot dens egenskaber og kalder setState, hvorefter AnimatedContainer håndterer animationen.

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),
            ),
          ),
        ),
      ),
    );
  }
}

Lad widgets tone ind og ud med AnimatedOpacity

Widgetten AnimatedOpacity er perfekt til at vise eller skjule dele af din brugergrænseflade på en glidende måde. Den animerer ændringer i egenskaben opacity.

En opacitet på 0.0 betyder helt gennemsigtig (usynlig), mens 1.0 betyder helt uigennemsigtig (synlig).

Se AnimatedOpacity i aktion

Se teksten tone ind og ud med en glidende overgang. Vi ændrer blot en boolesk tilstand og opdaterer opacitetsværdien ud fra den.

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'),
            ),
          ],
        ),
      ),
    );
  }
}

Glidende krydsfading mellem widgets

Når du skal skifte mellem to forskellige widgets med en glidende udtoningseffekt, er AnimatedCrossFade det oplagte valg. Den er velegnet til at vise forskellige tilstande, f.eks. når en indlæsningsindikator bliver til indhold.

Du angiver en firstChild og en secondChild og styrer, hvilken der er synlig, med crossFadeState.

Prøv AnimatedCrossFade

Tryk på knappen for at skifte mellem to forskellige tekstwidgets. Bemærk, hvordan den ene toner ud, mens den anden toner ind, så der opstår en glidende overgang.

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'),
            ),
          ],
        ),
      ),
    );
  }
}

Finjustering af animationer: Varighed og kurve

To afgørende egenskaber for alle implicitte animationer er duration og curve:

duration: Definerer, hvor lang tid animationen tager at gennemføre. Brug Duration(milliseconds: ...) eller Duration(seconds: ...).
curve: Styrer animationens hastighed undervejs. Curves.linear har konstant hastighed, Curves.easeOut starter hurtigt og sænker farten, og Curves.bounceIn tilføjer en hoppende effekt.

Eksperimentér med forskellige kurver for at finde den helt rigtige fornemmelse!

Tjek af implicitte animationer

Du vil oprette en knap, der får en tekstwidget til at forsvinde glidende, når der trykkes på den. Hvilken widget med implicit animation er bedst egnet til denne opgave?

Besvar den i den interaktive lektion

Opsummering af implicitte animationer

Godt klaret! Du har lært om styrken ved implicitte animationer i Flutter. De gør det muligt at tilføje glidende, automatiske overgange ved blot at ændre widgetegenskaber.

Vi undersøgte AnimatedContainer til at animere størrelse, farve og form.
AnimatedOpacity til at tone elementer ind og ud.
AnimatedCrossFade til at skifte mellem to widgets med en glidende blanding.
Husk at angive duration og vælge en passende curve til dine animationer!

Derefter dykker vi ned i eksplicitte animationer, som giver mere kompleks og brugerdefineret kontrol.

Gratis at komme i gang

Lær Dart med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 22
Lektioner: 88

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Implicitte animationer” gratis?

Ja — alle 3 lektioner i læringssporet Mobiludvikling med Flutter, inklusive “Implicitte animationer”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Mobiludvikling med Flutter-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Implicitte animationer”?

Implementer implicitte animationer med widgets som `AnimatedContainer` og `AnimatedOpacity` for jævne, automatiske overgange. Du øver dig i Mobiludvikling med Flutter med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Mobiludvikling med Flutter?

Der kræves ingen tidligere erfaring. Mobiludvikling med Flutter på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Implicitte animationer”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Mobiludvikling med Flutter-lektion?

Ja. Alle Mobiludvikling med Flutter-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Mobiludvikling med Flutter