Summary - Animation basics

Combine AnimatedContainer and Tween to make an animated card.

Animation combination

By combining AnimatedContainer, Tween, and Curves you create smooth animations. AnimatedContainer takes duration and curve, Tween produces values between begin and end, and Curves shapes the timing.

AnimatedContainer(
  duration: const Duration(seconds: 1),
  curve: Curves.easeInOut,
  width: tween.transform(animasyon.value),
)

Together these three parts control both the value transition and the timing curve.

Exercise Build a transition card

Define a StatelessWidget named GecisKarti with a required final Animation<double> animasyon field. Its build method should return an AnimatedContainer with duration set to Duration(seconds: 1), curve set to Curves.easeInOut, and width set to animasyon.value. Print 'hazir' in main.

Show example solution

import 'package:flutter/material.dart';

class GecisKarti extends StatelessWidget {
  final Animation<double> animasyon;
  const GecisKarti({super.key, required this.animasyon});

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: const Duration(seconds: 1),
      curve: Curves.easeInOut,
      width: animasyon.value,
    );
  }
}

void main() {
  print('hazir');
}

Test yourself

Which parts work together in the animation combination?
- Provider + ChangeNotifier + setState
- AnimatedContainer + Tween + Curves
- GoRouter + GoRoute + context.go
- sqflite + http + jsonDecode
Show answer

AnimatedContainer + Tween + Curves — AnimatedContainer provides the animated transition, Tween produces values, and Curves shapes the timing; the three work together. The other options concern database/network, state management, and navigation.

The Curves value

AnimatedContainer(
  duration: const Duration(seconds: 1),
  curve: ____,
  width: animasyon.value,
)

Show answer

AnimatedContainer(
  duration: const Duration(seconds: 1),
  curve: Curves.easeInOut,
  width: animasyon.value,
)

Summary parts

AnimatedContainer

Animated container
Tween

Transition between begin and end
Curves

Timing curve
duration

Animation duration

Next lesson: Project skeleton

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies