1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

flutter_provider 画面遷移 Navigator.pop(context)で前のページに戻ると真っ黒な画面になる

Last updated at Posted at 2021-06-17

flutterでProviderを使った画面を実装しました。
画面は2枚。
最初のページ(FirstPage)に次のページに遷移するボタンを1つ、
次のページ(NextPage)に最初のページに戻るボタンを1つ配置しています。

firstpage.png nextpage.png black.png
pubspec.yml
dependencies:
  flutter:
    sdk: flutter
  provider: ^4.1.2
main.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:sugukesu/test_model.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
       primarySwatch: Colors.blue,
      ),
      home: FirstPage(),
    );
  }
}

// 最初のページ
class FirstPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
            onPressed: (){
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => NextPage(),
                ),
              );
            },
            child: Text('次のページへ')),
      ),
    );
  }
}

// 次のページ
class NextPage extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "次のページ",
      home: ChangeNotifierProvider<testModel>(
        create: (context) => testModel(),
        child: Consumer<testModel>(
          builder: (context, model, child) => Scaffold(
            body: Center(
              child: ElevatedButton(
                  onPressed: (){
                    Navigator.pop(context);
                  },
                  child: Text('戻る'),
              )
            ),
          ),
        ),
      ),
    );
  }
}

test_model.dart
class testModel extends ChangeNotifier{

  // 使わないのでとりあえずnull

}

調べたこと

参考:
https://stackoverflow.com/questions/53723294/flutter-navigator-popcontext-returning-a-black-screen

どうやらNextPageにMaterialAppを使用していたのが問題のようです。
MaterialAppをScaffoldに変更することで問題なく前のページに戻ることができました。
とりあえず実装はできましたが原因については今後確認してみます。

main.dart
// 次のページ
class NextPage extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // MaterialAppからScaffoldに変更
    return Scaffold(
        body: ChangeNotifierProvider<testModel>(
          create: (context) => testModel(),
          child: Consumer<testModel>(
            builder: (context, model, child) => Scaffold(
              body: Center(
                child: ElevatedButton(
                    onPressed: (){
                      Navigator.pop(context);
                    },
                    child: Text('戻る'),
                )
              ),
            ),
          ),
        ),
    );
  }
}

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?