A flutter/dart package that allows developer to develop shiSock client for there application.

Last update: Apr 7, 2022

A package which allow developers to develop the shiSock client for the there flutter android app. Using flutter-shiSock developers can develop a chat application very easily. It can also be used in app in which we need real time data flow.

Features

It is easy to settup.

It can be used for different kinds of applications like chat, weather forecast, etc.

shiSock Engine has very low letency while handling millions of concurrent users.

Getting started

Run these command according to your environment.

With Dart:

$ dart pub add flutter_shisock

With Flutter:

Run this command in temrinal from the root of your project

$ flutter pub add flutter_shiSock

OR:

You can also directly add this line into you project's pubspec.yml file in dependencies section

    dependencies:
        flutter_shiSock: ^1.0.0

Usage

A example minimilistic chat application.

In this example, in case you shiSock Engine and server is running in localhost then localhost for android emulator would be 10.0.2.2. Our in case shiSock Engine is running in cloud then you have to provide the public ip of device on which the Engine is running.

createState() => _MyHomePageState(); } // A simple UI class. class _MyHomePageState extends State { final myController = TextEditingController(); List> msg = []; void listener() { widget.shiSock.listen("main", (data, sender) { setState(() { msg.add(data); }); }); } @override Widget build(BuildContext context) { listener(); return Scaffold( appBar: AppBar( title: const Text("shiSock Test"), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Expanded( flex: 9, child: ListView.builder( itemCount: msg.length, padding: const EdgeInsets.only(top: 10, bottom: 10), physics: const BouncingScrollPhysics(), itemBuilder: (context, index) { String data = msg[index]["data"] ?? ""; String dt = msg[index]["datetime"] ?? ""; String datetime = dt.substring(0, 19); return Container( decoration: const BoxDecoration( color: Color.fromARGB(255, 211, 220, 215), borderRadius: BorderRadius.all(Radius.circular(20))), margin: const EdgeInsets.only( top: 2.5, bottom: 2.5, left: 5, right: 5), child: ListTile( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10), ), title: Text(data), trailing: Text(datetime, style: const TextStyle( fontSize: 12, color: Color.fromARGB(255, 192, 48, 217))), textColor: const Color.fromARGB(255, 227, 154, 7), ), ); }, ), ), Expanded( flex: 1, child: Row( children: [ const SizedBox( width: 4, ), Expanded( flex: 1, child: FloatingActionButton( onPressed: () { // ignore: avoid_print print("Left Button"); }, child: const Icon(Icons.emoji_emotions_rounded))), const SizedBox( width: 4, ), Expanded( flex: 8, child: TextField( controller: myController, decoration: const InputDecoration( border: OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(20.0))), ), ), ), const SizedBox( width: 4, ), Expanded( flex: 1, child: FloatingActionButton( onPressed: () { widget.shiSock.send("main", myController.text); myController.clear(); }, tooltip: 'send the content of text field to the server', child: const Icon(Icons.send), ), ), const SizedBox( width: 4, ), ], ), ), ], ), ), ); } }">
import 'package:flutter/material.dart';
import 'package:shisock_flutter/shisock_flutter.dart';

// main function or the starting point
void main() {
  runApp(MyApp());
}


// The main class for the flutter application and it is the root 
// of you application.
class MyApp extends StatelessWidget {

  // The declaration and initialisation of the shiSockClient object.
  ShiSockClient client = ShiSockClient();

  // If running on Android Emulator, 10.0.2.2 will the localhost
  String address = "10.0.2.2";
  int port = 8080;

  // shiSockListener object which will be used later in the application,
  // that's why it declared using late keyword.
  late ShiSockListener shiSock;

  // The construction of class. It is used to initialise the shiSock variable.
  MyApp({Key? key}) : super(key: key) {

    // Initialisation of shiSock variable using client' connect function.
    // connect function return a shiSockListener object.
    shiSock = client.connect(address, port);
  }

