Flutter桌面快捷方式插件flutter_pinned_shortcut_plus的使用

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

Flutter桌面快捷方式插件flutter_pinned_shortcut_plus的使用

在Flutter应用中，桌面快捷方式可以让用户通过点击快捷方式直接进入应用内的特定页面或执行特定的操作。flutter_pinned_shortcut_plus插件可以帮助开发者实现这一功能。

示例代码

main.dart

import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_cache_manager/flutter_cache_manager.dart';
import 'package:flutter_pinned_shortcut_plus/flutter_pinned_shortcut_plus.dart';
import 'package:flutter_pinned_shortcut_plus_example/followers.dart';
import 'package:flutter_pinned_shortcut_plus_example/profile_screen.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>();
  final _flutterPinnedShortcutPlugin = FlutterPinnedShortcut();

  [@override](/user/override)
  void initState() {
    super.initState();
    // 在框架构建后执行回调
    WidgetsBinding.instance.addPostFrameCallback((_) {
      getIncomingAction();
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      navigatorKey: _navigatorKey, // 设置导航键
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Pinned Shortcut'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Center(
              child: ElevatedButton(
                onPressed: addPinnedShortcut,
                child: const Text("添加带有图标的快捷方式"),
              ),
            ),
            const SizedBox(height: 10,),
            Center(
              child: ElevatedButton(
                onPressed: addPinnedShortcut1,
                child: const Text("添加带有URL的快捷方式"),
              ),
            ),
          ],
        ),
      ),
    );
  }

  void addPinnedShortcut() {
    // 首先检查iconUri是否为null，如果为null则使用assetIcon，否则添加url图标
    _flutterPinnedShortcutPlugin.createPinnedShortcut(
        id: "1",
        label: "Followers",
        action: "followers",
        iconAssetName: "assets/splash.png",
        iconUri: null
    );
  }

  void addPinnedShortcut1() async {
    // 首先检查iconUri是否为null，如果为null则使用assetIcon，否则添加url图标
    File? file;
    file = await DefaultCacheManager().getSingleFile("https://cdn-icons-png.flaticon.com/512/7347/7347153.png");
    _flutterPinnedShortcutPlugin.createPinnedShortcut(
        id: "2",
        label: "Profile",
        action: "profile",
        iconAssetName: "assets/splash.png",
        iconUri: Uri.file(file.path).toString()
    );
  }

  void getIncomingAction() {
    _flutterPinnedShortcutPlugin.getLaunchAction((action) {
      switch (action) {
        case "followers":
          if (kDebugMode) {
            print("Malik Tariq Azam-$action");
          }
          // 使用navigatorKey来推送路由或其他状态管理
          _navigatorKey.currentState?.push(
            MaterialPageRoute(builder: (context) => MyFollowers()),
          );
          break;
        case "profile":
          // 使用navigatorKey来推送路由或其他状态管理
          _navigatorKey.currentState?.push(
            MaterialPageRoute(builder: (context) => MyProfile()),
          );
          break;
      }
    });
  }
}

