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


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

<div style="text-align: center">

<img width="300" alt="firstpage.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308518/e4ee09fd-cec4-7d2e-9e67-729e6186b64b.png">

<img width="300" alt="nextpage.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308518/5306aa72-5a1c-7406-dcb0-0d2d0c88ce20.png">

<img width="300" alt="black.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308518/65f1eca6-1712-c6ec-cad6-d24d4eb13907.png">
</div>

```yml:pubspec.yml
dependencies:
  flutter:
    sdk: flutter
  provider: ^4.1.2
```

```dart: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('戻る'),
              )
            ),
          ),
        ),
      ),
    );
  }
}

```

```dart:test_model.dart
class testModel extends ChangeNotifier{

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

}
```

<h1>調べたこと</h1>

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

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

```dart: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('戻る'),
                )
              ),
            ),
          ),
        ),
    );
  }
}

```