코딩강의/meals_app(플러터-유데미)
197. Finetuning Explicit Animations
김마드
2023. 11. 6. 17:10
1. 명시적 애니메이션을 조금 더 세부조정하는 방법을 알아보자.
- categories.dart
import 'package:flutter/material.dart';
import 'package:meals/data/dummy_data.dart';
import 'package:meals/models/meal.dart';
import 'package:meals/widgets/category_grid_item.dart';
import 'package:meals/screens/meals.dart';
import 'package:meals/models/category.dart';
class CategoriesScreen extends StatefulWidget {
const CategoriesScreen({
super.key,
required this.availableMeals,
});
final List<Meal> availableMeals;
@override
State<CategoriesScreen> createState() => _CategoriesScreenState();
}
class _CategoriesScreenState extends State<CategoriesScreen>
with SingleTickerProviderStateMixin {
late AnimationController _animationController;
@override
void initState() {
super.initState();
_animationController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 300),
lowerBound: 0,
upperBound: 1,
);
_animationController.forward();
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
void _selectCategory(BuildContext context, Category category) {
final filteredMeals = widget.availableMeals
.where((meal) => meal.categories.contains(category.id))
.toList();
Navigator.of(context).push(
MaterialPageRoute(
builder: (ctx) => MealsScreen(
title: category.title,
meals: filteredMeals,
),
),
); // Navigator.push(context, route)
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _animationController,
child: GridView(
padding: const EdgeInsets.all(24),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 3 / 2,
crossAxisSpacing: 20,
mainAxisSpacing: 20,
),
children: [
// availableCategories.map((category) => CategoryGridItem(category: category)).toList()
for (final category in availableCategories)
CategoryGridItem(
category: category,
onSelectCategory: () {
_selectCategory(context, category);
},
)
],
),
builder: (context, child) => SlideTransition(
position: Tween(
begin: const Offset(0, 0.3),
end: const Offset(0, 0),
).animate(
CurvedAnimation(
parent: _animationController,
curve: Curves.easeInOut,
),
),
child: child,
),
);
}
}
1) SlideTransition 위젯을 사용했다. 이부분에서 조금 더 세부조정이 가능하다.