Flutter タップで表示を更新させたい

Question

前提・実現したいこと

私は現在Fluterの勉強をしています。
下記のサイトから、TapBoxBというチュートリアルを進めているのですが、上手く動きません。
https://flutter.dev/docs/development/ui/interactive

該当のソースコード

// main.dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  bool _active = false;

  void _handleTapboxChanged(bool newValue) {
    setState(() {
      _active = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: TapboxB(
        active: _active,
        onChanged: _handleTapboxChanged,
      ),
    );
  }
}

// StatelessWidget継承
class TapboxB extends StatelessWidget {
  TapboxB({Key key, this.active: false, @required this.onChanged}) : super(key: key);

  final bool active;
  final ValueChanged<bool> onChanged;

  void _handleTap() {
    onChanged(!active);
  }

  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _handleTap,
      child: Container(
        child: Center(
          child: Text(
            active ? 'Active' : 'Inactive',
            style: TextStyle(fontSize: 32.0, color: Colors.white),
          ),
        ),
        width: 200.0,
        height: 200.0,
        decoration: BoxDecoration(
          color: active ? Colors.lightGreen[700] : Colors.grey[600],
        ),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Center(
          child: TapboxB(),
        ),
      ),
    );
  }
}

基本的には参考ページをトレースしています。

問題点

どうやら、boxをタップした時に走る下の部分の onChanged がnullになってるのが問題のようです。

// 省略
class TapboxB extends StatelessWidget {
  TapboxB({Key key, this.active: false, @required this.onChanged}) : super(key: key);

  final bool active;
  final ValueChanged<bool> onChanged;

  void _handleTap() {
    onChanged(!active);
  }

  Widget build(BuildContext context) {
// 省略

このonChangedから_ParentWidgetStateに上手くコールバックを渡すにはどのようにするのがいいでしょうか？

また、参考になるページなどあれば教えて頂けると幸いです。

Answer 1

こんばんは。
書いていただいているサンプルでは、親で定義したハンドラーを子に渡してstate管理は親で持つようなパターンでの実装です。

そのため、MyAppで返すべきはTapboxBではなく、親のウィジェット（ParentWidget）になりますね。

MyAppでTapboxBを返す場合、TapboxB自体でstate管理する必要があるので
The widget manages its own state
に記載されている方の実装になります。

Comments

[退会済みユーザー]

回答ありがとうございます！
無事、実行が成功しました！

確かによく見ると、親の_ParentWidgetStateというStateクラス内でTapboxBを呼び出していますから、myAppで呼び出すのはそのStatefulWidgetであるParentWidgetになるはずですね
TapBoxBをStatelessWidgetにしたので、stateを保持するためのParendtWidgetをStatefulWidgetとすると...
というか ```ParentWidget manages the state for TapboxB.``` はそういう意味だったのか

わかりやすく丁寧な回答、ありがとうございました！
とても勉強になりました。

[8zca]

解決されたようでよかったです！