TikTok Integration in Flutter

This guide demonstrates how to integrate the TikTok SDK in a Flutter application using the tiktok_integration package. Below are the steps to set up, configure, and use this integration.


Prerequisites

  1. Flutter SDK installed on your system. Install Flutter
  2. A TikTok Developer Account to get your App ID and TikTok App ID. TikTok Developers
  3. Basic knowledge of Flutter development.

Steps to Set Up the Project

1. Update AndroidManifest.xml

Add the following permission to your AndroidManifest.xml file:

<uses-permission android:name="android.permission.INTERNET"/>

Ensure that the file has the correct structure:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.myapp">

    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:label="@string/app_name"
        android:icon="@mipmap/ic_launcher"
        android:theme="@style/AppTheme">
        <!-- Other configurations -->
    </application>
</manifest>

2. Update settings.gradle

Add the following line to your settings.gradle file in the repositories section:

maven { url 'https://www.jitpack.io' }

Example:

pluginManagement {
    repositories {
        google()
        mavenCentral()
        maven { url 'https://www.jitpack.io' } // Add this line
    }
}


3. Update build.gradle

Add the following line to your project-level build.gradle file in the repositories section:

maven { url 'https://www.jitpack.io' }

Example:

allprojects {
    repositories {
        google()
        mavenCentral()
        maven { url 'https://www.jitpack.io' } // Add this line
    }
}


4. Initialize the TikTok SDK

In your Flutter project, create a Dart file (main.dart) and use the following example code to integrate and initialize the TikTok SDK:

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

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    initializeTikTokSdk();
  }

  /// Initialize the TikTok SDK.
  Future<void> initializeTikTokSdk() async {
    try {
      const String appId = 'YOUR_APP_ID';
      const String ttAppId = 'YOUR_TIKTOK_APP_ID';

      await TiktokIntegration.initializeSdk(appId, ttAppId);
      debugPrint("TikTok SDK initialized successfully.");

      await TiktokIntegration.trackEvent(
        'app_start',
        eventId: '12345',
        eventParams: {'source': 'flutter_example'},
      );
      debugPrint("Event tracked successfully.");
    } catch (e) {
      debugPrint("Error initializing TikTok SDK: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('TikTok Integration Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () async {
                  await TiktokIntegration.trackEvent(
                    'button_click',
                    eventParams: {'buttonName': 'TestButton'},
                  );
                  debugPrint("Button click event tracked.");
                },
                child: const Text('Track Event'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Replace YOUR_APP_ID and YOUR_TIKTOK_APP_ID with the actual IDs provided by TikTok.


Testing the Integration

  1. Run the app using:
    flutter run
    
  2. Check the console logs to verify that the SDK is initialized and events are tracked successfully.
  3. Test the button functionality to track custom events.

Additional Notes

  • Ensure you have a stable internet connection for downloading dependencies and testing SDK integration.
  • If you encounter issues, check the logs for detailed error messages.

For more information, refer to the TikTok Developers Documentation.