// 示例页面：关注者页面
class MyFollowers extends StatelessWidget {
  const MyFollowers({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(
            '这是关注者页面',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

// 示例页面：个人资料页面
class MyProfile extends StatelessWidget {
  const MyProfile({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(
            '这是个人资料页面',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

说明

  1. 导入必要的包：

    import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_cache_manager/flutter_cache_manager.dart';
import 'package:flutter_pinned_shortcut_plus/flutter_pinned_shortcut_plus.dart';

  2. 创建主应用类：

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

  3. 初始化插件并设置导航键：

    class _MyAppState extends State<MyApp> {
  final GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>();
  final _flutterPinnedShortcutPlugin = FlutterPinnedShortcut();

  [@override](/user/override)
  void initState() {
    super.initState();
    // 在框架构建后执行回调
    WidgetsBinding.instance.addPostFrameCallback((_) {
      getIncomingAction();
    });
  }

  4. 构建应用UI：

    [@override](/user/override)
Widget build(BuildContext context) {
  return MaterialApp(
    debugShowCheckedModeBanner: false,
    navigatorKey: _navigatorKey, // 设置导航键
    home: Scaffold(
      appBar: AppBar(
        title: const Text('Pinned Shortcut'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Center(
            child: ElevatedButton(
              onPressed: addPinnedShortcut,
              child: const Text("添加带有图标的快捷方式"),
            ),
          ),
          const SizedBox(height: 10,),
          Center(
            child: ElevatedButton(
              onPressed: addPinnedShortcut1,
              child: const Text("添加带有URL的快捷方式"),
            ),
          ),
        ],
      ),
    ),
  );
}

  5. 添加快捷方式：

    void addPinnedShortcut() {
  // 首先检查iconUri是否为null，如果为null则使用assetIcon，否则添加url图标
  _flutterPinnedShortcutPlugin.createPinnedShortcut(
      id: "1",
      label: "Followers",
      action: "followers",
      iconAssetName: "assets/splash.png",
      iconUri: null
  );
}

void addPinnedShortcut1() async {
  // 首先检查iconUri是否为null，如果为null则使用assetIcon，否则添加url图标
  File? file;
  file = await DefaultCacheManager().getSingleFile("https://cdn-icons-png.flaticon.com/512/7347/7347153.png");
  _flutterPinnedShortcutPlugin.createPinnedShortcut(
      id: "2",
      label: "Profile",
      action: "profile",
      iconAssetName: "assets/splash.png",
      iconUri: Uri.file(file.path).toString()
  );
}

  6. 处理传入的动作：

    void getIncomingAction() {
  _flutterPinnedShortcutPlugin.getLaunchAction((action) {
    switch (action) {
      case "followers":
        if (kDebugMode) {
          print("Malik Tariq Azam-$action");
        }
        // 使用navigatorKey来推送路由或其他状态管理
        _navigatorKey.currentState?.push(
          MaterialPageRoute(builder: (context) => MyFollowers()),
        );
        break;
      case "profile":
        // 使用navigatorKey来推送路由或其他状态管理
        _navigatorKey.currentState?.push(
          MaterialPageRoute(builder: (context) => MyProfile()),
        );
        break;
    }
  });
}

更多关于Flutter桌面快捷方式插件flutter_pinned_shortcut_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter桌面快捷方式插件flutter_pinned_shortcut_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用flutter_pinned_shortcut_plus插件来创建桌面快捷方式的代码示例。

1. 添加依赖

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

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

然后运行flutter pub get来获取依赖。

2. 配置Android权限

由于创建桌面快捷方式涉及到操作系统的权限，你需要在android/app/src/main/AndroidManifest.xml中添加必要的权限：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">
    <uses-permission android:name="com.android.launcher.permission.INSTALL_SHORTCUT" />
    <!-- 其他配置 -->
</manifest>

3. 使用插件创建快捷方式

在你的Flutter代码中，你可以使用flutter_pinned_shortcut_plus插件来创建桌面快捷方式。以下是一个简单的示例：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Pinned Shortcut Plus Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            try {
              await FlutterPinnedShortcutPlus.createShortcut(
                'MyShortcut', // 快捷方式的名称
                'This is a shortcut to my app', // 快捷方式的描述
                icon: 'ic_launcher_foreground', // 快捷方式的图标资源名称（需要放在res/drawable目录下）
                intentName: 'com.example.yourapp.SHORTCUT', // 自定义的Intent名称
                primaryColor: Colors.blue.value, // 快捷方式的背景颜色
              );
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Shortcut created successfully!')),
              );
            } catch (e) {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Failed to create shortcut: $e')),
              );
            }
          },
          child: Text('Create Shortcut'),
        ),
      ),
    );
  }
}

4. 添加图标资源

对于Android，你需要将图标资源（例如ic_launcher_foreground.png）放在android/app/src/main/res/drawable目录下。确保图标的尺寸和格式符合Android的要求。

5. 注意事项

  • iOS支持：flutter_pinned_shortcut_plus插件目前主要支持Android。对于iOS，创建桌面快捷方式的实现方式会有所不同，通常需要使用URL Scheme或其他系统提供的方法。
  • 权限处理：在实际应用中，应妥善处理用户权限请求，特别是在Android 10及以上版本中，动态权限请求可能需要额外的处理。
  • 测试：在发布之前，请确保在不同版本的Android设备上测试快捷方式功能，以确保兼容性。

通过上述步骤，你应该能够在Flutter应用中成功创建桌面快捷方式。

回到顶部