Flutter URL协议处理插件url_protocol的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter URL协议处理插件 url_protocol 的使用

url_protocol 是一个用于在支持的平台上注册自定义URL协议处理器的统一库。它主要用于桌面平台,这些平台需要额外的程序注册URL处理器。

兼容性

此库设计用于Flutter内部,并主要服务于需要额外程序注册URL处理器的桌面平台,如Windows和Linux(即将推出)。

使用方法

使用以下代码来注册或注销URL处理器协议:

import 'package:url_protocol/url_protocol.dart';

void main() {
  // 注册一个新的自定义URL协议处理器。打开 test-url-protocol://test
  // 将运行可执行文件,并传递参数:-url test-url-protocol://test
  registerProtocolHandler('test-url-protocol', arguments: ['-url', '%s']);

  // 注销并移除自定义URL协议处理器
  unregisterProtocolHandler('test-url-protocol');
}

有用提示

可以将此库与 multi_instance_handler 结合使用,以管理将打开的URL转发到桌面平台上的活动应用程序实例。

TODO

  • ❌ Android、iOS 和 macOS 的说明
  • ❌ Linux 支持

许可证与作者

此库由 Loren Segal 编写,并根据 MIT 许可证授权。

完整示例

以下是一个完整的示例代码,展示了如何使用 url_protocol 插件:

示例代码

import 'dart:io';

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

void main() {
  // 注册一个新的自定义URL协议处理器。打开 test-url-protocol://test
  // 将运行可执行文件,并传递参数:-url test-url-protocol://test
  registerProtocolHandler('test-url-protocol', arguments: ['-url', '%s']);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'URL Protocol Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'URL Protocol Example'),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String? _lastUrl;

  @override
  void initState() {
    super.initState();
    // 监听URL协议事件
    urlProtocolHandler.listen((String url) {
      setState(() {
        _lastUrl = url;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Last opened URL:',
            ),
            Text(
              _lastUrl ?? 'None',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    // 注销并移除自定义URL协议处理器
    unregisterProtocolHandler('test-url-protocol');
    super.dispose();
  }
}

说明

  1. 注册URL协议处理器

    registerProtocolHandler('test-url-protocol', arguments: ['-url', '%s']);
    

    这行代码注册了一个名为 test-url-protocol 的自定义URL协议处理器。当用户在浏览器或其他应用程序中打开 test-url-protocol://test 时,会触发该处理器,并将URL作为参数传递给应用程序。

  2. 监听URL协议事件

    urlProtocolHandler.listen((String url) {
      setState(() {
        _lastUrl = url;
      });
    });
    

    这行代码监听URL协议事件,并在接收到新的URL时更新状态。

  3. 注销URL协议处理器

    unregisterProtocolHandler('test-url-protocol');
    

    这行代码在应用程序关闭时注销并移除自定义URL协议处理器。

通过以上步骤,您可以轻松地在Flutter应用中处理自定义URL协议。希望这个示例对您有所帮助!


更多关于Flutter URL协议处理插件url_protocol的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter URL协议处理插件url_protocol的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter中使用url_protocol插件来处理URL协议的一个基本示例。这个插件允许你定义并处理自定义的URL协议。首先,你需要确保你的Flutter项目已经安装了url_protocol插件。你可以通过以下命令来添加它:

flutter pub add url_protocol

然后,按照以下步骤配置和使用该插件:

1. 配置Info.plist (iOS)

在iOS项目中,你需要在Info.plist文件中注册你的自定义URL协议。例如,如果你想处理myapp://协议,你需要添加以下条目:

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>myapp</string>
        </array>
    </dict>
</array>

2. 配置AndroidManifest.xml (Android)

在Android项目中,你需要在AndroidManifest.xml文件中注册你的自定义URL协议。例如,处理myapp://协议,你需要添加以下intent-filter:

<activity
    android:name=".MainActivity"
    android:launchMode="singleTop"
    android:theme="@style/LaunchTheme"
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
    android:hardwareAccelerated="true"
    android:windowSoftInputMode="adjustResize">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="myapp" />
    </intent-filter>
</activity>

3. 在Flutter代码中使用url_protocol插件

在你的Flutter应用中,你可以使用url_protocol插件来监听并处理这些自定义URL。以下是一个基本的示例:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'URL Protocol Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    _listenForUrls();
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  void _listenForUrls() {
    UrlProtocol.listenForUrls((Uri uri) {
      // Handle the incoming URI
      print("Received URI: ${uri.toString()}");
      // Example: parsing query parameters
      var queryParams = uri.queryParameters;
      if (queryParams.containsKey('param1')) {
        print("param1: ${queryParams['param1']}");
      }
      // You can navigate to a new screen, show a dialog, etc. based on the URI
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('URL Protocol Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Open your app with a custom URL like: myapp://?param1=value1',
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中,UrlProtocol.listenForUrls方法会监听所有进入的自定义URL协议(例如myapp://),并在接收到URL时调用提供的回调函数。你可以在这个回调函数中处理接收到的URI,并根据需要执行相应的操作,比如解析查询参数、导航到新屏幕或显示对话框等。

请确保在真实的应用中根据你的需求对URI进行验证和处理,以确保安全性和正确性。

回到顶部