Flutter Instagram风格图片选择插件flutter_instagram_image_picker的使用

Flutter Instagram风格图片选择插件flutter_instagram_image_picker的使用

flutter_instagram_image_picker

这是一个用于从Instagram中选择图片的Flutter包。

开始使用

该插件根据提供的访问令牌显示用户的Instagram相册和照片。它自己处理授权和登录，然后只提供访问数据（userId+SessionKey）给相册。

使用方法

1. 检查用户是否已登录，如果没有，则提示他输入登录信息，并导航到InstagramLoginPage。

   bool isLogged = await InstagramAuth().isLogged;
   // 检查用户是否已经登录，如果未登录则让用户登录
   if (!isLogged) {
     bool loginStatus = await InstagramAuth().signUserIn(context);
   
     // 如果用户取消了操作
     if (!loginStatus)
       return;
   }
   

2. 通过访问他的数据来检查用户是否成功登录。

   final accessMapData = await InstagramAuth().accessData;
   if(accessMapData == null){
     return null;
   }
   

3. 获取访问数据后，可以导航到InstagramImagePicker：

   Navigator.push(
     context,
     MaterialPageRoute(
       builder: (context) => InstagramImagePicker(
         accessMapData, // 访问数据
         showLogoutButton: true, // 显示退出按钮
         onDone: (photos) {
           // photos是你在选择器中选择的照片
           // 每张照片都有url
           Navigator.pop(context);
         },
         onCancel: () => Navigator.pop(context), // 取消选择时的操作
       ),
     ),
   );
   

截图

• 登录页面:

• 图片选择器:

• 图片选择器（选择后）:

完整示例代码

import 'package:flutter/material.dart';
import 'package:flutter_instagram_image_picker/instagram_auth.dart';
import 'package:flutter_instagram_image_picker/picker.dart';

void main() => runApp(
      MaterialApp(
        title: 'Instagram picker Demo',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: const LoginPage(),
        debugShowCheckedModeBanner: false,
      ),
    );

class LoginPage extends StatelessWidget {
  const LoginPage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Instagram login demo'),
      ),
      body: Center(
        child: ElevatedButton(
            child: const Text("Continue with instagram"),
            onPressed: () async {
              // 检查用户是否已经登录
              bool isLogged = await InstagramAuth().isLogged;
              if (!isLogged) {
                // 如果未登录，则尝试登录
                bool loginStatus = await InstagramAuth().signUserIn(context);

                // 如果用户取消了操作
                if (!loginStatus) return;
              }

              // 获取访问数据
              final accessMapData = await InstagramAuth().accessData;
              if (accessMapData == null) {
                return;
              }

              // 获取到访问数据后，跳转到图片选择器界面
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => InstagramImagePicker(
                    accessMapData, // 访问数据
                    showLogoutButton: true, // 显示退出按钮
                    onDone: (items) {
                      // 打印选中的图片URL
                      for (var element in items) {
                        print('selected: ${element.url}');
                      }
                      Navigator.pop(context); // 关闭选择器界面
                    },
                    onCancel: () => Navigator.pop(context), // 取消选择时关闭界面
                  ),
                ),
              );
            }),
      ),
    );
  }
}