Curve
- Flutter course
- Intermediate
- Lesson 79/99
- 4 min
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,
)Practice 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.
Starter code
import 'package:flutter/material.dart';
class Ornek extends StatelessWidget {
const Ornek({super.key});
// build metodu AnimatedContainer döndürsün
// duration Duration(seconds: 1) olsun
// curve Curves.easeInOut olsun
// width 200 olsun
}
void main() {
// 'hazir' yazdır
}Sample 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');
}Expected output
hazir
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which is a valid Curves value?
- Curves.slowIn
- Curves.quickIn
- Curves.hardOut
- Curves.easeIn Correct answer
Explanation: 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.
2 The curve parameter
AnimatedContainer(
duration: const Duration(seconds: 1),
____: Curves.easeInOut,
width: 200,
)AnimatedContainer(
duration: const Duration(seconds: 1),
curve: Curves.easeInOut,
width: 200,
)Explanation: curve is the parameter that sets AnimatedContainer's timing curve. tween is a transition object, animation is an Animation object, and style is for style objects like TextStyle; none of these are the curve parameter.
3 Curves parts
| Term | Meaning |
|---|---|
Curves.easeIn |
Curve that starts slowly |
Curves.easeOut |
Curve that ends slowly |
Curves.easeInOut |
Curve slow at both ends |
Curves.linear |
Constant-speed curve |