iT邦幫忙

2023 iThome 鐵人賽

DAY 6
0
Mobile Development

好好用的 flutter 套件系列 第 6

好好用的 flutter 套件 - Day 6 url_launcher

  • 分享至 

  • xImage
  •  

前言

前面講解如何挑選 packages 和 查看 package 資訊,相信大家都了解 packages吧!
那接下來我們就用 url_launcher 來實作看看吧!

現在我們有一個需求是要有url 後 ,要開啟網頁

url_launcher Readme

看完了 Usage 和 Example 應該是符合需求的
Example 
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

final Uri _url = Uri.parse('https://flutter.dev');

void main() => runApp(
      const MaterialApp(
        home: Material(
          child: Center(
            child: ElevatedButton(
              onPressed: _launchUrl,
              child: Text('Show Flutter homepage'),
            ),
          ),
        ),
      ),
    );

Future<void> _launchUrl() async {
  if (!await launchUrl(_url)) {
    throw Exception('Could not launch $_url');
  }
}    

url_launcher Installing

直接在 pubspec.yaml 加上 url_launcher: ^6.1.14 ,然後pub get 
dependencies:
      url_launcher: ^6.1.14    

https://ithelp.ithome.com.tw/upload/images/20230920/20121643SqLPTIJy5l.png

https://ithelp.ithome.com.tw/upload/images/20230920/20121643RQ1TqAV0Yr.png

url_launcher Example

在 /lib/main.dart 加入 程式 和 要開啟的網址 gdg.tw

import 'package:url_launcher/url_launcher.dart';

https://ithelp.ithome.com.tw/upload/images/20230920/20121643f9wekNEKFu.png

新增future
https://ithelp.ithome.com.tw/upload/images/20230920/20121643EkjNRBXaoO.png

宣告網址
https://ithelp.ithome.com.tw/upload/images/20230920/201216434IYNBNlNf1.png

新增按鍵
https://ithelp.ithome.com.tw/upload/images/20230920/201216435k9eMbr94e.png

執行結果

畫面一
https://ithelp.ithome.com.tw/upload/images/20230920/201216433DBifh7Lh4.png

按下按鈕開啟 gdg.tw
https://ithelp.ithome.com.tw/upload/images/20230920/20121643xjLP01HGMQ.png

心得

   看起執行結果是符合需求的,那就成功啦
   
   

上一篇
好好用的 flutter 套件 - Day 5 packages 資訊
下一篇
好好用的 flutter 套件 - Day 7 wakelock
系列文
好好用的 flutter 套件30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言