質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

Q&A

1回答

425閲覧

Containerをタップすることで画面が遷移する

jpp_flu

総合スコア10

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

0グッド

0クリップ

投稿2019/02/15 07:08

前提・実現したいこと

flutterで時間割を作成するアプリを作っています。
そこで、Containerを月曜日から金曜日まで5限分、つまり25個分のContainerを用意し、それぞれをタップすることで編集画面に移動し、名前と教室名を取得するようなプログラムを作成したい。

発生している問題・エラーメッセージ

ContainerにonTapをつけ加えることはできたが、画面の遷移がうまくいきません。
Navigator.push(
context,
)
このcontextの部分にエラーが発生しています。

該当のソースコード

dart ソースコード import 'package:flutter/material.dart'; class TimeSchedulePage extends StatefulWidget{ @override _TimeSchedulePage createState() => new _TimeSchedulePage(); } class _TimeSchedulePage extends State<TimeSchedulePage>{ @override Widget build(BuildContext context) { return TimeSchedule(); } } class TimeSchedule extends StatefulWidget{ @override _TimeSchedule createState() => new _TimeSchedule(); } class _TimeSchedule extends State<TimeSchedule>{ @override Widget build(BuildContext context) { var size = MediaQuery.of(context).size; final double itemHeight = (size.height - kToolbarHeight -24)/2; final double itemWidth = size.width/2; // TODO: implement build return Scaffold( appBar: AppBar( title: Text('時間割') ), body: GridView.count( crossAxisCount: 6, mainAxisSpacing: 8, crossAxisSpacing: 5.0, childAspectRatio: (itemWidth/itemHeight), padding: const EdgeInsets.all(10.0), children: _gridData, ), ); } var _gridData = <Widget>[ InkWell( child:Container(color: Colors.white,), onTap: () { Navigator.push( null, MaterialPageRoute( builder: (_) => getInfo(), ), ); }, ), ]; } class getInfo extends StatefulWidget{ @override _getInfo createState() => new _getInfo(); } class _getInfo extends State<getInfo>{ @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('編集'), ), ); } } ### 試したこと contextがBuildContext内以外では使えないという文を見ました。 他の方法がよくわからず質問させていただきます。どのようにすると 画面遷移ができるのでしょうか ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

Navigation.push(null,...)
の部分がまずいのではないかと思います。

質問者様のコードでは、GridViewのchildren:に渡すウィジェットリストを変数として定義しておられますね。
しかしこれではcontextが参照できないので、nullしかない…となったのかと思います。

buildContextをpush内で使用可能にするために、
var _gridDataの部分を「List<Widget>を返すメソッド」として作り直してみましょう。

dart

1// 元のコード 2// var _gridData = <Widget>[ 3// InkWell( 4// child:Container(color: Colors.white,), 5// onTap: () { 6// Navigator.push( 7// null, 8// MaterialPageRoute( 9// builder: (_) => getInfo(), 10// ), 11// ); 12// }, 13// ), 14// ]; 15 16 17// 改善後 18List<Widget> _gridData(BuildContext context) { 19 return <Widget>[ 20 InkWell( 21 child: Container( 22 color: Colors.white, 23 ), 24 onTap: () { 25 Navigator.push( 26 context, 27 MaterialPageRoute( 28 builder: (_) => getInfo(), 29 ), 30 ); 31 }, 32 ), 33 ]; 34 }

こうすると引数にBuildContextを受け取ることが出来ます。

次に呼び出し側で、_gridData()にcontextを渡します。

dart

1// 元のコード 2 body: GridView.count( 3 crossAxisCount: 6, 4 mainAxisSpacing: 8, 5 crossAxisSpacing: 5.0, 6 childAspectRatio: (itemWidth / itemHeight), 7 padding: const EdgeInsets.all(10.0), 8 children: _gridData, 9 ), 10 11 12// 改良後 13 14 body: GridView.count( 15 crossAxisCount: 6, 16 mainAxisSpacing: 8, 17 crossAxisSpacing: 5.0, 18 childAspectRatio: (itemWidth / itemHeight), 19 padding: const EdgeInsets.all(10.0), 20 children: _gridData(context), 21 ), 22

なにかしらのウィジェット生成を_buildメソッド外に委ねるときは、変数ではなくメソッドとして定義すると便利です。
今回のような「AAをもらってBBを作る」という処理も、メソッド形式なら直感的に実現できます。

また余談ですが、リストの要素を動的に増やしたい場合は、List.generate()などを使って生成したウィジェットリストを返すように実装することで、冗長なウィジェット記述を減らすことも出来ます。

投稿2020/04/21 10:05

ukkey0518

総合スコア6

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問