Flutter部落社交功能插件tribally_sdk的使用

Flutter部落社交功能插件tribally_sdk的使用

IOS only

android coming soon

Launch in-app feed with a few lines of code

通过几行代码启动应用内的社交功能。


Integrate Tribally in under 30 min

在不到30分钟内集成Tribally。

  1. tribally网站上注册。
  2. 获取你的应用密钥:
    • 创建一个新项目。
    • 转到集成部分并记录Project IDAPI Key
  3. 添加Tribally依赖:
    • 打开pubspec.yaml文件。
    • 添加tribally_sdk: ^0.1.0
import 'package:tribally_sdk/tribally_sdk.dart';

Configure TriballyView

配置TriballyView。创建用户并保存其唯一的uid。初始化TriballyView时,使用用户的UID和名称。

TriballyView(
  onTriballyCreated: (TriballyController controller) {
    // 设置用户凭证和项目密钥
    controller.setConfiguration(
      displayName: '用户名',
      uid: '用户标识符',
      apiProject: ApiProject(
        id: 'projectId',
        api: 'apiKey'
      )
    );
  }
);

更改Tribally视图中的用户时,再次调用setConfiguration方法,并传递新的数据。


Advance use

如果你想要实现自定义颜色方案,可以使用Flutter颜色来创建Tribally。

// 主要颜色
final Color? primary;

// 背景颜色
final Color? background;

// 表面颜色(帖子背景)
final Color? surface;

// onSurface 颜色(投票背景)
final Color? onSurface;

// 文本颜色
final Color? text;

// 子文本颜色
final Color? subText;

// 图标颜色(可选)
final Color? icon;

// 暗模式的主要颜色(可选)
final Color? primaryDark;

Implementing Push Notifications

请参阅如何在您的应用中实现推送通知。此插件允许你设置用户的推送令牌在Tribally中。

onTriballyCreated: (TriballyController controller) {
  controller.setPushToken('推送令牌');
},

不要忘记在iOS通知部分添加.p12证书。


注意事项

  • 确保将上述代码中的projectId替换为你的Tribally projectId,将apiKey替换为你的apiKey
  • 由于Tribally支持添加照片,请在你的.plist文件中添加Camera Usage DescriptionPhoto Library Usage Description

问题 如有任何问题,请提交到这里:GitHub Issues


示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: TriballyView(
          primary: Colors.green,
          onSurface: Colors.orangeAccent.withOpacity(0.8),
          text: Colors.blueGrey,
          background: Colors.white12,
          onTriballyCreated: (controller) {
            // 添加推送通知
            controller.setPushToken('推送令牌');
            controller.setConfiguration(
              uid: 'YOUR_USER_TOKEN',
              displayName: 'YOUR_USERNAME',
              apiProject: ApiProject(
                api: 'YOUR_APIKEY',
                id: 'YOUR_PROJECT_ID',
              ),
              // 可选
              avatar: 'YOUR_USER_AVATAR_URL',
            );
          },
        ),
      ),
    );
  }
}

更多关于Flutter部落社交功能插件tribally_sdk的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter部落社交功能插件tribally_sdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter项目中使用tribally_sdk插件来实现部落社交功能的代码示例。这个示例将涵盖基本的初始化、用户登录、获取部落列表以及发布帖子等功能。

1. 添加依赖

首先,在你的pubspec.yaml文件中添加tribally_sdk的依赖:

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

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

2. 初始化SDK

在你的Flutter应用的入口文件(通常是main.dart)中初始化tribally_sdk

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化 Tribally SDK
  Tribally.initialize(
    apiKey: '你的API_KEY',  // 请替换为你的实际API Key
    onInitComplete: (success, message) {
      if (success) {
        print('SDK 初始化成功');
      } else {
        print('SDK 初始化失败: $message');
      }
    },
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tribally SDK Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

3. 用户登录

创建一个登录页面,允许用户输入凭据并进行登录:

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

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final _formKey = GlobalKey<FormState>();
  String _email = '';
  String _password = '';

  void _submit() async {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();
      
      // 用户登录
      await Tribally.user.login(
        email: _email,
        password: _password,
        onSuccess: (user) {
          print('登录成功: $user');
          // 导航到主页面
          Navigator.pushReplacement(
            context,
            MaterialPageRoute(builder: (context) => HomeScreen()),
          );
        },
        onError: (error) {
          print('登录失败: $error');
        },
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登录'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(labelText: 'Email'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入Email';
                  }
                  return null;
                },
                onSaved: (value) {
                  _email = value!;
                },
              ),
              TextFormField(
                decoration: InputDecoration(labelText: '密码'),
                obscureText: true,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入密码';
                  }
                  return null;
                },
                onSaved: (value) {
                  _password = value!;
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _submit,
                child: Text('登录'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

4. 获取部落列表

在主页面显示部落列表:

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  List<Tribal> _tribals = [];

  @override
  void initState() {
    super.initState();
    _fetchTribals();
  }

  void _fetchTribals() async {
    // 获取部落列表
    await Tribally.tribal.fetchTribals(
      onSuccess: (tribals) {
        setState(() {
          _tribals = tribals;
        });
      },
      onError: (error) {
        print('获取部落列表失败: $error');
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('部落列表'),
      ),
      body: _tribals.isEmpty
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: _tribals.length,
              itemBuilder: (context, index) {
                Tribal tribal = _tribals[index];
                return ListTile(
                  title: Text(tribal.name),
                  subtitle: Text(tribal.description),
                );
              },
            ),
    );
  }
}

5. 发布帖子

添加一个发布帖子的功能:

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

class PostScreen extends StatefulWidget {
  final Tribal tribal;

  PostScreen({required this.tribal});

  @override
  _PostScreenState createState() => _PostScreenState();
}

class _PostScreenState extends State<PostScreen> {
  final _formKey = GlobalKey<FormState>();
  String _content = '';

  void _submit() async {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();
      
      // 发布帖子
      await Tribally.post.createPost(
        tribalId: widget.tribal.id,
        content: _content,
        onSuccess: (post) {
          print('帖子发布成功: $post');
          // 返回上一页或刷新列表
          Navigator.pop(context);
        },
        onError: (error) {
          print('帖子发布失败: $error');
        },
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('发布帖子 - ${widget.tribal.name}'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(labelText: '内容'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入内容';
                  }
                  return null;
                },
                onSaved: (value) {
                  _content = value!;
                },
                maxLines: 5,
                expands: true,
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _submit,
                child: Text('发布'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

总结

以上代码展示了如何在Flutter项目中使用tribally_sdk插件实现基本的部落社交功能,包括初始化SDK、用户登录、获取部落列表以及发布帖子。你可以根据实际需求进一步扩展和完善这些功能。请确保你已经正确配置了API Key,并且已经按照tribally_sdk的官方文档处理了所有必要的权限和配置。

回到顶部