197. Finetuning Explicit Animations

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 위젯을 사용했다. 이부분에서 조금 더 세부조정이 가능하다.