Flutter Instagram基本展示API插件instagram_basic_display_api的使用

Flutter Instagram基本展示API插件instagram_basic_display_api的使用

Instagram Basic Display API

一个用于在iOS和Android应用程序中集成Instagram Basic Display API的Flutter插件。

开始使用

要访问Instagram Basic Display API，您需要按照开始使用中的步骤操作。完成创建应用程序的步骤后，您将获得INSTAGRAM_CLIENT_ID、INSTAGRAM_CLIENT_SECRET和REDIRECT_URI。您需要在项目中设置这些值以使用Flutter插件来访问Instagram Basic Display API。

通常您的应用会有一些秘密凭证或API密钥，您需要在应用中使用它们才能正常工作，但您希望这些信息不容易从您的应用中提取。因此我们需要一种方法来在项目中存储这些信息。

Android

  1. 为了存储秘密API密钥，我们将它们保存为资源文件。首先，在根目录下创建一个名为secret.properties的文件，并添加不同的密钥值。
  2. 接下来，在app/build.gradle文件中添加这一部分，以便从该文件读取内容。您还将使用buildConfigField定义创建编译时选项，这些选项将通过此文件生成。
  3. 现在，您可以使用Gradle提供的BuildConfig对象在源代码中的任何地方访问这些字段。

iOS

对于管理iOS应用中的秘密，我们使用Xcode配置文件。

  1. 创建一个包含不同秘密密钥值的配置设置文件。
  2. 点击项目，选择“Info”标签页，并展开调试和发布配置。然后将Secrets.xcconfig文件附加到每个配置。
  3. 更新Info.plist文件，添加一个新的Secrets字段。
  4. 您现在可以使用Bundle.main.object访问这些字段。

使用示例

这是一个简单的应用，它将打印到控制台，以演示此插件的功能。

askInstagramToken

您需要登录您的Instagram账号以获取访问令牌，以便使用Instagram基本显示API。确保您的Instagram账户已添加到您的Instagram基本显示项目中作为测试用户。

示例用法：

InstagramBasicDisplayApi.askInstagramToken();

getInstagramUser

这将返回一个Future，响应当前用户的详细信息。

示例用法：

InstagramBasicDisplayApi.getInstagramUser().then((user) {
  print("user = $user");
  print(
      "user id = ${user?.id}, name = ${user?.name}, accountType = ${user?.accountType}");
});

logout

这将注销您的Instagram账号，并返回一个Future，响应当前用户的详细信息。

示例用法：

InstagramBasicDisplayApi.logout().then((user) {
  print("user = $user");
  print(
      "user id = ${user?.id}, name = ${user?.name}, accountType = ${user?.accountType}");
});

getMedias

这将返回一个Future，响应当前用户的内容。它将显示您的帐户的内容，包括IMAGE、VIDEO或CAROUSEL ALBUM。

示例用法：

InstagramBasicDisplayApi.getMedias().then((medias) {
  if (medias == null) {
    return;
  }
  medias.forEach(
    (element) {
      print('\nmediaItem: '
          '\nid = ${element.id}'
          '\ncaption = ${element.caption}'
          '\npermalink = ${element.permalink}'
          '\nmediaType = ${element.mediaType}'
          '\ntimestamp = ${element.timestamp}'
          '\nthumbnailUrl = ${element.thumbnailUrl}'
          '\nmediaUrl = ${element.mediaUrl}');
    },
  );
});

getMediaItem

这将返回一个Future，响应您选择的媒体项。它将显示您的媒体内容。

示例用法：

InstagramBasicDisplayApi.getMediaItem(
    _mediaList![index].id)
    .then((mediaItem) {
  print("\n\nmediaItem = $mediaItem\n\n");
  if (mediaItem == null) {
    return;
  }
  print('\nmediaItem: '
      '\nid = ${mediaItem.id}'
      '\ncaption = ${mediaItem.caption}'
      '\npermalink = ${mediaItem.permalink}'
      '\nmediaType = ${mediaItem.mediaType}'
      '\ntimestamp = ${mediaItem.timestamp}'
      '\nthumbnailUrl = ${mediaItem.thumbnailUrl}'
      '\nmediaUrl = ${mediaItem.mediaUrl}');
});

