前提・実現したいこと
私は現在Fluterの勉強をしています。
下記のサイトから、TapBoxBというチュートリアルを進めているのですが、上手く動きません。
https://flutter.dev/docs/development/ui/interactive
該当のソースコード
dart
// main.dart import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class ParentWidget extends StatefulWidget { _ParentWidgetState createState() => _ParentWidgetState(); } class _ParentWidgetState extends State<ParentWidget> { bool _active = false; void _handleTapboxChanged(bool newValue) { setState(() { _active = newValue; }); } Widget build(BuildContext context) { return Container( child: TapboxB( active: _active, onChanged: _handleTapboxChanged, ), ); } } // StatelessWidget継承 class TapboxB extends StatelessWidget { TapboxB({Key key, this.active: false, 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 { Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', home: Scaffold( appBar: AppBar( title: Text('Flutter Demo'), ), body: Center( child: TapboxB(), ), ), ); } }
基本的には参考ページをトレースしています。
問題点
どうやら、boxをタップした時に走る下の部分の onChanged
がnullになってるのが問題のようです。
dart
// 省略 class TapboxB extends StatelessWidget { TapboxB({Key key, this.active: false, this.onChanged}) : super(key: key); final bool active; final ValueChanged<bool> onChanged; void _handleTap() { onChanged(!active); } Widget build(BuildContext context) { // 省略
このonChangedから_ParentWidgetStateに上手くコールバックを渡すにはどのようにするのがいいでしょうか?
また、参考になるページなどあれば教えて頂けると幸いです。
まだ回答がついていません
会員登録して回答してみよう