state_notifierで予想した描画にならない

Question

前提・実現したいこと

Flutterのstate_notifierの勉強の為、demoを作成してみたのですが、
Android StudioのFlutter Perfomanceを使用して描画回数を確認した所、
私が予想した描画にはなりませんでした。

ボタンを押したり、スイッチを動かした際に該当する部分だけを描画させたいと考えておりましたが
確認した所、フローティングボタンだけは予想通りの描画だったのですが、
それ以外のテキスト入力やスイッチ切り替え処理の際に、タイトルを含む他の部分も再描画していました。

どのような記載にすれば、それぞれ対応した部分だけを描画することができるのでしょうか？
お手数ではございますが御教唆お願いいたします。

該当のソースコード

1.main.dart

import 'package:checkstatenotifer/app_page.dart';
import 'package:checkstatenotifer/app_state.dart';
import 'package:flutter/material.dart';
import 'package:flutter_state_notifier/flutter_state_notifier.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        StateNotifierProvider<AppController, AppState>(
          create: (_) => AppController(),
        ),
      ],
      child: MyApp(),
    ),
  );
}

2.app_state.dart

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:state_notifier/state_notifier.dart';

part 'app_state.freezed.dart';

@freezed
abstract class AppState with _$AppState {
  const factory AppState({
    @Default(0) int counter,
    @Default(false) bool color,
    String text,
  }) = _AppState;
}

class AppController extends StateNotifier<AppState> {
  AppController() : super(const AppState());

  void switchColor(bool value) {
    state = state.copyWith(color: value);
  }

  Color getColor() {
    return state.color ? Colors.red : Colors.blue;
  }

  void setText(String value) {
    state = state.copyWith(text: value);
  }

  void increment() {
    state = state.copyWith(counter: state.counter + 1);
  }
}

3. app_page.dart

import 'package:checkstatenotifer/app_state.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class HomePage extends StatelessWidget {
  const HomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('State_Notifier Demo'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: Padding(
              padding: const EdgeInsets.all(10),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  TextField(
                    enabled: true,
                    maxLength: 30,
                    onChanged:
                        context.select((AppController value) => value.setText),
                    decoration: InputDecoration(
                      hintText: 'please input your name',
                      labelText: 'name',
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(15),
                      ),
                    ),
                  ),
                  SwitchListTile(
                      title: const Text('color switch'),
                      value: context.select((AppState value) => value.color),
                      onChanged: context
                          .select((AppController value) => value.switchColor)),
                  Text(
                    context.select((AppState value) => value.text) ?? '',
                    style: TextStyle(
                        color: context
                            .select((AppController value) => value.getColor())),
                  ),
                  DisplayCounter(),
                ],
              ),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: context.select((AppController value) => value.increment),
        child: const Icon(Icons.add, color: Colors.white),
      ),
    );
  }
}

class DisplayCounter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      context.select((AppState value) => value.counter).toString(),
      style: Theme.of(context).textTheme.headline4,
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'State_Notifier Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

4. app_state.freezed.dart
ターミナルでflutter packages pub run build_runner buildを実行すると作成されます

5. pubspe.yaml

name: checkstatenotifer
description: check_state_notifier

publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  freezed_annotation:
  flutter_state_notifier: ^0.4.2
  provider: ^4.1.3

dev_dependencies:
  flutter_test:
    sdk: flutter
  build_runner:
  freezed:
  pedantic_mono: any

flutter:
  uses-material-design: true

補足情報（FW/ツールのバージョンなど）

Flutter 1.19.0-0.0.pre • channel dev
Dart 2.9.0 (build 2.9.0-5.0.dev 4da5b40fb6)

Answer 1

おそらく、TextFieldやSwitchListTileのonChangedでつかっているcontextがHomePageのものなので、HamePage内のウィジェットすべてが再描画されてしまっているのではないでしょうか？

Builder(builder: (context) {
  return TextField(
    enabled: true,
    maxLength: 30,
    onChanged: context.select((AppController value) => value.setText),
    decoration: InputDecoration(
      hintText: 'please input your name',
      labelText: 'name',
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(15),
      ),
    ),
  ),
}),
Builder(builder: (context) {
  return SwitchListTile(
    title: const Text('color switch'),
    value: context.select((AppState value) => value.color),
    onChanged: context.select((AppController value) => value.switchColor)
  ),
}),

このようにBuilderウィジェットで囲ってみてください。

Comments

[copp]

tepciさん、想定した通りの描画になりました。
contextがそのような関係をしているとは思っておりませんでしたので、すごく勉強になります。

本当にありがとうございました。