ども、木村です。本業はデータサイエンティスト、副業でアプリ開発をしています。
本記事では、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を書籍で学習する
スポンサーリンク