  // Root build function of the application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(shiSock: shiSock),
    );
  }
}

// A stateful widget class becouse there will the changes in the application UI
// on the fly.
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.shiSock}) : super(key: key);
  final ShiSockListener shiSock;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

// A simple UI class.
class _MyHomePageState extends State<MyHomePage> {
  final myController = TextEditingController();
  List<Map<String, String>> msg = [];
  void listener() {
    widget.shiSock.listen("main", (data, sender) {
      setState(() {
        msg.add(data);
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    listener();
    return Scaffold(
      appBar: AppBar(
        title: const Text("shiSock Test"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              flex: 9,
              child: ListView.builder(
                itemCount: msg.length,
                padding: const EdgeInsets.only(top: 10, bottom: 10),
                physics: const BouncingScrollPhysics(),
                itemBuilder: (context, index) {
                  String data = msg[index]["data"] ?? "";
                  String dt = msg[index]["datetime"] ?? "";
                  String datetime = dt.substring(0, 19);
                  return Container(
                    decoration: const BoxDecoration(
                        color: Color.fromARGB(255, 211, 220, 215),
                        borderRadius: BorderRadius.all(Radius.circular(20))),
                    margin: const EdgeInsets.only(
                        top: 2.5, bottom: 2.5, left: 5, right: 5),
                    child: ListTile(
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10),
                      ),
                      title: Text(data),
                      trailing: Text(datetime,
                          style: const TextStyle(
                              fontSize: 12,
                              color: Color.fromARGB(255, 192, 48, 217))),
                      textColor: const Color.fromARGB(255, 227, 154, 7),
                    ),
                  );
                },
              ),
            ),
            Expanded(
              flex: 1,
              child: Row(
                children: [
                  const SizedBox(
                    width: 4,
                  ),
                  Expanded(
                      flex: 1,
                      child: FloatingActionButton(
                          onPressed: () {
                            // ignore: avoid_print
                            print("Left Button");
                          },
                          child: const Icon(Icons.emoji_emotions_rounded))),
                  const SizedBox(
                    width: 4,
                  ),
                  Expanded(
                    flex: 8,
                    child: TextField(
                      controller: myController,
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(
                            borderRadius:
                                BorderRadius.all(Radius.circular(20.0))),
                      ),
                    ),
                  ),
                  const SizedBox(
                    width: 4,
                  ),
                  Expanded(
                    flex: 1,
                    child: FloatingActionButton(
                      onPressed: () {
                        widget.shiSock.send("main", myController.text);
                        myController.clear();
                      },
                      tooltip: 'send the content of text field to the server',
                      child: const Icon(Icons.send),
                    ),
                  ),
                  const SizedBox(
                    width: 4,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Additional information

If you need more information then take a look at the shiSock website: https:shisock.live/flutter_shisock

If someone wants to contribute to this project then you are very welcome.

If you have any issue/bug with this project then file a issue in the official github repo.

And if anybody wants my help then reach out to me on these social plateforms:

LinkdeIN Instagram Gmail

GitHub

https://github.com/shiSock/flutter_shiSock
You might also like...

Dart and Flutter sealed class generator and annotations, with match methods and other utilities. There is also super_enum compatible API.

Dart Sealed Class Generator Generate sealed class hierarchy for Dart and Flutter. Features Generate sealed class with abstract super type and data sub

Jun 14, 2022

A GraphQL client for Flutter, bringing all the features from a modern GraphQL client to one easy to use package. Built after react apollo

Flutter GraphQL Table of Contents Flutter GraphQL Table of Contents About this project Installation Usage GraphQL Provider [Graphql Link and Headers]

Jul 22, 2021

A GraphQL client for Flutter, bringing all the features from a modern GraphQL client to one easy to use package.

A GraphQL client for Flutter, bringing all the features from a modern GraphQL client to one easy to use package.

GraphQL Flutter 📌 Bulletin See the v3 - v4 Migration Guide if you're still on v3. Maintenance status: Low. Follow #762 for updates on the planned ar

Jun 24, 2022

A lightweight and customizable http client that allows you to create offline-first dart app easily.

Enjoyable & customizable offline-first REST API client Unruffled is lightweight and customizable http client that allows you to create offline-first e

May 20, 2022

Some UI mostly use when develop Flutter app

Some UI mostly use when develop Flutter app

Demo Flutter - Some common UI in Flutter App include Hero Animation Screen - How to play with hero widget. Simple Animation Screen - Some simple anima

Jan 28, 2022

A Flutter Enterprise Software Development Architecture. Start to develop your bigger app easily.

A Flutter Enterprise Software Development Architecture. Start to develop your bigger app easily.

Jun 25, 2022

Magpie is a visualized platform which designed to create, develop and compile your standalone flutter module.

Magpie is a visualized platform which designed to create, develop and compile your standalone flutter module.

Magpie Workflow is a visualized platform which is designed to create, develop and compile your standalone flutter module;

Feb 11, 2022

Trying to develop an open source social media app

Social Media App (नाम में क्या रखा है :P) Getting Started To run this Project you'll need an account on the Supbase. After creating an account run bel

May 6, 2022

TRTCFlutterDemo - With TRTC, you can quickly develop cost-effective, low-latency, and high-quality interactive audio/video services

TRTCFlutterDemo - With TRTC, you can quickly develop cost-effective, low-latency, and high-quality interactive audio/video services

This document describes how to quickly run the TRTC demo for Flutter. Environmen

Feb 10, 2022

Related

Portfolio - Developer Portfolio Application With Flutter
Portfolio - Developer Portfolio Application With Flutter

My Portfolio This is my developer portfolio application! Preview of the Applicat

Jun 16, 2022
Udemy Course "Dart and Flutter: The Complete Developer's Guide" Project. (With Hive DB)

Udemy-Course-Flutter Udemy Course "Dart and Flutter: The Complete Developer's Guide" Project. (With Hive DB) The course: https://www.udemy.com/course/

Jun 11, 2022
Software Developer Portfolio Template built using Dart, Flutter web

Dev Portfolio Software Developer Portfolio Template that helps you showcase your work and skills as a software developer. A lightweight, customizable

Jun 1, 2022
Readky is a Free Flutter News App Starter Template that can help you develop a News application much faster.
Readky is a Free Flutter News App Starter Template that can help you develop a News application much faster.

Readky. Introduction Readky is a Free Flutter News App Starter Template that can help you develop a News application much faster. You just need to add

Jun 22, 2022
Hungry is a Free Flutter Recipe App Starter Template that can help you develop a Recipe application much faster.
Hungry is a Free Flutter Recipe App Starter Template that can help you develop a Recipe application much faster.

Hungry is a Free Flutter Recipe App Starter Template that can help you develop a Recipe application much faster. You just need to add some adjustment to the frontend and you can create your own backend.

Jun 17, 2022
Flutter package for prompting users to upgrade when there is a newer version of the app in the store.
Flutter package for prompting users to upgrade when there is a newer version of the app in the store.

Upgrader Flutter package for prompting users to upgrade when there is a newer version of the app in the store. When a newer app version is availabe in

Jun 22, 2022
Today we will show you how you can create your developer portfolio website and app using flutter.
Today we will show you how you can create your developer portfolio website and app using flutter.

Responsive and Animated Portfolio Website & App - Flutter UI Live Preview Watch it on YouTube Packages we are using: flutter_svg: link goole_fonts: li

Jun 18, 2022
Dicoding Flutter Developer Expert - Codemagic

triangle_app A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if

Jan 21, 2022
DEVS: Developer Board and Jobs Listing | For Developers, By Developers
DEVS: Developer Board and Jobs Listing | For Developers, By Developers

devs Setup Currently, this DEVS project is using the master channel of the Flutter SDK. TODO: Migrate to beta Clone the project git clone https://gith

Apr 16, 2022