Lære Implicit and Explicit Animations | Animations and Advanced UI

Flutter provides powerful animation capabilities that help you create engaging and dynamic user interfaces. Animations in Flutter fall into two main categories: implicit and explicit animations.

Understanding the distinction between these types is crucial for choosing the right approach for your UI design.

main.dart


              123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
            
// main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(ImplicitAnimationDemo());
}

class ImplicitAnimationDemo extends StatefulWidget {
  @override
  _ImplicitAnimationDemoState createState() => _ImplicitAnimationDemoState();
}

class _ImplicitAnimationDemoState extends State<ImplicitAnimationDemo> {
  double _boxSize = 100;
  Color _boxColor = Colors.blue;

  void _changeProperties() {
    setState(() {
      _boxSize = _boxSize == 100 ? 200 : 100;
      _boxColor = _boxColor == Colors.blue ? Colors.orange : Colors.blue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Implicit Animation Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              AnimatedContainer(
                width: _boxSize,
                height: _boxSize,
                color: _boxColor,
                duration: Duration(seconds: 1),
                curve: Curves.easeInOut,
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _changeProperties,
                child: Text('Animate'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Implicit animations, such as AnimatedContainer, work by automatically animating property changes like width, height, or color. You only update the values, and Flutter handles the timing and interpolation, making them perfect for simple transitions with minimal code.

main.dart


              1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
            
import 'package:flutter/material.dart';

void main() {
  runApp(ExplicitAnimationDemo());
}

class ExplicitAnimationDemo extends StatefulWidget {
  @override
  _ExplicitAnimationDemoState createState() => _ExplicitAnimationDemoState();
}

class _ExplicitAnimationDemoState extends State<ExplicitAnimationDemo>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _opacityAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );
    _opacityAnimation = Tween<double>(begin: 1.0, end: 0.0).animate(_controller);
  }

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

  void _toggleAnimation() {
    if (_controller.status == AnimationStatus.completed) {
      _controller.reverse();
    } else {
      _controller.forward();
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Explicit Animation Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              AnimatedBuilder(
                animation: _opacityAnimation,
                builder: (context, child) {
                  return Opacity(
                    opacity: _opacityAnimation.value,
                    child: Container(
                      width: 150,
                      height: 150,
                      color: Colors.green,
                    ),
                  );
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _toggleAnimation,
                child: Text('Fade'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Explicit animations use AnimationController and AnimatedBuilder to give full control over timing, direction, and coordination. Use implicit animations for simple property changes with minimal code, and explicit animations when you need precise, custom, or user-driven behavior.

Var alt klart?

Tak for dine kommentarer!

Sektion 3. Kapitel 1

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Stryg for at vise menuen

Understanding the distinction between these types is crucial for choosing the right approach for your UI design.

main.dart


              123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
            
// main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(ImplicitAnimationDemo());
}

class ImplicitAnimationDemo extends StatefulWidget {
  @override
  _ImplicitAnimationDemoState createState() => _ImplicitAnimationDemoState();
}

class _ImplicitAnimationDemoState extends State<ImplicitAnimationDemo> {
  double _boxSize = 100;
  Color _boxColor = Colors.blue;

  void _changeProperties() {
    setState(() {
      _boxSize = _boxSize == 100 ? 200 : 100;
      _boxColor = _boxColor == Colors.blue ? Colors.orange : Colors.blue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Implicit Animation Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              AnimatedContainer(
                width: _boxSize,
                height: _boxSize,
                color: _boxColor,
                duration: Duration(seconds: 1),
                curve: Curves.easeInOut,
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _changeProperties,
                child: Text('Animate'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

main.dart


              1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
            
import 'package:flutter/material.dart';

void main() {
  runApp(ExplicitAnimationDemo());
}

class ExplicitAnimationDemo extends StatefulWidget {
  @override
  _ExplicitAnimationDemoState createState() => _ExplicitAnimationDemoState();
}

class _ExplicitAnimationDemoState extends State<ExplicitAnimationDemo>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _opacityAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );
    _opacityAnimation = Tween<double>(begin: 1.0, end: 0.0).animate(_controller);
  }

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

  void _toggleAnimation() {
    if (_controller.status == AnimationStatus.completed) {
      _controller.reverse();
    } else {
      _controller.forward();
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Explicit Animation Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              AnimatedBuilder(
                animation: _opacityAnimation,
                builder: (context, child) {
                  return Opacity(
                    opacity: _opacityAnimation.value,
                    child: Container(
                      width: 150,
                      height: 150,
                      color: Colors.green,
                    ),
                  );
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _toggleAnimation,
                child: Text('Fade'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Var alt klart?

Tak for dine kommentarer!

Sektion 3. Kapitel 1