188. Outsourcing State Into The Provider

1. filters 화면에 초기값을 provider에서 가져오자.

 

- filters.dart

import 'package:flutter/material.dart';

import 'package:flutter_riverpod/flutter_riverpod.dart';

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

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

import 'package:meals/providers/filters_provider.dart';

class FiltersScreen extends ConsumerWidget {

  const FiltersScreen({super.key});

  @override

  Widget build(BuildContext context, WidgetRef ref) {

    final activeFilters = ref.watch(filtersProvider);

    return Scaffold(

      appBar: AppBar(

        title: const Text('Your Filters'),

      ),

      body: Column(

        children: [

          SwitchListTile(

            value: activeFilters[Filter.glutenFree]!,

            onChanged: (isChecked) {

              ref

                  .read(filtersProvider.notifier)

                  .setFilter(Filter.glutenFree, 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: activeFilters[Filter.lactoseFree]!,

            onChanged: (isChecked) {

              ref

                  .read(filtersProvider.notifier)

                  .setFilter(Filter.lactoseFree, 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: activeFilters[Filter.vegetarian]!,

            onChanged: (isChecked) {

              ref

                  .read(filtersProvider.notifier)

                  .setFilter(Filter.vegetarian, 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: activeFilters[Filter.vegan]!,

            onChanged: (isChecked) {

              ref

                  .read(filtersProvider.notifier)

                  .setFilter(Filter.vegan, 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) filters 화면을 stateful -> stateless의 역할로 바꿔주고, 이를 연동하기 위해 CousumerWidget을 사용한다. 그 이유는 

아래 ref.watch를 통해 provider 상태값을 실시간으로 확인 할 수 있고, watch를 통해 상태값이 바뀌면 해당 위젯은 리빌딩 되기 때문이다.

2) onChanged 부분에 값을 기존에는 로컬에 저장했지만, 이제는 provider에 값을 전달해준다. 그리고 기존 value값은 로컬값을 사용했지만 지금은 provider에서 watch를 통해 얻은 값을 가져와서 사용한다.

 

기존보다 위젯 코드가 훨씬 줄었고, 깔끔해졌다.