~174. Applying Filters (네비게이션 강의 부분 마지막)

1. 필터를 적용해보자.

 

2. 필터값을 저장해보자.

 

- filters.dart

import 'package:flutter/material.dart';

// import 'package:meals/screens/tabs.dart';

// import 'package:meals/widgets/main_drawer.dart';

enum Filter {

  glutenFree,

  lactoseFree,

  vegetarian,

  vegan,

}

class FiltersScreen extends StatefulWidget {

  const FiltersScreen({super.key, required this.currentFilters});

  final Map<Filter, bool> currentFilters;

  @override

  State<FiltersScreen> createState() {

    return _FiltersScreenState();

  }

}

class _FiltersScreenState extends State<FiltersScreen> {

  var _glutenFreeFilterSet = false;

  var _lactoseFreeFilterSet = false;

  var _vegetarianFilterSet = false;

  var _veganFilterSet = false;

  @override

  void initState() {

    super.initState();

    _glutenFreeFilterSet = widget.currentFilters[Filter.glutenFree]!;

    _lactoseFreeFilterSet = widget.currentFilters[Filter.lactoseFree]!;

    _vegetarianFilterSet = widget.currentFilters[Filter.vegetarian]!;

    _veganFilterSet = widget.currentFilters[Filter.vegan]!;

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: const Text('Your Filters'),

      ),

      // drawer: MainDrawer(

      //   onSelectScreen: (identifier) {

      //     Navigator.of(context).pop();

      //     if (identifier == 'meals') {

      //       Navigator.of(context).pushReplacement(

      //         MaterialPageRoute(

      //           builder: (ctx) => const TabsScreen(),

      //         ),

      //       );

      //     }

      //   },

      // ),

      body: WillPopScope(

        onWillPop: () async {

          Navigator.of(context).pop({

            Filter.glutenFree: _glutenFreeFilterSet,

            Filter.lactoseFree: _lactoseFreeFilterSet,

            Filter.vegetarian: _vegetarianFilterSet,

            Filter.vegan: _veganFilterSet,

          });

          return false;

        },

        child: Column(

          children: [

            SwitchListTile(

              value: _glutenFreeFilterSet,

              onChanged: (isChecked) {

                setState(() {

                  _glutenFreeFilterSet = isChecked;

                });

              },

              title: Text(

                'Gluten-free',

                style: Theme.of(context).textTheme.titleLarge!.copyWith(

                      color: Theme.of(context).colorScheme.onBackground,

                    ),

              ),

              subtitle: Text(

                'Only include gluten-free meals.',

                style: Theme.of(context).textTheme.labelMedium!.copyWith(

                      color: Theme.of(context).colorScheme.onBackground,

                    ),

              ),

              activeColor: Theme.of(context).colorScheme.tertiary,

              contentPadding: const EdgeInsets.only(left: 34, right: 22),

            ),

            SwitchListTile(

              value: _lactoseFreeFilterSet,

              onChanged: (isChecked) {

                setState(() {

                  _lactoseFreeFilterSet = isChecked;

                });

              },

              title: Text(

                'Lactose-free',

                style: Theme.of(context).textTheme.titleLarge!.copyWith(

                      color: Theme.of(context).colorScheme.onBackground,

                    ),

              ),

              subtitle: Text(

                'Only include lactose-free meals.',

                style: Theme.of(context).textTheme.labelMedium!.copyWith(

                      color: Theme.of(context).colorScheme.onBackground,

                    ),

              ),

              activeColor: Theme.of(context).colorScheme.tertiary,

              contentPadding: const EdgeInsets.only(left: 34, right: 22),

            ),

            SwitchListTile(

              value: _vegetarianFilterSet,

              onChanged: (isChecked) {

                setState(() {

                  _vegetarianFilterSet = isChecked;

                });

              },

              title: Text(

                'Vegetarian',

                style: Theme.of(context).textTheme.titleLarge!.copyWith(

                      color: Theme.of(context).colorScheme.onBackground,

                    ),

              ),

              subtitle: Text(

                'Only include vegetarian meals.',

                style: Theme.of(context).textTheme.labelMedium!.copyWith(

                      color: Theme.of(context).colorScheme.onBackground,

                    ),

              ),

              activeColor: Theme.of(context).colorScheme.tertiary,

              contentPadding: const EdgeInsets.only(left: 34, right: 22),

            ),

            SwitchListTile(

              value: _veganFilterSet,

              onChanged: (isChecked) {

                setState(() {

                  _veganFilterSet = isChecked;

                });

              },

              title: Text(

                'Vegan',

                style: Theme.of(context).textTheme.titleLarge!.copyWith(

                      color: Theme.of(context).colorScheme.onBackground,

                    ),

              ),

              subtitle: Text(

                'Only include vegan meals.',

                style: Theme.of(context).textTheme.labelMedium!.copyWith(

                      color: Theme.of(context).colorScheme.onBackground,

                    ),

              ),

              activeColor: Theme.of(context).colorScheme.tertiary,

              contentPadding: const EdgeInsets.only(left: 34, right: 22),

            ),

          ],

        ),

      ),

    );

  }

}

