【Flutter】state_notifier + flutter_hooks+freezed로 좋아하는 버튼 만들기

freezed의 사용 절차 노트.
색깔을 누르면 변하는 아이콘버턴을 만들어 보세요.
이 방법으로 하면 다양한 곳에서 상태를 호출할 수 있어 여러 페이지에 좋아하는 버튼을 표시하고 싶을 때 편리합니다!

1. 이렇게

https://github.com/nasubibocchi/favo_statenotifier_freezed

2. 도입된 Package

hooks_riverpod

flutter_hooks

freezed

build_runner

build_runner는 dev. - 네.dependencies에 넣다.
나는 HookConsuumerWidget을 사용하고 싶어서 hooksriverpod는 Preerease를 사용합니다.
추기riverpod는 1.0.0으로 발행🌸

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  hooks_riverpod: ^1.0.0-dev.11
  flutter_hooks: ^0.18.0
  freezed: ^0.15.0+1

dev_dependencies:
  flutter_test:
    sdk: flutter
  build_runner: ^2.1.4

3. UI 만들기

나는 개인이 먼저 외관을 만드는 것이 비교적 쉽다고 생각한다.
이번에는 가짜 데이터로'타이틀'과'isFavo'가 들어간 키의 지도 목록을 만들었다.

class FavoWidget extends HookConsumerWidget {
  List<Contents> dammyList = dammyData
      .map((e) => Contents(title: e['title'], isFavo: e['isFavo']))
      .toList();

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final size = MediaQuery.of(context).size;

    return Scaffold(
      body: SingleChildScrollView(
        child: ListView.builder(
            shrinkWrap: true,
            itemCount: 3, //あとで変更
            itemBuilder: (BuildContext context, int index) {
              return Card(
                child: SizedBox(
                  height: size.height * 0.1,
                  child: Row(children: [
                    SizedBox(
                      width: size.width * 0.8,
                      child: Padding(
                        padding: const EdgeInsets.all(16.0),
                        child: Text('ダミー'), //あとで変更
                      ),
                    ),
                    IconButton(
                      onPressed: () {
                        //あとで入れる
                      },
                      icon: Icon(Icons.favorite,
                          color: Colors.grey), //あとで変更
                    ),
                  ]),
                ),
              );
            }),
      ),
    );
  }
}

4.state반을 설립

상태를 유지할 변수(등)를 정의합니다.

import 'package:favo_statenotifier_freezed/entities/contents.dart';
import 'package:flutter/material.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:flutter/foundation.dart';

part 'favo_state.freezed.dart'; 

@freezed
class FavoState with _$FavoState {
  const factory FavoState(
      {@Default([]) List<Contents> data}) = _FavoState;
}

여섯 번째 줄 "part'favostate.freezed.dart';” 미리 넣다.
이 단계에서 오류가 발생하면 된다.

5. favo_state.freezed.데이터 생성을 위한 명령 실행

명령줄에서 다음과 같은 조작을 실행하다

flutter pub run build_runner build --delete-conflicting-outputs 

잘 되면.의 오류가 사라짐state.freezed.데이터를 생성하다.

6. 컨디션 바꾸는 방법 만들기

제작은 4로 제작된 상태가 변하는 방법을 사용한다.
이번에는 상태의 초기화와 변경이다.

import 'package:favo_statenotifier_freezed/entities/contents.dart';
import 'package:favo_statenotifier_freezed/pages/favo_state.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

class FavoController extends StateNotifier<FavoState> {
  FavoController() : super(const FavoState());

  void initState ({required List<Contents> data}) {
    state = state.copyWith(data: data);
  }

  void favoriteChange ({required List<Contents> data, required int index}) {
    data[index].isFavo = !data[index].isFavo;
    state = state.copyWith(data: data);
  }

}

List 내용을 바꾼 후state의 구조기를 대입합니다.

7. 공급업체 구축

4. UI 섹션에서 6 상태 및 메소드를 호출하는 공급자를 설정합니다.

import 'package:hooks_riverpod/hooks_riverpod.dart';

import 'favo_controller.dart';
import 'favo_state.dart';

final favoProvider =
    StateNotifierProvider<FavoController, FavoState>(
        (ref) => FavoController());

8. 상태 및 방법을 호출하기 위해 UI 섹션의 코드 수정

초기화

class FavoWidget extends HookConsumerWidget {
  List<Contents> dammyList = dammyData
      .map((e) => Contents(title: e['title'], isFavo: e['isFavo']))
      .toList();

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final size = MediaQuery.of(context).size;

    // ここ。4で作った状態を初期化する。
    useEffect(() {
      ref.read(favoProvider.notifier).initState(data: dammyList);
    }, const []);
    final _isFavoList = ref.watch(favoProvider).data;
    
    //続く

ListView의 내용 변경

return Scaffold(
      body: SingleChildScrollView(
        child: ListView.builder(
            shrinkWrap: true,
            itemCount: dammyList.length, //ここ
            itemBuilder: (BuildContext context, int index) {
              return Card(
                child: SizedBox(
                  height: size.height * 0.1,
                  child: Row(children: [
                    SizedBox(
                      width: size.width * 0.8,
                      child: Padding(
                        padding: const EdgeInsets.all(16.0),
                        child: Text(_isFavoList[index].title.toString()),　//ここ
                      ),
                    ),
                    IconButton(
                      onPressed: () {
		      //ここから
                        ref
                            .read(favoProvider.notifier)
                            .favoriteChange(data: _isFavoList, index: index);
		     //ここまで
                      },
                      icon: Icon(Icons.favorite,
		      //ここから
                          color: _isFavoList[index].isFavo == true
                              ? Colors.red
                              : Colors.grey),
		　　　 //ここまで
                    ),
                  ]),
                ),
              );
            }),
      ),
    );