編集履歴

質問編集履歴

追記

2021/02/27 03:23

投稿

スコア32

test CHANGED Viewed

	@@ -1 +1 @@
1	- [Flutter]~~SharedPreferencesでWebview~~を~~保持し~~たい
1	+ [Flutter]再起動後も同じ画面を表示させたい

test CHANGED Viewed

@@ -1,37 +1,253 @@
 ### 前提・実現したいこと
-アプリを開いた段階で、過去に閲覧したwebページをそのまま表示させたいです。
-その前段階としてWebviewの実装に手間取っています。
+FlutterでWebviewを用いたアプリケーションを開発しています。
+setting画面とview画面があり、以下の3つを実装したいのですが、[3]が実装できていません。
-setting画面→view画面に遷移します。
+[1]setting画面からview画面に遷移する
+[2]setting画面で入力したURLをview画面で表示させたい
+[3]その表示させた画面は再起動後もview画面で表示される
+###実装方法
-最初にsetting画面にWebviewで表示したいURLを入力します。
+まず、setting画面の入力フォームにWebviewで表示させたいwebページのURLを入力します。
-connectボタンを押すと、view画面にURLをパラメータとして画面遷移します。
+下の画面がsetting画面で、このときtwitterのURLを入力しています。
+![イメージ説明](9e30287bb74c5acb1ea3c0d31c8b1ca3.png)
+setting画面で受け取ったURLは一度`SharedPreferences`で保存(save)して、view画面で受け取ります。
+view画面では、下のようにtwitterが確認できました
-![イメージ説明](25f9af793eb72813b23e8171fa503316.png)
+![イメージ説明](d1fd19c4a255289c09df9604055f1d1e.png)
-view画面では、このURLのページを表示するはずですが、下の画像のように真っ白な画面になっています。
+しかしエミュレータを再起動するとview画面にtwitterの画面が表示されず、[3]の実装ができていないことがわかりました。
-![イメージ説明](0dfbd75e54b8abdc6ac59520f9b99e5b.png)
-appbarのテキストから、パラメータ自体は受け取っていることがわかります。
-### 該当のソースコード
+### setting画面のソースコード
-view画面のview.dartは以下のようにコーディングしました。
 ```dart
 import 'package:flutter/material.dart';
+import 'view.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+import 'Widgets/drawer.dart';
+class SettingScreen extends StatefulWidget {
+  static const routeName = '/setting';
+  @override
+  State<StatefulWidget> createState() => SettingScreenState();
+}
+class SettingScreenState extends State<SettingScreen> {
+  static const routeName = '/setting';
+  final _formKey = GlobalKey<FormState>();
+  String input;
+  void _save(String url) async {
+    SharedPreferences pref = await SharedPreferences.getInstance();
+    pref.setString('url', url);
+  }
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+        drawer: DrawerScreen(),
+        body: Form(
+          key: _formKey,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              Padding(
+                padding: const EdgeInsets.all(16.0),
+                child: Container(
+                  child: Text('setting'),
+                ),
+              ),
+              TextFormField(
+                decoration: const InputDecoration(
+                  labelText: 'URL *',
+                ),
+                onSaved: (String value) {
+                  input = value;
+                },
+              ),
+              Padding(
+                padding: const EdgeInsets.symmetric(vertical: 16.0),
+                child: _sendButton(context),
+              ),
+            ],
+          ),
+        ));
+  }
+  Widget _sendButton(BuildContext context) {
+    return RaisedButton(
+      onPressed: () {
+        this._formKey.currentState.save();
+        if (input == "") {
+          _showDialog(context);
+        } else {
+          _save(input);
+          Navigator.of(context).push(MaterialPageRoute(
+              builder: (context) => ViewScreen(url: input),
+              fullscreenDialog: true));
+        }
+      },
+      child: Text('connect'),
+    );
+  }
+  void _showDialog(BuildContext context) {
+    showDialog(
+        context: context,
+        builder: (BuildContext context) {
+          return AlertDialog(
+            title: Text("エラー"),
+            content: Text("指定されたURLに接続できません"),
+            actions: <Widget>[
+              FlatButton(
+                child: Text("OK"),
+                onPressed: () {
+                  Navigator.of(context).pop();
+                },
+              ),
+            ],
+          );
+        });
+  }
+}
+```
+###view画面のソースコード
+```dart
+import 'package:assets_audio_player/assets_audio_player.dart';
+import 'package:flutter/material.dart';
 import 'package:webview_flutter/webview_flutter.dart';
 import 'package:shared_preferences/shared_preferences.dart';
@@ -48,7 +264,7 @@
-  viewScreen({Key key, @required this.url}) : super(key: key);
+  ViewScreen({Key key, @required this.url}) : super(key: key);
@@ -62,19 +278,19 @@
 class ViewScreenState extends State<ViewScreen> {
+  Future<String> _future;
   String _view = "message";
-  void _load() async {
+  Future<String> _load() async {
     SharedPreferences pref = await SharedPreferences.getInstance();
-    setState(() {
-      _view = pref.getString('url') ?? '';
+    _view = pref.getString('url') ?? '';
-    });
+    return Future.value(_view);
   }
@@ -86,7 +302,7 @@
     super.initState();
-    _load();
+    _future = _load();
   }
@@ -98,33 +314,107 @@
     return Scaffold(
-      appBar: AppBar(
-        title: Text(_view),
-      ),
-      drawer: DrawerScreen(),
-      body: WebView(
-        initialUrl: _view,
-        javascriptMode: JavascriptMode.unrestricted,
-        javascriptChannels: Set.from([
-          JavascriptChannel(
-              name: "getData",
-              onMessageReceived: (JavascriptMessage result) {
-              }),
-        ]),
-      ),
+        drawer: DrawerScreen(),
+        body: FutureBuilder(
+            future: _future,
+            builder: (context, AsyncSnapshot<String> snapshot) {
+              switch (snapshot.connectionState) {
+                case ConnectionState.none:
+                  return Text('none');
+                case ConnectionState.waiting:
+                  return Center(child: CircularProgressIndicator());
+                case ConnectionState.active:
+                  return Text('');
+                case ConnectionState.done:
+                  if (snapshot.hasError) {
+                    return Text(
+                      '${snapshot.error}',
+                      style: TextStyle(color: Colors.red),
+                    );
+                  } else {
+                    return WebView(
+                      initialUrl: _view,
+                      javascriptMode: JavascriptMode.unrestricted,
+                      javascriptChannels: Set.from([
+                        JavascriptChannel(
+                            name: "getData",
+                            onMessageReceived: (JavascriptMessage result) {
+                              if (result.message == "play sound") {
+                                AssetsAudioPlayer().open(
+                                  Audio("assets/announce.wav"),
+                                );
+                              }
+                            }),
+                      ]),
+                    );
+                  }
+              }
+            }));
+  }
+}
+Future<void> main() async {
+  WidgetsFlutterBinding.ensureInitialized();
+  SharedPreferences pref = await SharedPreferences.getInstance();
+  await pref.setString('url', '');
+  runApp(MyApp());
+}
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: ViewScreen(),
     );
@@ -138,96 +428,6 @@
-### 試したこと
-ネットワークの設定が要るのかと思い`https://twitter.com/home`を直接`initialUrl`に(Webviewで表示させたいURLを`String`で設定する部分)書き込むと接続はできました。
-また、` SharedPreferences`を使わずに以下のように書くと、求める結果が得られました
-```dart
-import 'package:assets_audio_player/assets_audio_player.dart';
-import 'package:flutter/material.dart';
-import 'package:webview_flutter/webview_flutter.dart';
-import 'Widgets/drawer.dart';
-class ViewScreen extends StatefulWidget {
-  static const routeName = '/view';
-  final String url;
- ViewScreen({Key key, @required this.url}) : super(key: key);
-  @override
-  State<StatefulWidget> createState() =>ViewScreenState();
-}
-classViewScreenState extends State<ViewScreen> {
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-     appBar: AppBar(
-        title: Text(widget.url),
+[1]~[2]の実装自体がよくないのでしょうか?
-      ),
-      drawer: _drawer(context),
-      body: WebView(
-        initialUrl: widget.url,
-        javascriptMode: JavascriptMode.unrestricted,
-        javascriptChannels: Set.from([
-          JavascriptChannel(
-              name: "getData",
-              onMessageReceived: (JavascriptMessage result) {
-              }),
-        ]),
-      ),
-    );
-  }
-}
-```
-![イメージ説明](8e27898e1181384b3faecd44efe09720.png)
-心当たりのある方は、ご指摘いただけると幸いです。
+どなたかご指摘ください