flutterで外部のwebサイトへ遷移する方法

初めましてblueです。

flutterでアプリ内から外部のwebサイトへ遷移させる方法について、
今回記事にさせていただきました。

今回は下記パッケージを使用。

url_launcher | Flutter Package

導入方法

 ios/Runner/Info.plist  に下記を追加する

<key>LSApplicationQueriesSchemes</key>
<array>
 <string>https</string>
 <string>http</string>
</array>

urlの指定、urlの判別をするメソッドを作成する
今回は下記の内容を実装。

Future _launchUrl() async {
   var url = "https://flutter.dev/";
   if (await canLaunch(url)) {
     await launch(url);
   } else {
     throw 'Unable to launch url $url';
   }
 }

メソッドの説明

canLaunch：URLが開けるものかどうか判断する
launch：URLを開く

任意の場所で先ほど作成したメソッドを呼び出すことで、外部のWebブラウザを開くことが出来ます。

全体コード

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

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

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     home: MyHomePage(),
   );
 }
}

class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 Future _launchUrl() async {
   var url = "https://flutter.dev/";
   if (await canLaunch(url)) {
     await launch(url);
   } else {
     throw 'Unable to launch url $url';
   }
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('WEBサイト遷移'),
     ),
     body: Center(
       child: ElevatedButton(
         child: Text('WEBサイトへ遷移'),
         onPressed: () {
           _launchUrl();
         },
       ),
     ),
   );
 }
}

実装画面

ボタンを押すと

FlutterのHPを開くことが出来ます！