1) _glutenFreeFilterSet 이하4개 설정 값의 초기값을 false로 설정해두었다.

2) 최초 초기값 이후에 설정된 값에 대해서는 initState를 통해 화면을 이동하더라도 값이 계속 저장되게끔 세팅했다.

3) WillPopScope를 통해 pop(뒤로가기)가 될 때, 값을 전달해줄 수 있게 하였다. 해당 값을 tabs화면에서 사용하게 된다.

이 때, 반환되어야 하는 값은 futre이기 때문에 async를 사용해준다. (정확히 잘 이해 안되도 넘어가자. return 값이 false인데 아마 pop이후 return값을 다시 확인 하기 위해 callback을 하기 때문인거 같다. 이때 return 값이 true면 한번 더 pop되고 false면 한번만 pop된다)

4) 이하 아래 부분은 SwitchListTile 설정 부분

 

- 결과 화면

 

- tabs.dart

import 'package:flutter/material.dart';

import 'package:meals/data/dummy_data.dart';

import 'package:meals/models/meal.dart';

import 'package:meals/screens/categories.dart';

import 'package:meals/screens/filters.dart';

import 'package:meals/screens/meals.dart';

import 'package:meals/widgets/main_drawer.dart';

const kInitialFilters = {

  Filter.glutenFree: false,

  Filter.lactoseFree: false,

  Filter.vegetarian: false,

  Filter.vegan: false

};

class TabsScreen extends StatefulWidget {

  const TabsScreen({super.key});

  @override

  State<TabsScreen> createState() {

    return _TabsScreenState();

  }

}

class _TabsScreenState extends State<TabsScreen> {

  int _selectedPageIndex = 0;

  final List<Meal> _favoriteMeals = [];

  Map<Filter, bool> _selectedFilters = kInitialFilters;

  void _showInfoMessage(String message) {

    ScaffoldMessenger.of(context).clearSnackBars();

    ScaffoldMessenger.of(context).showSnackBar(

      SnackBar(

        content: Text(message),

      ),

    );

  }

  void _toggleMealFavoriteStatus(Meal meal) {

    final isExisting = _favoriteMeals.contains(meal);

    if (isExisting) {

      setState(() {

        _favoriteMeals.remove(meal);

      });

      _showInfoMessage('Meal is no longer a favorite.');

    } else {

      setState(() {

        _favoriteMeals.add(meal);

        _showInfoMessage('Marked as a favorite!');

      });

    }

  }

  void _selectPage(int index) {

    setState(() {

      _selectedPageIndex = index;

    });

  }

