가장 쉽게 좋아하는 기능을 구현합니다!

두 가지 방법을 소개합니다. 원하는 방식으로 구현하십시오!
둘 다 간단하기 때문에 안심!

※주의
· StatefulWidget에서 setState()를 사용하면 쉽게 만들 수 있지만 전체가 재구성되기 때문에 이미지와 텍스트가 많은 화면에서 재구성되면 문제가 발생하거나 처리가 굳어지므로 StatefulWidget은 사용하지 않습니다.
・SNS의 기능으로서 좋아 기능을 실장하는 경우는, 이 기사만으로는 불충분합니다.
왜냐하면 좋아하는 것을 저장해야하기 때문에 서버 측과 결합해야하기 때문입니다.

1.flutter_hooks를 이용한 방법

2.provider를 이용한 방법

완제품

준비

패키지를 도입합니다.

pubspec.yaml

  hooks_riverpod: ^0.14.0+4
  provider: ^5.0.0

준비 완료.

1.flutter_hooks를 이용한 방법

코드를 모두 넣으십시오!

hooks_page.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

class HooksPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("flutter_hooksパターン"),
      ),
      body: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index) {
            return Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Text(
                  index.toString() + "番目",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 20,
                  ),
                ),
                FavoriteButton()
              ],
            );
          }),
    );
  }
}

class FavoriteButton extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final favorite = useState<bool>(false);
    return IconButton(
      onPressed: () =>
          (favorite.value) ? favorite.value = false : favorite.value = true,
      icon: Icon(
        Icons.favorite,
        color: (favorite.value) ? Colors.pink : Colors.black12,
      ),
    );
  }
}

중요한 부분만 발췌합니다.

class FavoriteButton extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final favorite = useState<bool>(false);
    return IconButton(
      onPressed: () =>
          (favorite.value) ? favorite.value = false : favorite.value = true,
      icon: Icon(
        Icons.favorite,
        color: (favorite.value) ? Colors.pink : Colors.black12,
      ),
    );
  }
}

favorite의 값이 변경되면(자), 내부의 notifyListeners();가 실행되어 HookWidget가 리빌드 됩니다.

2.provider를 이용한 방법

provider_page.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class ProviderPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("providerパターン"),
      ),
      body: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index) {
            return ChangeNotifierProvider<FavoriteModel>(
                create: (_) => FavoriteModel(),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Text(
                      index.toString() + "番目",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 20,
                      ),
                    ),
                    Consumer<FavoriteModel>(builder: (context, model, child) {
                      return IconButton(
                        onPressed: model.changeColor,
                        icon: Icon(
                          Icons.favorite,
                          color: model.favorite ? Colors.pink : Colors.black12,
                        ),
                      );
                    })
                  ],
                ));
          }),
    );
  }
}

class FavoriteModel extends ChangeNotifier {
  bool favorite = false;

  void changeColor() {
    if (favorite) {
      favorite = false;
    } else {
      favorite = true;
    }
    notifyListeners();
  }
}

각 List에 대해 FavoriteModel()을 생성하므로 create: (_) => FavoriteModel()의 위치가 중요합니다. 버튼을 누르면 model.chageColor가 호출되므로 Consumer로 둘러싸인 부분이 다시 빌드됩니다.