코딩강의/meals_app(플러터-유데미)

~182. Using a Provider

김마드 2023. 11. 2. 11:25

1. 기존 앱에서 Provider를 적용해보자. 사용해보자.

기존 앱에는 다중 화면, 다중 위젯에서 데이터 이동하는데 불편한 점이 많았다. 이러한 문제를 해결하기 위해 App 전역에 상태 값을 관리 할 수 있는 방법을 살펴보자.

 

riverpod이 그 도구이다. --> flutter pub add flutter_riverpod설치

 

- main.dart

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

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

final theme = ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(
    brightness: Brightness.dark,
    seedColor: const Color.fromARGB(255, 131, 57, 0),
  ),
  textTheme: GoogleFonts.latoTextTheme(),
);

void main() {
  runApp(
    const ProviderScope(
      child: App(),
    ),
  );
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: theme,
      home: const TabsScreen(),
    );
  }
}

1) App을 ProviderScope로 감싸줘야 App전역에 적용이 된다. (만약, 특정 위젯에만 적용하려면 그 위젯에만 감싸주면 되는거 같은데, 굳이 그럴 필요 없이 main App을 감싸주면 될듯하다)

 

- providers/meals_provider.dart(new)

import 'package:flutter_riverpod/flutter_riverpod.dart';

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

final mealsProvider = Provider((ref) {
  return dummyMeals;
});

 

1) 별도 provider파일을 생성 한 후(이 곳에서 앱 전역에 상태값을 전달해줄 수 있다, 테스트로 dummyMeals 데이터를 적용해보자.

 

- tabs.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.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';
import 'package:meals/providers/meals_provider.dart';

const kInitialFilters = {
  Filter.glutenFree: false,
  Filter.lactoseFree: false,
  Filter.vegetarian: false,
  Filter.vegan: false
};

class TabsScreen extends ConsumerStatefulWidget {
  const TabsScreen({super.key});

  @override
  ConsumerState<TabsScreen> createState() {
    return _TabsScreenState();
  }
}

class _TabsScreenState extends ConsumerState<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 meals = ref.watch(mealsProvider);
    final availableMeals = meals.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) 앱 전역에 상태관리를 하기 위해서는 제공자(Provider)와 소비자(Consumer)가 있다. 말 그대로 제공자는 상태 값을 관리하는 주체(제공하는 파일) 소비자는 전역 상태 관리 값을 쓰이는 곳이다.

 

위 tabs.dart는 값을 사용해야 하기 때문에 Consumer의 역할이다. 이를 위해, stateful은 ConsumerStatefulWidget 로 이름을 바꿔주어야 하고, State는 ConsumerState로 이름을 바꿔주자. (riverpod패키지)

 

2)     final meals = ref.watch(mealsProvider); 이 부분을 통해 이전에 Provider파일에서 값을 가져 올 수 있고, read()는 한번만 값을 가져온다는 것이고, watch는 리렌더링시, provider의 값이 바뀔때마다 가져온다는 것이기 때문에 기본적으로 watch를 사용하자. 그리고 해당 final meals를 적용해보면, 앱은 기존과 똑같이 정상 작동 된다. (전역 상태 값 적용 됨)

 

저작자표시 (새창열림)