About Us Developer Portal Archives

Flutter Story Quick Start Guide

Quick Start Guide for Integrating AmityUIKit's Story Feature into Flutter Applications

Welcome to the Quick Start Guide for integrating Amity Social Cloud's Story feature into your existing Flutter application. This guide provides step-by-step instructions to incorporate social storytelling into your app, enhancing user engagement through shared experiences.

Prerequisites

  1. Flutter and Dart installed on you system.

  2. Flutter SDK version >=2.5.0

  3. Dart SDK version >=2.17.6 <3.0.0

  4. Valid Installation or Android Studio

  5. A valid Amity Social Cloud account and an API key.

Step 1: Add AmityUIKit Dependency

Add AmityUIKit to you project using this command

flutter pub add amity_uikit_beta_service

Step 2: Setup Required Permissions For iOS project

Your application needs the following permissions for accessing camera, microphone, and photo library:

  • In your info.plist, add the following keys with appropriate descriptions:

    • NSCameraUsageDescription

    • NSMicrophoneUsageDescription

    • NSPhotoLibraryUsageDescription

Step 3: Integrating Story Feature

All pages and components of Flutter Story feature as available either as widgets or pages to navigate to. Widgets components can easily be integrated to the existing widget tree and Pages can easily be navigated to using the Navigator.

  • For displaying stories related to a specific community:


    AmityStoryTabComponentType feedTypeCommunity = CommunityFeedStoryTab(
      communityId: community.communityId!,
    );
    
    AmityStoryTabComponent(
      type: feedTypeCommunity,
    );

  • For navigating to the story creation page, specifying a target community ID:

To allow users to create stories, initiate the story creation page with a specific target, such as a community ID:


Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => AmityCreateStoryPage(
          targetType: targetType,
          targetId: targetId,
        ),
      ),
    );

Step 4: Customizing the UI

AmityUIKit supports extensive customization options via a config.json file. You can modify themes, colors, and icons for various components and elements of the story feature according to your application's design requirements.

  • Example customization snippet:

"global_theme": {
  "light_theme": {
    "primary_color": "#FFFFFF",
    "secondary_color": "#AB1234"
  }
}

  • You can exclude certain UI elements or customize specific components and elements as per your needs.

You have now successfully integrated the Amity Social Cloud Story feature into your Android application. For further customization options, refer to the detailed documentation provided with the SDK. If you encounter any issues or require assistance, our community forum at community.amity.co is always here to help.

Last updated