Flutter LINE LIFF集成插件 `flutter_line_liff` 的使用

flutter_line_liff 是一个专门为Flutter Web开发的插件，用于集成LINE LIFF SDK。该插件仅支持Web平台。

使用方法

1. 添加依赖

在 pubspec.yaml 文件中添加 flutter_line_liff 作为依赖：

dependencies:
  flutter_line_liff: ^2.0.0

2. 添加JavaScript LINE LIFF SDK

在 index.html 文件的 <head> 标签中添加 JavaScript SDK：

<head>
    <script charset="utf-8" src="https://static.line-scdn.net/liff/edge/versions/2.20.3/sdk.js"></script>
    <!-- your other html flags -->
</head>

3. 初始化LIFF SDK

在 main 函数中初始化 FlutterLineLiff，注意不要在Widget中进行初始化：

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  
  FlutterLineLiff().init(
    config: Config(liffId: '{YOUR_LIFF_ID}'),
    successCallback: () {
      print('LIFF init success.');
    },
    errorCallback: (error) {
      print('LIFF init error: ${error.name}, ${error.message}, ${error.stack}');
    },
  );
  
  runApp(MyApp());
}

4. 等待SDK准备就绪

在SDK初始化完成后，您可以使用 FlutterLineLiff 中的所有方法：

FlutterLineLiff().ready.then((_) {
  // SDK is ready now.
});

5. 获取SDK和账户信息

以下是一些获取SDK和用户账户信息的示例：

// 获取LIFF应用ID
final String? id = FlutterLineLiff().id;

// 获取运行环境的操作系统
final String? os = FlutterLineLiff().os;

// 获取语言设置
final String language = FlutterLineLiff().language;

// 获取LIFF SDK版本
final String version = FlutterLineLiff().version;

// 获取用户的LINE版本
final String? lineVersion = FlutterLineLiff().lineVersion;

// 获取上下文信息（如聊天类型）
final Context? context = FlutterLineLiff().context;

// 判断是否在LINE客户端内运行
final bool isInClient = FlutterLineLiff().isInClient;

// 检查用户是否已登录
final bool isLoggedIn = FlutterLineLiff().isLoggedIn;

// 检查指定API是否可用
final bool isApiAvailable = FlutterLineLiff().isApiAvailable(apiName: 'shareTargetPicker');

// 获取当前用户的访问令牌
final String? accessToken = FlutterLineLiff().getAccessToken();

// 获取原始ID令牌
final String? idToken = FlutterLineLiff().getIDToken();

// 获取解码后的ID令牌
final JWTPayload? decodedIDToken = FlutterLineLiff().getDecodedIDToken();

6. 获取用户资料

获取当前用户的资料信息：

final Profile profile = await FlutterLineLiff().profile;
print('Profile: ${profile.displayName}, ${profile.userId}');

7. 获取好友关系

获取用户与LINE官方账号的好友关系状态：

final Friendship friendship = await FlutterLineLiff().friendship;
print('Friendship: ${friendship.friendFlag}');

8. 登录和登出

执行登录操作：

FlutterLineLiff().login();

执行登出操作：

FlutterLineLiff().logout();

9. 权限管理

查询用户是否同意授予指定权限：

final PermissionStatus status = FlutterLineLiff().permission.query(Permission.chatMessageWrite);
print('Permission status: ${status.status}');

请求所有权限：

FlutterLineLiff().permission.requestAll();

10. 打开和关闭窗口

打开指定URL的窗口：

FlutterLineLiff().openWindow(
  params: OpenWindowParams(
    url: 'https://example.com',
    external: false,
  ),
);

关闭LIFF应用：

FlutterLineLiff().closeWindow();

11. 扫描二维码

启动二维码扫描器并获取字符串结果：

final ScanCodeResult result = await FlutterLineLiff().scanCodeV2();
print('Scanned QR code value: ${result.value}');

12. 发送消息

发送消息到聊天界面：

FlutterLineLiff().sendMessages(messages: [
  TextMessage(text: 'Hello, World!'),
  ImageMessage(originalContentUrl: 'https://example.com/image.jpg', previewImageUrl: 'https://example.com/preview.jpg'),
]);

// 或者发送自定义消息
FlutterLineLiff().sendCustomMessages(
  messages: [
    {'type': 'text', 'text': 'Hello, World!'}
  ],
);

13. 分享目标选择器

显示目标选择器（选择组或朋友）并发送消息：

final ShareTargetResult? result = await FlutterLineLiff().shareTargetPicker(
  messages: [
    const TextMessage(text: 'Share Target Test'),
  ],
);
print('Share target picker result: ${result?.targetType}');

14. 创建永久链接

获取LIFF应用的永久链接：

final String permanentUrl = await FlutterLineLiff().createUrlBy(url: 'https://example.com');
print('Permanent URL: $permanentUrl');