getAlbumDetail

这将返回一个Future，响应您选择的相册的详细信息。它将显示您的相册内容，包括IMAGE和VIDEO。

示例用法：

InstagramBasicDisplayApi.getAlbumDetail(SELECTED_ALBUM_ID).then((albumDetail) {
  if (albumDetail == null) {
    return;
  }
  albumDetail.forEach(
    (element) {
      print('\nalbumDetailItem: '
          '\nid = ${element.id}'
          '\nmediaType = ${element.mediaType}'
          '\ntimestamp = ${element.timestamp}'
          '\nthumbnailUrl = ${element.thumbnailUrl}'
          '\nmediaUrl = ${element.mediaUrl}');
    },
  );
});

broadcastInstagramUserStream

这是一个流，您可以监听它，只有当Instagram用户发生变化时才会触发。

示例用法：

InstagramBasicDisplayApi.broadcastInstagramUserStream?.listen((instagramUser) {
  print('instagramUser = ${instagramUser.id}, ${instagramUser.accountType}, ${instagramUser.name}');
});

完整示例代码

以下是完整的示例代码，展示了如何使用插件中的各个功能。

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

import 'package:flutter/services.dart';
import 'package:instagram_basic_display_api/instagram_basic_display_api.dart';
import 'package:instagram_basic_display_api/modules.dart';

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

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

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';
  List<MediaItem>? _mediaList;
  InstagramUser? _instagramUser;

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 平台消息是异步的，所以我们初始化在一个异步方法中。
  Future<void> initPlatformState() async {
    // 如果小部件在异步平台消息仍在飞行时从树中移除，我们想要丢弃回复而不是调用setState更新我们的不存在的外观。
    if (!mounted) return;

    InstagramBasicDisplayApi.initialize();

    String platformVersion;
    // 平台消息可能会失败，所以我们使用try/catch PlatformException。
    // 我们还处理可能返回null的消息。
    try {
      platformVersion = await InstagramBasicDisplayApi.platformVersion ?? 'Unknown platform version';
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }
    setState(() {
      _platformVersion = platformVersion;
    });

    InstagramBasicDisplayApi.broadcastInstagramUserStream?.listen((instagramUser) {
      print('instagramUser = ${instagramUser.id}, ${instagramUser.accountType}, ${instagramUser.name}');
      if (instagramUser.id.isNotEmpty && instagramUser.name.isNotEmpty && instagramUser.accountType.isNotEmpty) {
        setState(() {
          _instagramUser = instagramUser;
        });
      } else {
        print('has logout instagram');
        setState(() {
          _instagramUser = null;
        });
      }
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: ListView(
          children: <Widget>[
            Text('运行于: $_platformVersion\n'),
            Text(_instagramUser != null ? "id: ${_instagramUser!.id}\naccountType: ${_instagramUser!.accountType}\nname: ${_instagramUser!.name}\n" : "未登录Instagram"),
            ElevatedButton(
                child: Text("获取用户"),
                onPressed: () {
                  InstagramBasicDisplayApi.getInstagramUser();
                }),
            ElevatedButton(
                child: Text("请求令牌"),
                onPressed: () {
                  InstagramBasicDisplayApi.askInstagramToken();
                }),
            ElevatedButton(
                child: Text("登出"),
                onPressed: () {
                  InstagramBasicDisplayApi.logout();
                  setState(() {
                    _mediaList = null;
                  });
                }),
            ElevatedButton(
              child: Text("获取媒体"),
              onPressed: () {
                InstagramBasicDisplayApi.getMedias().then((medias) {
                  print("\n\nmedias = $medias\n\n");
                  if (medias == null) {
                    return;
                  }
                  medias.forEach(
                    (element) {
                      print('\nmediaItem: '
                          '\nid = ${element.id}'
                          '\ncaption = ${element.caption}'
                          '\npermalink = ${element.permalink}'
                          '\nmediaType = ${element.mediaType}'
                          '\ntimestamp = ${element.timestamp}'
                          '\nthumbnailUrl = ${element.thumbnailUrl}'
                          '\nmediaUrl = ${element.mediaUrl}');
                    },
                  );
                  setState(() {
                    _mediaList = medias;
                  });
                });
              },
            ),
            _mediaList == null || _mediaList!.isEmpty
                ? Container()
                : ListView.builder(
                    scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                    padding: const EdgeInsets.all(5.5),
                    itemCount: _mediaList!.length,
                    itemBuilder: _itemBuilder,
                  ),
          ],
        ),
      ),
    );
  }

  Widget _itemBuilder(BuildContext context, int index) {
    return InkWell(
      child: Card(
        child: Column(
          children: [
            Text(
              "${_mediaList![index].id}",
              style: TextStyle(
                fontWeight: FontWeight.w500,
              ),
            ),
            Text("${_mediaList![index].caption}"),
            Text("${_mediaList![index].mediaType}"),
            Text("${_mediaList![index].timestamp}"),
            _mediaList![index].mediaType == "CAROUSEL_ALBUM"
                ? ElevatedButton(
                    child: Text("记录相册详情"),
                    onPressed: () {
                      InstagramBasicDisplayApi.getAlbumDetail(
                              _mediaList![index].id)
                          .then((albumDetail) {
                        print("\n\nalbumDetail = $albumDetail\n\n");
                        if (albumDetail == null) {
                          return;
                        }
                        albumDetail.forEach(
                          (element) {
                            print('\n\nalbumDetailItem: '
                                '\nid = ${element.id}'
                                '\nmediaType = ${element.mediaType}'
                                '\ntimestamp = ${element.timestamp}'
                                '\nthumbnailUrl = ${element.thumbnailUrl}'
                                '\nmediaUrl = ${element.mediaUrl}');
                          },
                        );
                      });
                    })
                : Container()
          ],
        ),
      ),
    );
  }
}