  void _setScreen(String identifier) async {

    Navigator.of(context).pop();

    if (identifier == 'filters') {

      final result = await Navigator.of(context).push<Map<Filter, bool>>(

        MaterialPageRoute(

          builder: (ctx) => FiltersScreen(

            currentFilters: _selectedFilters,

          ),

        ),

      );

      setState(() {

        _selectedFilters = result ?? kInitialFilters;

      });

    }

  }

  @override

  Widget build(BuildContext context) {

    final availableMeals = dummyMeals.where((meal) {

      if (_selectedFilters[Filter.glutenFree]! && !meal.isGlutenFree) {

        return false;

      }

      if (_selectedFilters[Filter.lactoseFree]! && !meal.isLactoseFree) {

        return false;

      }

      if (_selectedFilters[Filter.vegetarian]! && !meal.isVegetarian) {

        return false;

      }

      if (_selectedFilters[Filter.vegan]! && !meal.isVegan) {

        return false;

      }

      return true;

    }).toList();

    Widget activePage = CategoriesScreen(

      onToggleFavorite: _toggleMealFavoriteStatus,

      availableMeals: availableMeals,

    );

    var activePageTitle = 'Categories';

    if (_selectedPageIndex == 1) {

      activePage = MealsScreen(

        meals: _favoriteMeals,

        onToggleFavorite: _toggleMealFavoriteStatus,

      );

      activePageTitle = 'Your Favorites';

    }

    return Scaffold(

      appBar: AppBar(

        title: Text(activePageTitle),

      ),

      drawer: MainDrawer(

        onSelectScreen: _setScreen,

      ),

      body: activePage,

      bottomNavigationBar: BottomNavigationBar(

        onTap: _selectPage,

        currentIndex: _selectedPageIndex,

        items: const [

          BottomNavigationBarItem(

            icon: Icon(Icons.set_meal),

            label: 'Categories',

          ),

          BottomNavigationBarItem(

            icon: Icon(Icons.star),

            label: 'Favorites',

          ),

        ],

      ),

    );

  }

}

1) 위에 설명한 필터 화면에 초기값을 전달해주기 위해 _selectedFilters부분을 설정했다. 해당 값의 초기 값은

kInitialFilters 이다. (이때 k를 붙이는이유는 전역 변수에 사용할 때) 그리고 A ?? B의 뜻은 A가 null이 아니면 A를 사용 null이면 B 값을 쓴다는 뜻이다.

2)_setScreen를 async await 구문으로, 사용하였는데 이유는 필터스크린에서 넘어 오는 값이 futre이기 때문이다. 따라서 필터스크린에서 값을 받게되면 result 값에 담기게 되고, 마지막 setState 부분을 통해 result의 값이 _selectedFilters의 값으로 할당된다.

3) availableMeals를 통해 _selectedFilters에서 필터된 값을 추출하여, 최종적으로 availableMeals에는 필터링된 값이 리스트에 담기게 된다. 해당 availableMeals값은 카테고리 화면으로 넘겨준다.

 

- 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 StatelessWidget {

  const CategoriesScreen({

    super.key,

    required this.onToggleFavorite,

    required this.availableMeals,

  });

  final void Function(Meal meal) onToggleFavorite;

  final List<Meal> availableMeals;

  void _selectCategory(BuildContext context, Category category) {

    final filteredMeals = availableMeals

        .where((meal) => meal.categories.contains(category.id))

        .toList();

    Navigator.of(context).push(

      MaterialPageRoute(

        builder: (ctx) => MealsScreen(

          title: category.title,

          meals: filteredMeals,

          onToggleFavorite: onToggleFavorite,

        ),

      ),

    ); // Navigator.push(context, route)

  }

  @override

  Widget build(BuildContext context) {

    return 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);

            },

          )

      ],

    );

  }

}

1) availableMeals을 한번 더 where를 통해 categori.id에 맞게 한번 더 필터링 해주고, 해당 값이 filteredMeals에 담기게 된다.