☰

Flutterで画面間でデータを渡す 質問する

tag-icon • tag-icon dart flutter flutter-navigation
Flutterで画面間でデータを渡す 質問する

Flutterを学んでいるとナビゲーションにたどり着きました。画面間でデータを渡したいのですが、Android のアクティビティ間でデータを渡すそしてiOSのView Controller間でデータを渡すFlutter ではどのように行うのでしょうか?

関連する質問:

ベストアンサー1

この回答では、データの受け渡しとデータの受け渡しの両方について説明します。Android アクティビティや iOS ViewController とは異なり、Flutter のさまざまな画面は単なるウィジェットです。それらの間を移動するには、ルートと呼ばれるものを作成し、 を使用してNavigatorルートをスタックにプッシュしたりスタックからポップしたりする必要があります。

データを次の画面に渡す

ここに画像の説明を入力してください

次の画面にデータを送信するには、次の操作を行います。

  1. コンストラクSecondScreenターに、送信するデータのタイプのパラメーターを受け取らせます。この特定の例では、データは値として定義されString、ここで で設定されますthis.text。

    class SecondScreen extends StatelessWidget {
  final String text;
  SecondScreen({Key key, @required this.text}) : super(key: key);

  ...

  2. 次に、ウィジェットNavigatorの を使用して、ウィジェットFirstScreenにルートをプッシュしますSecondScreen。送信するデータをコンストラクターにパラメーターとして配置します。

    Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => SecondScreen(text: 'Hello',),
    ));

完全なコードはmain.dartここにあります:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Flutter',
    home: FirstScreen(),
  ));
}

class FirstScreen extends StatefulWidget {
  @override
  _FirstScreenState createState() {
    return _FirstScreenState();
  }
}

class _FirstScreenState extends State<FirstScreen> {

  // this allows us to access the TextField text
  TextEditingController textFieldController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First screen')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [

          Padding(
            padding: const EdgeInsets.all(32.0),
            child: TextField(
              controller: textFieldController,
              style: TextStyle(
                fontSize: 24,
                color: Colors.black,
              ),
            ),
          ),

          RaisedButton(
            child: Text(
              'Go to second screen',
              style: TextStyle(fontSize: 24),
            ),
            onPressed: () {
              _sendDataToSecondScreen(context);
            },
          )

        ],
      ),
    );
  }

  // get the text in the TextField and start the Second Screen
  void _sendDataToSecondScreen(BuildContext context) {
    String textToSend = textFieldController.text;
    Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => SecondScreen(text: textToSend,),
        ));
  }
}

class SecondScreen extends StatelessWidget {
  final String text;

  // receive data from the FirstScreen as a parameter
  SecondScreen({Key key, @required this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second screen')),
      body: Center(
        child: Text(
          text,
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

データを前の画面に戻す

ここに画像の説明を入力してください

データを戻すときは、次のことを行う必要があります。

  1. ではFirstScreen、 を使用してメソッド内でNavigatorをプッシュ (開始) し、終了時に返される結果を待機します。SecondScreenasync

    final result = await Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => SecondScreen(),
    ));

  2. にはSecondScreen、 をポップするときにパラメータとして返すデータを含めますNavigator。

    Navigator.pop(context, 'Hello');

  3. その後、FirstScreenがawait終了し、結果を使用できるようになります。

    setState(() {
  text = result;
});

main.dart参考までに、完全なコードを以下に示します。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Flutter',
    home: FirstScreen(),
  ));
}

class FirstScreen extends StatefulWidget {
  @override
  _FirstScreenState createState() {
    return _FirstScreenState();
  }
}

class _FirstScreenState extends State<FirstScreen> {

  String text = 'Text';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First screen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [

            Padding(
              padding: const EdgeInsets.all(32.0),
              child: Text(
                text,
                style: TextStyle(fontSize: 24),
              ),
            ),

            RaisedButton(
              child: Text(
                'Go to second screen',
                style: TextStyle(fontSize: 24),
              ),
              onPressed: () {
                _awaitReturnValueFromSecondScreen(context);
              },
            )

          ],
        ),
      ),
    );
  }

  void _awaitReturnValueFromSecondScreen(BuildContext context) async {

    // start the SecondScreen and wait for it to finish with a result
    final result = await Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => SecondScreen(),
        ));

    // after the SecondScreen result comes back update the Text widget with it
    setState(() {
      text = result;
    });
  }
}

class SecondScreen extends StatefulWidget {
  @override
  _SecondScreenState createState() {
    return _SecondScreenState();
  }
}

class _SecondScreenState extends State<SecondScreen> {
  // this allows us to access the TextField text
  TextEditingController textFieldController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second screen')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [

          Padding(
            padding: const EdgeInsets.all(32.0),
            child: TextField(
              controller: textFieldController,
              style: TextStyle(
                fontSize: 24,
                color: Colors.black,
              ),
            ),
          ),

          RaisedButton(
            child: Text(
              'Send text back',
              style: TextStyle(fontSize: 24),
            ),
            onPressed: () {
              _sendDataBack(context);
            },
          )

        ],
      ),
    );
  }

  // get the text in the TextField and send it back to the FirstScreen
  void _sendDataBack(BuildContext context) {
    String textToSendBack = textFieldController.text;
    Navigator.pop(context, textToSendBack);
  }
}

おすすめ記事