更多关于Flutter Instagram基本展示API插件instagram_basic_display_api的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter Instagram基本展示API插件instagram_basic_display_api的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用instagram_basic_display_api插件的示例代码。这个插件允许你集成Instagram的基本展示API，以展示用户的Instagram照片。

首先，确保你已经在pubspec.yaml文件中添加了instagram_basic_display_api依赖：

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

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

接下来，你需要在Instagram开发者门户中创建一个应用，并获取客户端ID和客户端密钥。你还需要配置重定向URI。

以下是完整的Flutter应用示例，它展示了如何使用instagram_basic_display_api插件进行Instagram用户认证并获取用户照片。

main.dart

import 'package:flutter/material.dart';
import 'package:instagram_basic_display_api/instagram_basic_display_api.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

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

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

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

class _InstagramAuthScreenState extends State<InstagramAuthScreen> {
  final InstagramBasicDisplayApi _instagramApi = InstagramBasicDisplayApi(
    clientId: 'YOUR_CLIENT_ID', // 替换为你的客户端ID
    redirectUri: Uri.parse('YOUR_REDIRECT_URI'), // 替换为你的重定向URI
  );

  String _accessToken;
  List<String> _userMediaUrls = [];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Instagram Basic Display API Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                Uri authUri = _instagramApi.getAuthorizationUrl();
                if (await canLaunchUrl(authUri)) {
                  await launchUrl(authUri);
                  String? code = await _instagramApi.retrieveAuthorizationCode();
                  if (code != null) {
                    _accessToken = await _instagramApi.exchangeCodeForAccessToken(code);
                    setState(() {});
                    _fetchUserMedia();
                  }
                }
              },
              child: Text('Login with Instagram'),
            ),
            SizedBox(height: 20),
            if (_accessToken != null)
              Column(
                children: _userMediaUrls.map((url) => Image.network(url)).toList(),
              ),
          ],
        ),
      ),
    );
  }

  Future<void> _fetchUserMedia() async {
    final response = await http.get(
      Uri.parse('https://graph.instagram
回到顶部