Flutter入門

【5分でわかる】webviewを実装する方法 | Flutter入門


ども、木村です。本業はデータサイエンティスト、副業でアプリ開発をしています。

本記事では、Flutterでwebviewを実装する方法について解説していきます。

想定読者

Flutterでwebviewを実装したい方

webviewを実装する方法

「webview_flutter」を使うのがおすすめです!

実際に実装してみる

webview_flutterを追加する

例の如く、作成したFlutterプロジェクトのpubspec.yamlにwebview_flutterを追加します。

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^3.0.1 #追加

ボタンを設置する

画面中央にボタンを表示して、そこからWebViewを開くようにしたいので、まずはボタンを設置しましょう。

lib配下のmain.dartを以下のように書き換えてください。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton.icon( // ボタンを追加
              onPressed: () {},
              icon: Icon(Icons.flight),
              label: Text('開く'),
            ),
          ],
        ),
      ),
    );
  }
}

今回はElevatedButtonを実装してみました。

WebViewを実装する

それでは、WebViewを実装していきます。

ボタンを押した後の処理になりますので、ElevatedButtonのonPressedに処理を実装するとよさそうですね。

onPressedの中に画面遷移をしてくれるNavigator.push()を実装し、画面遷移先としてWebViewを指定します。

 Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => WebView(
                              initialUrl: "https://kimuralog.com/",
                              javascriptMode: JavascriptMode.unrestricted,
                              onWebViewCreated: (WebViewController controller) {
                                _controller = controller;
                              },
                            )));

このように実装することでFlutterでWebViewを実装することができます。

ソースコードの全量は以下のGithubで公開していますので参考にしてみてください。

デフォルトプロジェクトとの変更箇所だけ確認したい方は以下を参考ください。

まとめ

いかがでしたでしょうか?

FlutterならWebViewを簡単に実装できます。

この機会に是非習得してみてください。

最新のFlutterの勉強方法 まとめ

Flutterを入門から実践レベルまで一通り学習できる方法をまとめました。

Flutterの勉強方法を知る

Flutterを動画で学習する

Flutterを書籍で学習する