~182. Using a Provider

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를 적용해보면, 앱은 기존과 똑같이 정상 작동 된다. (전역 상태 값 적용 됨)