Flutter
Curve
Pick a timing curve with the Curves class.
The Curves class
The Curves class lets you choose the timing curve of an animation. Curves.easeIn starts slowly, Curves.easeOut ends slowly, and Curves.easeInOut is slow at both ends. These curves make animations feel natural.
AnimatedContainer(
duration: const Duration(seconds: 1),
curve: Curves.easeInOut,
width: 200,
)
The curve parameter defaults to Curves.linear.
The curve parameter
The curve parameter is available in AnimatedContainer and other animated widgets. When you pass a value like Curves.easeInOut, the animation's timing follows that curve. Using a curve instead of a linear transition makes the animation feel more natural.
AnimatedContainer(
duration: const Duration(seconds: 1),
curve: Curves.easeOut,
width: 200,
)
Exercise Animation with Curves
Define a StatelessWidget named Ornek. Its build method should return an AnimatedContainer with duration set to Duration(seconds: 1), curve set to Curves.easeInOut, and width set to 200. Print 'hazir' in main.
Show example solution
import 'package:flutter/material.dart';
class Ornek extends StatelessWidget {
const Ornek({super.key});
@override
Widget build(BuildContext context) {
return AnimatedContainer(
duration: const Duration(seconds: 1),
curve: Curves.easeInOut,
width: 200,
);
}
}
void main() {
print('hazir');
}
Test yourself
-
Which is a valid Curves value?
- Curves.slowIn
- Curves.quickIn
- Curves.hardOut
- Curves.easeIn
Show answer
Curves.easeIn — Curves.easeIn is a valid curve. slowIn, quickIn, and hardOut are not defined in the Curves class; the correct names are easeIn, easeOut, and easeInOut.
-
The curve parameter
AnimatedContainer(
duration: const Duration(seconds: 1),
____: Curves.easeInOut,
width: 200,
)
Show answer
AnimatedContainer(
duration: const Duration(seconds: 1),
curve: Curves.easeInOut,
width: 200,
)
-
Curves parts
- Curves.easeIn
- Curve that starts slowly
- Curves.easeOut
- Curve that ends slowly
- Curves.easeInOut
- Curve slow at both ends
- Curves.linear
- Constant-speed curve
Next lesson: Summary - Animation basics
