Flutter URL跳转插件url_launcher_plus的使用

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

Flutter URL跳转插件url_launcher_plus的使用

插件介绍

url_launcher_plus 是一个可定制化的 URL 跳转插件，适用于 Android 和 iOS 设备。它提供了AppBar导航和刷新按钮等功能。

安装说明

  1. 添加最新版本的 url_launcher_plus 到您的 pubspec.yaml 文件中，并运行 dart pub get。
  2. 确保 minSdkVersion 大于等于 119。
  3. 导入插件并在您的 Flutter 应用中使用。
dependencies:
  url_launcher_plus:

defaultConfig {
  minSdkVersion 119
  ...
}

import 'package:flutter_gearbox/url_launcher_plus.dart';

示例代码

以下是一个完整的示例代码，展示了如何使用 url_launcher_plus 进行 URL 跳转。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Url Launcher Plus Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  void navigate(BuildContext context) {
    Navigator.push(context, MaterialPageRoute(
      builder: (context) {
        /// [UrlLauncher] - personalized screen for displaying page with the help of Webview, with full customization options
        return UrlLauncher(
          launchUrl: "https://google.com/",
          backgroundColor: Colors.blue,
          blockUrls: const ['blockThisSite.com1', 'blockThisSite.com2'],
          onClose: () {},
          iconColor: Colors.white,
          onRefresh: () {},
          onProgress: () {},
          onUrlChange: () {},
          onPageStarted: () {},
          onPageFinished: () {},
          onNavigationRequest: () {},
          onWebResourceError: () {},
        );
      },
    ));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            children: [
              ElevatedButton.icon(
                onPressed: () => navigate(context),
                label: const Text("Custom Launch Url"),
                icon: const Icon(Icons.ads_click),
              ),
              const SizedBox(height: 300),
              ElevatedButton.icon(
                onPressed: () {
                  /// [launchUrl] - launch url with default values provided by the package
                  launchUrl(context, "https://google.com/");
                },
                label: const Text("Default Launcher"),
                icon: const Icon(Icons.power_settings_new_outlined),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter项目中使用url_launcher_plus插件来实现URL跳转的示例代码。url_launcher_plus是一个用于在Flutter应用中启动URL的插件，支持Android和iOS平台。

步骤1：添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  url_launcher_plus: ^3.0.0  # 请检查最新版本号

步骤2：导入插件

在你的Dart文件中（例如main.dart），导入url_launcher_plus插件。

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

步骤3：请求权限（仅Android）

对于Android平台，如果你的应用目标是Android 10（API级别29）或更高版本，并且你希望启动的URL可能涉及文件或其他需要特定权限的资源，你需要在AndroidManifest.xml中请求相应的权限。对于简单的HTTP或HTTPS链接，通常不需要额外的权限。

步骤4：使用插件

下面是一个简单的示例，展示如何在按钮点击时打开一个URL。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('URL Launcher Plus Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: _launchURL,
            child: Text('Open URL'),
          ),
        ),
      ),
    );
  }

  void _launchURL() async {
    const url = 'https://www.example.com';
    if (await canLaunchUrl(Uri.parse(url))) {
      await launchUrl(Uri.parse(url));
    } else {
      throw 'Could not launch $url';
    }
  }
}

注意事项

  1. 权限处理：对于Android，如果你的应用需要处理如文件URL等敏感内容，确保你已经在AndroidManifest.xml中请求了相应的权限，并在运行时请求用户授权。
  2. 错误处理：示例代码中简单地抛出了一个异常，但在实际应用中，你可能希望以更友好的方式通知用户（如显示Snackbar或Dialog）。
  3. 平台特定的行为：url_launcher_plus插件已经为你处理了大部分平台特定的行为，但在某些情况下，你可能需要针对特定平台添加额外的配置或代码。

这个示例提供了一个基本的框架，你可以根据需要进行扩展和修改。希望这能帮助你顺利地在Flutter应用中使用url_launcher_plus插件！

回到顶部