Replace ../flutter_amity_uikit_beta_service with the actual relative or absolute path to your cloned flutter_amity_uikit_beta_service directory.
Step 3: Import Package in Your Dart Files
In your Flutter project, import the Amity UIKit package in the Dart files where you want to use it:
import'package:amity_uikit_beta_service/amity_sle_uikit.dart';// Import other specific files from the package as needed
Overview
Requirement
Flutter 3.1.0 or higher
Implementation Strategies
The UIKit API provides several strategies to integrate with your application.
Page Presentation
Use the UIKit as is.
Integrate the Chat experience in the least amount of effort.
Page Presentation customized
Add a custom theme to the default implementation of the UIKit.
Complete control of the visual style of Chat UI by implementing declarative styles (fonts and colors) for your user interface.
Page Integration
Use key components from the UIKit SDK and integrate them directly into your application.
Add the Chat UI to your existing design.
Key Concepts
Architecture
The UIKit is built on the foundation of the Amity API while adding a UI layer to speed product development efforts. At the core it is leveraging the same Channel, Messaging concepts, subscribing to live objects whilst adding a UIKit to accelerate product delivery and UI that delivers great user experience for companies wanting to deploy messaging.
In the current state, there are two modules that can be used. You can follow the steps below. These two modules can be integrated into your application easily in no time.
User can create community, create post content and see new content generate via Feed
Setup & Authentication
With Amity UIKit 2.3, we have introduced a new way to Authentication process. Just follow the guide below.
Adding required permissions
Your app may require the following permissions to work properly;
Camera access
Microphone access
Photo library usage access
Before submitting your application to the store, please make sure the following permissions are already granted. Here are the steps to ask for permission.
Locate the info.plist file and add:
NSCameraUsageDescription
NSMicrophoneUsageDescription
NSPhotoLibraryUsageDescription
Setup API key
AmityUIKit requires an API key. You need a valid API key to begin using the UIKit. Please find your account API key in Amity Social Cloud Console.
After logging in Console:
Click Settings to expand the menu.
Select Security.
In the Security page, you can find the API key in the Keys section.
Certainly! The provided code snippet demonstrates how to set up and authenticate using the Amity UIKit for Flutter. Let's break it down into a step-by-step guide:
Step 1: Initialize Amity SDK
First, you need to initialize the Amity SDK in your main function. This is crucial for setting up the SDK before your Flutter app starts running.
WidgetsFlutterBinding.ensureInitialized(): Ensures that Flutter bindings are initialized.
AmitySLEUIKit().initUIKit("YOUR_API_KEY", "REGION"): Initializes the Amity UIKit with your API key and region. Replace "YOUR_API_KEY" and "REGION" with the actual values.
Step 2: Wrap MaterialApp with AmitySLEProvider
In your main app widget (here, MyApp), wrap the MaterialApp with AmitySLEProvider. This provider is necessary for the Amity UIKit to function properly throughout your app.
classMyAppextendsStatelessWidget {@overrideWidgetbuild(BuildContext context) {returnAmitySLEProvider( child:Builder(builder: (context2) {// Configuration and MaterialApp code goes here }), ); }}
Step 3: Implement Authentication
In your InitialWidget class, implement a button to handle the login process with Amity.
ElevatedButton( onPressed: () {AmitySLEUIKit().registerDevice(context, "USER_IDENTIFIER"); }, child:constText("Login to Amity"),),
Replace "USER_IDENTIFIER" with the identifier of the user who is logging in.
Step 4: Navigating to UIKit Screens
The code provides examples of how to navigate to various screens provided by the Amity UIKit, like channel lists, chat rooms, and global feeds.
Once these steps are implemented, you can run your Flutter app. The Amity UIKit should be integrated and functioning according to the setup in your main.dart.
Remember to replace placeholders like "YOUR_API_KEY", "REGION", and "USER_IDENTIFIER" with actual values specific to your Amity UIKit setup.
Register device for push notifications
Registering your app for push notifications will require a device token as a parameter.
Amity's UIKit does not manage:
User-facing requests for push notifications and authorizations
The creation and refreshing of push notification tokens
It's up to your app to take those steps and pass the device token.
In the event that your user logs out, you should explicitly unregister the user from the SDK as well, to prevent the current device from receiving any unnecessary or restricted data.
AmitySLEUIKit().unRegisterDevice();
Unregistering a device is a synchronous operation. Once theunregisterDevice method is called, the SDK disconnects from the server and wipes out user session.
Using as a whole feature with the default settings
The quickest way to start using the Community feature, all the default logic and navigation has already been defined.
Usage
Navigate to explore page widget
ListTile( title: Text('Explore'), onTap: () {// Navigate or perform action based on 'Newsfeed' tap Navigator.of(context).push(MaterialPageRoute( builder: (context) => Scaffold(body: CommunityPage()),)); },),
Flutter (Beta)
Amity modules are ready-to-use — the only things left to do for our customers are integration and front-end. Going the extra mile, we've created a UIKit with endless customizations.
API key in Security page
Using Themes
Using the default theme
AmityUIKit uses the default theme as part of the design language.
Theme customization
With no customization, UIKit already looks good. However, if you wish to customize the theme, you can declare changes to both colors and typography.
Colors
UIKit uses a small set of declared colors to simplify the design task for developers. These colors are automatically rendered at appropriate shades to communicate states and interactions to the users.
Usage
To declare your own colors on iOS:
Create an instance from the provided class AmityTheme