Flutter URL处理插件simple_url_handler的使用

Flutter URL处理插件simple_url_handler的使用

如果你希望在不牺牲Flutter易用性的前提下开发一个常规的Web应用，这个包正是为你准备的。你可以实现以下功能：

  • 根据你的应用状态更新URL
  • 让前进和后退按钮能够正常工作
  • 获取手动输入的URL以更新你的应用状态

开始使用

在你的项目的pubspec.yaml文件中添加以下依赖：

dependencies:
    simple_url_handler: ^0.0.1

使用方法

首先导入包：

import 'package:simple_url_handler/simple_url_handler.dart';

然后使用SimpleUrlHandler类：

SimpleUrlHandler(
    urlToAppState: (BuildContext context, RouteInformation routeInformation) {
        // 当用户输入URL或按下前进/后退按钮时调用。
        // 应该根据RouteInformation更新你的应用状态。
    },
    appStateToUrl: () {
        // 当URL应该被更新时调用。
        // 必须返回一个RouteInformation
    },
    child: YourAppWidget(),
);

根据应用状态更新URL

如果应用状态发生变化并且需要更新URL，只需调用：

SimpleUrlNotifier.of(context).notify();

这将触发对appStateToUrl的调用。

限制

混合使用navigator 2.0和navigator 1.0不是一个好主意。

这意味着，由于MaterialApp使用navigator 1.0，你不能使用MaterialApp。相反，应将SimpleUrlHandler作为你的material app使用，因为它接受相同的参数并创建一个MaterialApp。

这还意味着你需要使用navigator 2.0来处理路由。如果你觉得这很困难，可以查看我的Medium文章：Flutter Navigator 2.0 for mobile dev: 101来了解如何简单地使用它。

备注

此包仅处理URL，因此对于平台而言可能无用（除了Web平台）。然而，这应该是安全的使用（尽管可能无用）。

Medium文章

两篇Medium文章解释了如何使用此包制作应用程序：

完整示例代码

以下是一个完整的示例代码，展示了如何使用simple_url_handler包来创建一个计数器应用。

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

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

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int count = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SimpleUrlHandler(
      debugShowCheckedModeBanner: false,
      urlToAppState: (BuildContext context, RouteInformation routeInformation) {
        final newCounter = int.tryParse(routeInformation.location.substring(1));
        if (newCounter != null && newCounter != count) {
          setState(() {
            count = newCounter;
          });
        } else if (newCounter == null) {
          // 如果新计数器为null，则表示URL无效，因此将URL更改回与状态同步的URL
          SimpleUrlNotifier.of(context).notify();
        }
        return;
      },
      appStateToUrl: () => RouteInformation(location: '/$count'),
      child: Scaffold(
        appBar: AppBar(
          title: Text('Counter App'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '$count',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              count++;
            });
            // 不需要调用 SimpleUrlNotifier.of(context).notify();
            // 因为小部件将被重建，这将重建SimpleUrlHandler。
          },
          tooltip: 'Counter',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何在Flutter项目中使用simple_url_handler插件来处理URL的示例代码。这个插件允许你监听和处理应用内URL的打开事件。

步骤1：添加依赖

首先，你需要在pubspec.yaml文件中添加simple_url_handler的依赖：

dependencies:
  flutter:
    sdk: flutter
  simple_url_handler: ^x.y.z  # 请将x.y.z替换为最新版本号

步骤2：安装依赖

在终端中运行以下命令来安装依赖：

flutter pub get

步骤3：配置Android和iOS

Android

在android/app/src/main/AndroidManifest.xml中添加以下意图过滤器（Intent Filter）到你的<activity>标签中：

<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="yourappscheme" android:host="yourapp.com" />
    </intent-filter>
</activity>

请将yourappscheme和yourapp.com替换为你的实际方案（scheme）和主机名（host）。

iOS

在ios/Runner/Info.plist中添加以下URL类型配置：

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

同样，将yourappscheme替换为你的实际方案。

步骤4：编写Dart代码

在你的Dart代码中，使用simple_url_handler来监听和处理URL。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('URL Handler Example'),
        ),
        body: Center(
          child: Text('Open your app with a URL to see the handler in action!'),
        ),
      ),
    );
  }
}

@override
void initState() {
  super.initState();

  // 初始化并监听URL
  SimpleUrlHandler.initialize().then((handler) {
    handler.addListener((url) {
      // 处理接收到的URL
      print('Received URL: $url');
      // 你可以在这里添加逻辑来处理不同的URL
      if (url.contains('examplepath')) {
        // 例如，根据URL的不同部分执行不同操作
        showDialog(
          context: context,
          builder: (context) => AlertDialog(
            title: Text('URL Handled'),
            content: Text('You opened the URL: $url'),
            actions: <Widget>[
              TextButton(
                onPressed: () => Navigator.of(context).pop(),
                child: Text('OK'),
              ),
            ],
          ),
        );
      }
    });
  });
}

注意事项

  1. 确保在AndroidManifest.xml和Info.plist中正确配置了URL方案。
  2. initState中的初始化代码确保在组件初始化时就开始监听URL。
  3. 根据实际需求修改URL的处理逻辑。

这样，你就可以在Flutter应用中使用simple_url_handler插件来处理URL了。希望这个示例对你有帮助！

回到顶部