flutterでProviderを使った画面を実装しました。
画面は2枚。
最初のページ(FirstPage)に次のページに遷移するボタンを1つ、
次のページ(NextPage)に最初のページに戻るボタンを1つ配置しています。
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('戻る'),
)
),
),
),
),
);
}
}