Flutter启动浏览器打开URL

╰+哭是因爲堅強的太久メ 2023-07-22 03:54 6阅读 0赞

# url\_lancher #

--------------------

通过`url_lancher`插件，Flutter可以通过URL跳转浏览器、电话、邮件等三方native应用，`url_lancher`同时支持Android和iOS上的使用  
[https://pub.dev/packages/url\_launcher][https_pub.dev_packages_url_launcher]

可以处理的URL种类如下：

<table> 
 <thead> 
  <tr> 
   <th align="left">类型</th> 
   <th align="left">URL</th> 
   <th align="left">例子</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">打开浏览器</td> 
   <td align="left">http:&lt;URL&gt;</td> 
   <td align="left">http://flutter.dev</td> 
  </tr> 
  <tr> 
   <td align="left">拨打电话</td> 
   <td align="left">mailto:&lt;address&gt;?subject=&lt;subject&gt;&amp;body=&lt;body&gt;</td> 
   <td align="left">mailto:foo@example.com?subject=Title&amp;body=Hello!</td> 
  </tr> 
  <tr> 
   <td align="left">发送邮件</td> 
   <td align="left">tel:&lt;phone_number&gt;</td> 
   <td align="left">tel:+12223334444</td> 
  </tr> 
  <tr> 
   <td align="left">发送SMS</td> 
   <td align="left">sms:&lt;phone_number&gt;</td> 
   <td align="left">sms:2223334444</td> 
  </tr> 
 </tbody> 
</table>

# Sample #

--------------------

通过一个简单的例子验证一下插件功能：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70]

`pubspec.yaml` 中添加依赖：

dependencies:
      url_launcher: ^5.2.7

实现代码如下：

import 'package:flutter/material.dart';
    import 'package:url_launcher/url_launcher.dart';
    
    void main() => runApp(
          MaterialApp(
            home: MyApp(),
          ),
        );
    
    class MyApp extends StatefulWidget { 
      @override
      State<StatefulWidget> createState() { 
        return _State();
      }
    }
    
    class _State extends State<MyApp> { 
      var _status = 'Ready';
    
      @override
      Widget build(BuildContext context) { 
        return Scaffold(
          appBar: AppBar(
            title: Text('URL Test'),
          ),
          body: Center(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                RaisedButton(
                  child: Text('Website'),
                  onPressed: () { 
                    var url = 'http://flutter.dev';
                    _launchUrl('$url');
                  },
                ),
                RaisedButton(
                  child: Text('Email'),
                  onPressed: () { 
                    var email = 'test@example.com';
                    var subject = Uri.encodeComponent('Hello');
                    var body = Uri.encodeComponent('This is a test.');
                    var url = 'mailto:$email?subject=$subject&body=$body';
                    print(url);
                    _launchUrl(url);
                  },
                ),
                RaisedButton(
                  child: Text('Phone'),
                  onPressed: () { 
                    var tel = '+12345678901';
                    _launchUrl('tel:$tel');
                  },
                ),
                RaisedButton(
                    child: Text('SMS'),
                    onPressed: () { 
                      var tel = '2345678901';
                      _launchUrl('sms:$tel');
                    }),
                Text(_status)
              ],
            ),
          ),
        );
      }
    
      _launchUrl(String url) async { 
        if (await canLaunch(url)) { 
          await launch(url);
        } else { 
          setState(() { 
            _status = 'Unable to launch url $url';
          });
        }
      }
    }

通过`launch()`，用对应的应用打开URL。`canLaunch()`可以用来检查当前环境是否有可以处理URL的应用，如果没有则返回false

[https_pub.dev_packages_url_launcher]: https://pub.dev/packages/url_launcher
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70]: /images/20230528/49bb9801c2574ae9b123c360ff802a17.png