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

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

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

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

Dart

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

Q&A

1回答

1848閲覧

Flutterで画面遷移時の値の受け渡しをしたい

Risney

総合スコア148

Flutter

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

Dart

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

0グッド

0クリップ

投稿2021/08/31 03:34

編集2022/01/12 10:55

前提・実現したいこと

画面遷移時の値の受け渡しをスマートにしたい

記載したコードで自分が想定した機能は実装でき、
エラーもないのですが、
「果たしてこれはスマートなやり方なのか?」
「もっと無駄なく値の受け渡しができるのではないか?」
と思い有識者の方のご意見を頂きたく質問いたしました。

構造

Flutterをはじめて起動した時のデモアプリを改造したもので、
以下のWidgetを配置しています。

Flutter Demo Home Page
・値を表示するテキスト
・値を増加するボタン
・値を減少するボタン
・値を0にリセットするボタン
NextPageページへ遷移し、現在の値を渡すボタン
イメージ説明

NextPage
・戻るボタン(左上)
Flutter Demo Home Pageから渡された値を表示するテキスト
イメージ説明

該当のソースコード

dart

1import 'package:flutter/material.dart'; 2 3void main() { 4 runApp(MyApp()); 5} 6 7class MyApp extends StatelessWidget { 8 final int number = 0; 9 10 11 Widget build(BuildContext context) { 12 return MaterialApp( 13 title: 'Flutter Demo', 14 theme: ThemeData( 15 primarySwatch: Colors.blue, 16 ), 17 initialRoute: '/', 18 routes: { 19 '/': (context) => MyHomePage(title: 'Flutter Demo Home Page'), 20 '/next': (context) => NextPage(this.number), 21 }, 22 ); 23 } 24} 25 26class MyHomePage extends StatefulWidget { 27 MyHomePage({Key? key, required this.title}) : super(key: key); 28 29 final String title; 30 31 32 _MyHomePageState createState() => _MyHomePageState(); 33} 34 35class _MyHomePageState extends State<MyHomePage> { 36 int _counter = 0; 37 38 void _incrementCounter() { 39 setState(() { 40 _counter++; 41 }); 42 } 43 44 void _decreaseCounter() { 45 setState(() { 46 _counter--; 47 }); 48 } 49 50 void _resetCounter() { 51 setState(() { 52 _counter = 0; 53 }); 54 } 55 56 57 Widget build(BuildContext context) { 58 return Scaffold( 59 appBar: AppBar( 60 61 title: Text(widget.title), 62 ), 63 body: Center( 64 child: Column( 65 mainAxisAlignment: MainAxisAlignment.center, 66 children: <Widget>[ 67 Text( 68 'You have pushed the button this many times:', 69 ), 70 Text( 71 '$_counter', 72 style: Theme.of(context).textTheme.headline4, 73 ), 74 ], 75 ), 76 ), 77 floatingActionButton: Column( 78 verticalDirection: VerticalDirection.down, // childrenの先頭を上に配置 79 mainAxisSize: MainAxisSize.min, 80 children: <Widget>[ 81 FloatingActionButton( 82 heroTag: "add", 83 onPressed: _incrementCounter, 84 tooltip: 'Increment', 85 child: Icon(Icons.add), 86 ), 87 Container( // ボタン間の余白のためContainerでラップ 88 margin: EdgeInsets.only(top: 16.0), 89 child: FloatingActionButton( 90 heroTag: "remove", 91 backgroundColor: Colors.redAccent, 92 onPressed: _decreaseCounter, 93 child: Icon(Icons.remove), 94 ), 95 ), 96 Container( // ボタン間の余白のためContainerでラップ 97 margin: EdgeInsets.only(top: 16.0), 98 child: FloatingActionButton( 99 heroTag: "reset", 100 backgroundColor: Colors.amberAccent, 101 onPressed: _resetCounter, 102 child: Icon(Icons.refresh), 103 ), 104 ), 105 Container( // ボタン間の余白のためContainerでラップ 106 margin: EdgeInsets.only(top: 16.0), 107 child: FloatingActionButton( 108 heroTag: "NextPage", 109 backgroundColor: Colors.purpleAccent, 110 onPressed: (){ 111 Navigator.push( 112 context, MaterialPageRoute(builder: (context) => NextPage(_counter),) 113 ); 114 }, 115 child: Icon(Icons.arrow_forward), 116 ), 117 ), 118 ], 119 ), 120 ); 121 } 122} 123 124class NextPage extends StatelessWidget { 125 126 NextPage(this.number); 127 final int number; 128 129 130 Widget build(BuildContext context) { 131 return Scaffold( 132 appBar: AppBar( 133 title: Text("NextPage"), 134 ), 135 body: Center( 136 child: Text("$number", 137 style: TextStyle( 138 fontWeight: FontWeight.bold, 139 fontSize: 100, 140 color: Colors.purpleAccent, 141 ),), 142 ), 143 ); 144 } 145}

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

・FloatingButtonを複数設置するのが推奨されていないことは公式サイトで確認済みです。
・以下を参考に画面遷移を実装しました。
[Flutter]画面遷移のやり方

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

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

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

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

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

guest

回答1

0

そのやり方でスマートだと思います。
pushではなくpushNamedを使う方法もありますが、記述量はたいして変わりません。

dart

1//MyAppのroutesで値を渡さないように変更(コンストラクタを使わないから) 2routes: { 3 ... 4 '/next': (context) => NextPage(), 5 }, 6 7//画面遷移はpushNamed 8//arguments引数で値を渡すことが出来ます 9Navigator.of(context).pushNamed('/next', arguments: _counter); 10 11//NextPageのコンストラクタを消す。final int number;も消す 12//値の取得 13//NextPageのbuilderメソッドで 14final number = ModalRoute.of(context)!.settings.arguments; 15

しかし、これらの方法を使うと面倒になる場合があります。
例えば、10回遷移した先の画面に値を渡すためだけに、経由する全ての画面に値を渡していくのはとても大変です。
バケツリレーのようなイメージです。

その場合には、Provider等で状態管理するのがスマートです。

投稿2021/09/05 11:52

編集2021/09/05 11:55
honki

総合スコア4

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

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

Risney

2021/09/06 01:43

ご回答ありがとうございます! 引数渡す時はpush、シンプルに画面繊維するだけならpushNamedというイメージでしょうか? Providerというメソッドは初めてきいたので調べて見たいと思います。 また値を引き渡す用に「final int number;」を 引き渡し元と引き渡し先のクラスに変数定義しているのですが、 カウントを表示している「int _counter = 0;」のまま渡すことはできないのでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問