編集履歴

質問編集履歴

追記

2021/02/27 03:23

投稿

スコア32

title CHANGED Viewed

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

body CHANGED Viewed

@@ -1,117 +1,217 @@
 ### 前提・実現したいこと
-アプリを開いた段階で、過去に閲覧したwebページをそのまま表示させたいです。
-その前段階としてWebviewの実装に手間取っています。
-setting画面→view画面に遷移します。
-最初にsetting画面にWebviewで表示したいURLを入力します。
+FlutterでWebviewを用いたアプリケーションを開発しています。
-connectボタンを押すと、view画面にURLをパラメータとして画面遷移します。
-![イメージ説明](25f9af793eb72813b23e8171fa503316.png)
-view画面では、このURLのページを表示するはずですが、下の画像のように真っ白な画面になっています。
+setting画面とview画面があり、以下の3つを実装したいのですが、[3]が実装できていません。
-![イメージ説明](0dfbd75e54b8abdc6ac59520f9b99e5b.png)
-appbarのテキストから、パラメータ自体は受け取っていることがわかります。
+[1]setting画面からview画面に遷移する
+[2]setting画面で入力したURLをview画面で表示させたい
+[3]その表示させた画面は再起動後もview画面で表示される
+###実装方法
+まず、setting画面の入力フォームにWebviewで表示させたいwebページのURLを入力します。
+下の画面がsetting画面で、このときtwitterのURLを入力しています。
+![イメージ説明](9e30287bb74c5acb1ea3c0d31c8b1ca3.png)
+setting画面で受け取ったURLは一度`SharedPreferences`で保存(save)して、view画面で受け取ります。
+view画面では、下のようにtwitterが確認できました
+![イメージ説明](d1fd19c4a255289c09df9604055f1d1e.png)
+しかしエミュレータを再起動するとview画面にtwitterの画面が表示されず、[3]の実装ができていないことがわかりました。
-### 該当のソースコード
+### setting画面のソースコード
-view画面のview.dartは以下のようにコーディングしました。
 ```dart
 import 'package:flutter/material.dart';
-import 'package:webview_flutter/webview_flutter.dart';
+import 'view.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 import 'Widgets/drawer.dart';
-class ViewScreen extends StatefulWidget {
+class SettingScreen extends StatefulWidget {
-  static const routeName = '/view';
+  static const routeName = '/setting';
-  final String url;
-  viewScreen({Key key, @required this.url}) : super(key: key);
   @override
-  State<StatefulWidget> createState() => ViewScreenState();
+  State<StatefulWidget> createState() => SettingScreenState();
 }
-class ViewScreenState extends State<ViewScreen> {
+class SettingScreenState extends State<SettingScreen> {
+  static const routeName = '/setting';
-  String _view = "message";
+  final _formKey = GlobalKey<FormState>();
+  String input;
-  void _load() async {
+  void _save(String url) async {
     SharedPreferences pref = await SharedPreferences.getInstance();
-    setState(() {
-      _view = pref.getString('url') ?? '';
+    pref.setString('url', url);
-    });
   }
   @override
+  Widget build(BuildContext context) {
-  void initState() {
+    return Scaffold(
-    super.initState();
+        drawer: DrawerScreen(),
+        body: Form(
+          key: _formKey,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
-    _load();
+              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),
+              ),
+            ],
+          ),
+        ));
   }
-  @override
-  Widget build(BuildContext context) {
+  Widget _sendButton(BuildContext context) {
-    return Scaffold(
+    return RaisedButton(
-      appBar: AppBar(
-        title: Text(_view),
-      ),
-      drawer: DrawerScreen(),
-      body: WebView(
-        initialUrl: _view,
+      onPressed: () {
-        javascriptMode: JavascriptMode.unrestricted,
-        javascriptChannels: Set.from([
+        this._formKey.currentState.save();
-          JavascriptChannel(
-              name: "getData",
+        if (input == "") {
+          _showDialog(context);
+        } else {
+          _save(input);
-              onMessageReceived: (JavascriptMessage result) {
+          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画面のソースコード
-ネットワークの設定が要るのかと思い`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 'package:shared_preferences/shared_preferences.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);
+  ViewScreen({Key key, @required this.url}) : super(key: key);
   @override
-  State<StatefulWidget> createState() =>ViewScreenState();
+  State<StatefulWidget> createState() => ViewScreenState();
 }
-classViewScreenState extends State<ViewScreen> {
+class ViewScreenState extends State<ViewScreen> {
+  Future<String> _future;
+  String _view = "message";
+  Future<String> _load() async {
+    SharedPreferences pref = await SharedPreferences.getInstance();
+    _view = pref.getString('url') ?? '';
+    return Future.value(_view);
+  }
   @override
+  void initState() {
+    super.initState();
+    _future = _load();
+  }
+  @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    return Scaffold(
-     appBar: AppBar(
-        title: Text(widget.url),
-      ),
-      drawer: _drawer(context),
+        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 {
-      body: WebView(
+                    return WebView(
-        initialUrl: widget.url,
+                      initialUrl: _view,
-        javascriptMode: JavascriptMode.unrestricted,
+                      javascriptMode: JavascriptMode.unrestricted,
-        javascriptChannels: Set.from([
+                      javascriptChannels: Set.from([
-          JavascriptChannel(
+                        JavascriptChannel(
-              name: "getData",
+                            name: "getData",
-              onMessageReceived: (JavascriptMessage result) {
+                            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(),
     );
   }
 }
 ```
-![イメージ説明](8e27898e1181384b3faecd44efe09720.png)
-心当たりのある方は、ご指摘いただけると幸いです。
+[1]~[2]の実装自体がよくないのでしょうか?
+どなたかご指摘ください