web-dev-qa-db-ja.com

アプリのメイン画面に警告ダイアログを表示します

条件に基づいてアラートダイアログを表示したい。ボタンを押すイベントなどのユーザーインタラクションに基づいていません。

アプリの状態データでフラグが設定されている場合、警告ダイアログが表示されます。それ以外の場合は表示されません。

以下は、表示したいアラートダイアログのサンプルです。

  void _showDialog() {
    // flutter defined function
    showDialog(
      context: context,
      builder: (BuildContext context) {
        // return object of type Dialog
        return AlertDialog(
          title: new Text("Alert Dialog title"),
          content: new Text("Alert Dialog body"),
          actions: <Widget>[
            // usually buttons at the bottom of the dialog
            new FlatButton(
              child: new Text("Close"),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

メイン画面ウィジェットのビルドメソッド内でそのメソッドを呼び出そうとしましたが、エラーが発生しました-

 The context used to Push or pop routes from the Navigator must be that of a widget that is a descendant of a Navigator widget.
E/flutter ( 3667): #0      Navigator.of.<anonymous closure> (package:flutter/src/widgets/navigator.Dart:1179:9)
E/flutter ( 3667): #1      Navigator.of (package:flutter/src/widgets/navigator.Dart:1186:6)
E/flutter ( 3667): #2      showDialog (package:flutter/src/material/dialog.Dart:642:20)

問題は、その_showDialogメソッドをどこから呼び出すべきかわからないことですか？

flutterandroid-alertdialogflutter-layout
10
WitVault

initStateのStateのStatefulWidgetに配置します。

buildウィジェットのStatelessメソッドに配置するのは魅力的ですが、それによりアラートが複数回トリガーされます。

以下のこの例では、デバイスがWifiに接続されていないときにアラートを表示し、接続されていない場合は[再試行]ボタンを表示します。

import 'package:flutter/material.Dart';
import 'package:connectivity/connectivity.Dart';

void main() => runApp(MaterialApp(title: "Wifi Check", home: MyPage()));

class MyPage extends StatefulWidget {
    @override
    _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
    bool _tryAgain = false;

    @override
    void initState() {
      super.initState();
      _checkWifi();
    }

    _checkWifi() async {
      // the method below returns a Future
      var connectivityResult = await (new Connectivity().checkConnectivity());
      bool connectedToWifi = (connectivityResult == ConnectivityResult.wifi);
      if (!connectedToWifi) {
        _showAlert(context);
      }
      if (_tryAgain != !connectedToWifi) {
        setState(() => _tryAgain = !connectedToWifi);
      }
    }

    @override
    Widget build(BuildContext context) {
      var body = Container(
        alignment: Alignment.center,
        child: _tryAgain
          ? RaisedButton(
              child: Text("Try again"),
              onPressed: () {
                _checkWifi();
            })
          : Text("This device is connected to Wifi"),
      );

      return Scaffold(
        appBar: AppBar(title: Text("Wifi check")),
        body: body
      );
    }

    void _showAlert(BuildContext context) {
      showDialog(
          context: context,
          builder: (context) => AlertDialog(
            title: Text("Wifi"),
            content: Text("Wifi not detected. Please activate it."),
          )
      );
    }
}
3
Feu

コンテンツを別のWidget（できればステートレス）でラップする必要があります。

例：

変更元：

_  import 'package:flutter/material.Dart';

  void main() {
    runApp(new MyApp());
  }

  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
          title: 'Trial',
          home: Scaffold(
              appBar: AppBar(title: Text('List scroll')),
              body: Container(
                child: Text("Hello world"),
              )));
    }
  }
_

これへ：

_  import 'Dart:async';
  import 'package:flutter/material.Dart';

  void main() {
    runApp(new MyApp());
  }

  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
          title: 'Trial',
          home: Scaffold(
              appBar: AppBar(title: Text('List scroll')), body: new MyHome()));
    }
  }

  class MyHome extends StatelessWidget { // Wrapper Widget
    @override
    Widget build(BuildContext context) {
      Future.delayed(Duration.zero, () => showAlert(context));
      return Container(
        child: Text("Hello world"),
      );
    }

    void showAlert(BuildContext context) {
      showDialog(
          context: context,
          builder: (context) => AlertDialog(
                content: Text("hi"),
              ));
    }
  }
_

注：Future.delayed(Duration.zero,..)内のshow alertのラッピングについては here を参照してください

8
Dinesh Balasubramanian