Pensil Community official Flutter SDK. Build your own community experience using Dart and Flutter

Official flutter package for Pensil

The official Dart client for Pensil communities, a service for building communites applications.
This library can be used on any Dart project and on both mobile and web apps with Flutter.
You can create your own community from Pensil and use this package to create your customised flutter mobile web application.

? Installation

Install from pub.dev

Next step is to add pensil_community_flutter to your dependencies, to do that just open pubspec.yaml file and add it inside the dependencies section.

dependencies:
  flutter:
    sdk: flutter

  pensil_community_flutter: ^[latest-version]

? Usage

Client setup Serverside + Clientside

If you want to use the PensilClient on your web/mobile app you need a community id. usertoken is a google authentication uid which is a optional and can be added later.

Client API init

// 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>');

Configure rool level widget

Add PensilCommunityApp widget into your rool lavel widget and initialize its bloc with PensilBloc constructor and pass pensilClient in it.

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(),
    );
  }
}

How to authenticate a user

Currently pensil_community_flutter support google authentication only. To authenticate a user, pass google authentication token (uid) to package and it will return user data on successfull authentication other wise it will retun error message. Authentication works in such an way that user has no need to signup from any where. If user is a new on platform then authentication will create a new user and returns its profile data recieved from 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));
    */
  });
}

How to Open community detail page

final pensilClient = PensilProvider.of(context).bloc.client;
Navigator.pushReplacement(context, CommunityDetailPage.getRoute(pensilClient));

Community Detail page

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!),
              );
            },
          );
        },
      ),
    );
  }
}

How to display sections of a group

/// `group` is a selected group from groups list.
final communityClient = CommunityProvider.of(this).bloc.client;
Navigator.push(context,GroupDetailPage.getRoute(communityClient, group!));

Group Detail page

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!),
          );
        },
      ),
    );
  }
}

How to display section feed

Navigate to section feed.

  /// `section` is a selected section from sections list
 final groupClient = GroupProvider.of(context).bloc;
 Navigator.push(context,SectionfeedPage.getRoute(groupClient, section!));

Section feed

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);
        },
      ),
    );
  }
}

Docs

This package provides two types of components

UI components
Bussiness logic components

UI components

PensilCommunityApp: a root level widget which initilise the pensil client and pensil theme.
PensilCommunityBuilder: a widget designed to get community data to pass it to its children.
PensilGroupListView: a widget to render group list of a community.
PensilSectionListView: a widget to render section list of a group.
PensilSectionFeedBuilder: a widget designed to get section feed and pass it to its children.
PensilPostFeedListView: a widget to render post feed of a section.

Bussiness logic components

PensilBloc: handle root level operations.
PensilProvider: an Inherited widget providing access to PensilBloc in the widget tree.
CommunityBloc: handle community level operations.
CommunityProvider: an Inherited widget providing access to CommunityBloc in the widget tree.
GroupBloc: handle group level operations.
GroupProvider: an Inherited widget providing access to GroupBloc in the widget tree.
SectionBloc: handle section level operations.
SectionProvider: an Inherited widget providing access to SectionBloc in the widget tree.

Dart version requirements

This API Client project requires Dart v2.12 at a minimum.

Example Project

There is a detailed Flutter example project in the example folder. You can directly run and play with it.

GitHub

View Github