官方Flutter包，用于 Pensil
Pensil社区的官方Dart客户端，一个用于构建社区应用的服务的。
此库可用于任何Dart项目，以及Flutter的移动和Web应用。
您可以从 Pensil 创建自己的社区，并使用此包创建定制化的Flutter移动Web应用程序。
? 安装
从 pub.dev 安装
下一步是将pensil_community_flutter添加到您的依赖项中，为此只需打开pubspec.yaml文件并在dependencies部分添加它。
dependencies:
flutter:
sdk: flutter
pensil_community_flutter: ^[latest-version]
? 用法
客户端设置 服务器端 + 客户端
如果您想在您的Web/移动应用中使用PensilClient，您需要一个社区ID。usertoken是Google身份验证的UID，它是可选的，可以在以后添加。
客户端API初始化
// Instantiate new client with a communityId and user token
// usertoken is a google authentication token(uid) received during google login.
final pensilClient = PensilClient(communityId: '<Community id>',usertoken: '<user token>');
配置根级别小部件
将PensilCommunityApp小部件添加到您的根级别小部件中，并使用PensilBloc构造函数初始化其bloc，并在其中传递pensilClient。
class MyApp extends StatelessWidget {
const MyApp({required this.pensilClient, Key? key}) : super(key: key);
final PensilClient pensilClient;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Community Demo',
builder: (context, child) {
return PensilCommunityApp(
bloc: PensilBloc(client: pensilClient),
child: child!,
);
},
home: const Login(),
);
}
}
如何认证用户
目前pensil_community_flutter仅支持Google身份验证。要认证用户，请将Google身份验证令牌（UID）传递给包，成功认证后它将返回用户数据，否则将返回错误消息。身份验证的工作方式是用户无需从任何地方注册。如果用户是平台上的新用户，则身份验证将创建一个新用户并返回从Google收到的其个人资料数据。
/// uid is authentication token recieved from google login
void loginWithGoogle(String uid) async {
final pensilClient = PensilProvider.of(context).bloc.client;
final response = await pensilClient.curentUser.loginWithGoogle(uid);
response.fold((error) {
/// Display error message when authentication failed
},
(user) {
print(user.name);
/*
// Display success message when login success
// Navigate to community detail
Navigator.pushReplacement(context, CommunityDetailPage.getRoute(pensilClient));
*/
});
}
如何打开社区详情页
final pensilClient = PensilProvider.of(context).bloc.client;
Navigator.pushReplacement(context, CommunityDetailPage.getRoute(pensilClient));
社区详情页
class CommunityDetailPage extends StatelessWidget {
const CommunityDetailPage({Key? key, this.communityId}) : super(key: key);
static Route<T> getRoute<T>(PensilClient pensilClient) {
return MaterialPageRoute(
builder: (_) {
return CommunityProvider(
bloc: CommunityBloc(pensilClient: pensilClient),
child: CommunityDetailPage(
communityId: pensilClient.communityId,
),
);
},
);
}
final String? communityId;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: PensilCommunityBuilder(
errorBuilder: (_, err) {
return Center(
child: Text(err.message),
);
},
builder: (_, Community? community) {
return PensilGroupListView(
communityId: communityId!,
onGroupTileTap: (group) {
Navigator.push(
context,
GroupDetailPage.getRoute(context.communityClient, group!),
);
},
);
},
),
);
}
}
如何显示群组的版块
/// `group` is a selected group from groups list.
final communityClient = CommunityProvider.of(this).bloc.client;
Navigator.push(context,GroupDetailPage.getRoute(communityClient, group!));
群组详情页
class GroupDetailPage extends StatelessWidget {
const GroupDetailPage({Key? key, required this.group}) : super(key: key);
/// Material Route page to open Group detail
static Route<T> getRoute<T>(CommunityClient communityClient, Group group) {
return MaterialPageRoute(
builder: (_) {
return GroupProvider(
bloc: GroupBloc(
communityClient: communityClient,
groupId: group.id!,
)..addAllSections(group.sections!),
child: GroupDetailPage(group: group),
);
},
);
}
final Group group;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(group.name!)),
body: PensilSectionListView(
groupId: group.id!,
onSectionTileTap: (section) {
final bloc = GroupProvider.of(context).bloc;
Navigator.push(
context,
SectionfeedPage.getRoute(bloc.client, section!),
);
},
),
);
}
}
如何显示版块动态
导航到版块动态。
/// `section` is a selected section from sections list
final groupClient = GroupProvider.of(context).bloc;
Navigator.push(context,SectionfeedPage.getRoute(groupClient, section!));
版块动态
class SectionfeedPage extends StatelessWidget {
const SectionfeedPage({Key? key, required this.section}) : super(key: key);
static Route<T> getRoute<T>(GroupClient groupClient, Section section) {
return MaterialPageRoute(
builder: (_) {
return SectionProvider(
bloc: SectionBloc(
groupClient: groupClient,
sectionId: section.id!,
type: section.sectionType),
child: SectionfeedPage(section: section),
);
},
);
}
final Section section;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(section.name!)),
body: PensilSectionFeedBuilder(
errorBuilder: (_, err) {
return Center(
child: Text(err.message),
);
},
builder: (BuildContext context, List<Post>? community) {
final id = SectionProvider.of(context).bloc.sectionId;
return PensilPostFeedListView(sectionId: id);
},
),
);
}
}
文档
此包提供两种类型的组件
- UI组件
- 业务逻辑组件
UI组件
- PensilCommunityApp：一个初始化pensil客户端和pensil主题的根级别小部件。
- PensilCommunityBuilder：一个旨在获取社区数据并将其传递给子项的小部件。
- PensilGroupListView：一个渲染社区群组列表的小部件。
- PensilSectionListView：一个渲染群组版块列表的小部件。
- PensilSectionFeedBuilder：一个旨在获取版块动态并将其传递给子项的小部件。
- PensilPostFeedListView：一个渲染版块帖子列表的小部件。
业务逻辑组件
- PensilBloc：处理根级别操作。
- PensilProvider：一个Inherited小部件，提供对小部件树中PensilBloc的访问。
- CommunityBloc：处理社区级别操作。
- CommunityProvider：一个Inherited小部件，提供对小部件树中CommunityBloc的访问。
- GroupBloc：处理群组级别操作。
- GroupProvider：一个Inherited小部件，提供对小部件树中GroupBloc的访问。
- SectionBloc：处理版块级别操作。
- SectionProvider：一个Inherited小部件，提供对小部件树中SectionBloc的访问。
Dart版本要求
此API客户端项目最低要求Dart v2.12。
示例项目
在example文件夹中有一个详细的Flutter示例项目。您可以直接运行并进行尝试。
