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

Overview

Official flutter package for Pensil

pub package Likes Popularity Pub points GitHub last commit Hits

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

  1. UI components
  2. Bussiness logic components

UI components

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

Bussiness logic components

  1. PensilBloc: handle root level operations.
  2. PensilProvider: an Inherited widget providing access to PensilBloc in the widget tree.
  3. CommunityBloc: handle community level operations.
  4. CommunityProvider: an Inherited widget providing access to CommunityBloc in the widget tree.
  5. GroupBloc: handle group level operations.
  6. GroupProvider: an Inherited widget providing access to GroupBloc in the widget tree.
  7. SectionBloc: handle section level operations.
  8. 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.

You might also like...

Showwcase is a professional network built for developers to connect, build community, and find new opportunities.

Showwcase Generated by the Very Good CLI ๐Ÿค– Showwcase is a professional network built for developers to connect, build community, and find new opportu

Jan 13, 2022

A Simple Todo app design in Flutter to keep track of your task on daily basis. Its build on BLoC Pattern. You can add a project, labels, and due-date to your task also you can sort your task on the basis of project, label, and dates

A Simple Todo app design in Flutter to keep track of your task on daily basis. Its build on BLoC Pattern. You can add a project, labels, and due-date to your task also you can sort your task on the basis of project, label, and dates

WhatTodo Life can feel overwhelming. But it doesnโ€™t have to. A Simple To-do app design in flutter to keep track of your task on daily basis. You can a

Jan 6, 2023

A package that lets you include a cool, nice looking and validated Password TextFormField in your app to enhance user experience. The package is fully & easily modifiable.

A package that lets you include a cool, nice looking and validated Password TextFormField in your app to enhance user experience. The package is fully & easily modifiable.

A package that lets you include a cool, nice looking and validated Password TextFormField in your app to enhance user experience. The package is fully

Jan 1, 2023

validate JSON against your own Blueprint ๐Ÿ‘‘๐Ÿงฌ

validate JSON against your own Blueprint ๐Ÿ‘‘๐Ÿงฌ

PART OF QUEEN ๐Ÿ‘‘ Validate JSON Against Your Own Blueprint ๐Ÿ‘‘ ๐Ÿงฌ Content Validate JSON Against Your Own Blueprint ๐Ÿ‘‘ ๐Ÿงฌ Content Motivation NOTE Feature

Oct 29, 2022

Enhancing your WhatsApp experience.

Enhancing your WhatsApp experience.

WhishApp Enhancing your WhatsApp experience. Chat with unknown Number Status Saver Represent a name using emoji's (Coming soon) Sticker chat (Coming s

Oct 16, 2022

Hybrid App build on flutter SDK able to run on Android, IOS, web, desktop

Hybrid App build on flutter SDK able to run on Android, IOS, web, desktop

Codeforces Visualizer APP Ready to use Flutter Application. Uses codeforces API. Useful for codeforces programmers. ScreenShots Single User Page Compa

Dec 31, 2022

The FlexGrid control provides a powerful and quickly way to display data in a tabular format. It is including that frozened column/row,loading more, high performance and better experience in TabBarView/PageView.

The FlexGrid control provides a powerful and quickly way to display data in a tabular format. It is including that frozened column/row,loading more, high performance and better experience in TabBarView/PageView.

flex_grid Language: English| ไธญๆ–‡็ฎ€ไฝ“ The FlexGrid control provides a powerful and quickly way to display data in a tabular format. It is including that f

Nov 8, 2022

This design has been created for educational purposes. Also this project has integrated push notifications with firebase and my own server in python.

This design has been created for educational purposes. Also this project has integrated push notifications with firebase and my own server in python.

Ui Clone of the Nequi application This design has been created for educational purposes. Also this project has integrated push notifications with fire

Nov 17, 2022

The application helps the patient to follow up on medication schedules, and each patient has his own profile. The application is connected to Bluetooth to help the patient's dependents follow up on the patient.

spoon_medicines A new Flutter application. Getting Started This project is a starting point for a Flutter application. A few resources to get you star

Nov 27, 2021
Comments
  • Add PostBuilder in pensil_community_flutter and fix some issues

    Add PostBuilder in pensil_community_flutter and fix some issues

    pensil_community_flutter

    • Add PostBuilder in PensilPostFeedListView to build customized post
    • Add onActionTrigger in PostFooterBuilder

    pensil_community_core

    • Fix Object/factory with type CommunityService is not registered inside GetIt. issue.
    opened by TheAlphamerc 0
Releases(0.1.2-pensil_community_flutter)
Owner
Pensil Inc
Open peer to peer learning platform
Pensil Inc
An open source encrypted peer-to-peer system. Own data, own privacy. (Rust+Flutter)

An open source encrypted peer-to-peer system. Own data, own privacy. (Rust+Flutter)

Cymple Tech 124 Oct 7, 2021
An open source encrypted peer-to-peer system. Own data, own privacy.

An open source encrypted peer-to-peer system. Own data, own privacy.

Cymple Tech 456 Jan 3, 2023
Encrypted peer-to-peer system for data security. Own data, own privacy

ESSE (Encrypted Symmetrical Session Engine) An open source encrypted peer-to-pee

CympleTech 455 Dec 26, 2022
The official sdk for the user-friendly API of Mega services on the Dart language.

megasdkdart The official sdk for the user-friendly API of Mega services in the Dart language. Example: import 'package:megasdkdart/megasdkdart.dart';

meg4cyberc4t 4 Mar 30, 2022
This is an official mobile app for community classroom

Community Classroom Mobile app This repository contains code for mobile app of community classroom. Architecture to be followed for each feature: We a

Community Classroom 60 Nov 20, 2022
Official plugin for using Thepeer SDK with flutter https://thepeer.co

Flutter Thepeer This package makes it easy to use the Thepeer in a flutter project. ?? Screen Shots ?? How to Use plugin ThePeer Send Launch ThepeerSe

The Peer 23 Dec 27, 2022
Official plugin for using Thepeer SDK with flutter https://thepeer.co

Flutter Thepeer This package makes it easy to use the Thepeer in a flutter project. ?? Screen Shots ?? How to Use plugin Adding MaterialSupport Add th

Thepeer 23 Dec 27, 2022
A discord bot, made with Dart, which lets you run your own pure Dart code snippets directly via a discord ping, and get the output in an instant.

A discord bot, made with Dart, which lets you run your own pure Dart code snippets directly via a discord ping, and get the output in an instant.

Anikate De 3 Oct 21, 2022
Official Flutter SDK for Khalti Payment systems

Khalti Payment Gateway for Flutter Use Khalti Payment Gateway solution in your app or website to simplify payment for your customers. You do not need

Khalti 16 Oct 13, 2022
Official sdk for vchat

V_Chat_SDK Micro service Check Our Full documention VCHAT DOCS Quick Review Android IOS Don't forget to see the example attached to github here V_CHAT

Hatem Ragab 42 Dec 17, 2022