完整示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_line_liff 插件：

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  
  FlutterLineLiff().init(
    config: Config(liffId: '{YOUR_LIFF_ID}'),
    successCallback: () {
      print('LIFF init success.');
    },
    errorCallback: (error) {
      print('LIFF init error: ${error.name}, ${error.message}, ${error.stack}');
    },
  );
  
  runApp(MyApp());
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  bool _isInitDone = false;
  String? _qrCodeValue;

  [@override](/user/override)
  void initState() {
    FlutterLineLiff().ready.then((_) {
      setState(() {
        _isInitDone = true;
      });
    });
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter LINE LIFF'),
      ),
      body: !_isInitDone
          ? Center(child: Text('Wait for LIFF SDK initialize.'))
          : Padding(
              padding: const EdgeInsets.all(16.0),
              child: ListView(
                children: [
                  FutureBuilder<Profile>(
                    future: FlutterLineLiff().profile,
                    builder: (context, snapshot) => Text('Profile: ${snapshot.data?.displayName}\n\n'),
                  ),
                  FutureBuilder<Friendship>(
                    future: FlutterLineLiff().friendship,
                    builder: (context, snapshot) => Text('Friendship: ${snapshot.data?.friendFlag}\n\n'),
                  ),
                  TextButton(
                    onPressed: () {
                      if (!FlutterLineLiff().isLoggedIn) {
                        FlutterLineLiff().login();
                      } else {
                        FlutterLineLiff().logout();
                      }
                    },
                    child: Text(FlutterLineLiff().isLoggedIn ? 'Logout' : 'Login'),
                  ),
                  TextButton(
                    onPressed: () {
                      FlutterLineLiff().scanCodeV2().then((result) {
                        setState(() {
                          _qrCodeValue = result.value;
                        });
                      }).catchError((error) {
                        print('Scan QR code error: $error');
                      });
                    },
                    child: Text('Scan QR Code V2'),
                  ),
                  if (_qrCodeValue != null) Text('QR Code Value: $_qrCodeValue'),
                ],
              ),
            ),
    );
  }
}

更多关于Flutter LINE LIFF集成插件flutter_line_liff的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

yuanlaile 1楼•5 小时前

更多关于Flutter LINE LIFF集成插件flutter_line_liff的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

在Flutter项目中集成LINE LIFF（LINE Frontend Framework）可以通过使用flutter_line_liff插件来实现。以下是一个基本的代码示例，展示了如何在Flutter应用中配置和使用flutter_line_liff插件。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_line_liff: ^最新版本号  # 请替换为实际的最新版本号

然后运行flutter pub get来安装依赖。

2. 配置LINE LIFF信息

在你的Flutter应用中，你需要配置LINE LIFF的相关信息，包括LIFF ID和LIFF URL。这些信息通常在你的LINE开发者后台配置。

3. 初始化并使用flutter_line_liff

下面是一个简单的示例，展示了如何初始化flutter_line_liff插件并启动LIFF应用：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter LINE LIFF Example'),
        ),
        body: Center(
          child: LIFFButton(
            liffId: '你的LIFF_ID', // 替换为你的LIFF ID
            onOpen: (result) {
              // 用户成功打开LIFF应用时的回调
              print('LIFF opened successfully: $result');
            },
            onError: (error) {
              // 打开LIFF应用失败时的回调
              print('Error opening LIFF: $error');
            },
            child: Text('Open LIFF'),
          ),
        ),
      ),
    );
  }
}

class LIFFButton extends StatelessWidget {
  final String liffId;
  final VoidCallback onOpen;
  final Function(dynamic) onError;
  final Widget child;

  LIFFButton({
    required this.liffId,
    required this.onOpen,
    required this.onError,
    required this.child,
  });

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        try {
          // 初始化flutter_line_liff
          await FlutterLineLiff.instance.init(liffId: liffId);
          
          // 打开LIFF应用
          bool result = await FlutterLineLiff.instance.open();
          onOpen();
          if (!result) {
            throw Exception('LIFF did not open successfully');
          }
        } catch (error) {
          onError(error);
        }
      },
      child: child,
    );
  }
}

4. 注意事项

确保你已经在LINE开发者后台正确配置了LIFF应用，并获取了LIFF ID。
在真实的应用中，你可能需要处理更多的错误情况和用户交互，例如检查用户是否已安装LINE应用，如果没有安装则引导用户下载。
flutter_line_liff插件的具体API和用法可能会随着版本更新而变化，请参考官方文档或插件的GitHub仓库以获取最新信息。

这个示例代码展示了如何在Flutter应用中集成和使用flutter_line_liff插件来启动LINE LIFF应用。根据你的实际需求，你可能需要进一步定制和扩展这个示例。

Flutter LINE LIFF集成插件flutter_line_liff的使用

Flutter LINE LIFF集成插件 flutter_line_liff 的使用

使用方法

1. 添加依赖

2. 添加JavaScript LINE LIFF SDK

3. 初始化LIFF SDK

4. 等待SDK准备就绪

5. 获取SDK和账户信息

6. 获取用户资料

7. 获取好友关系

8. 登录和登出

9. 权限管理

10. 打开和关闭窗口

11. 扫描二维码

12. 发送消息

13. 分享目标选择器

14. 创建永久链接

完整示例代码

1. 添加依赖

2. 配置LINE LIFF信息

3. 初始化并使用flutter_line_liff

4. 注意事项

Flutter LINE LIFF集成插件 `flutter_line_liff` 的使用