Merge pull request #129 from Kommunicate-io/CM-2020

[CM-2020] Flutter Web Support Part - 1 (Development) | Flutter Web

README.md

@@ -13,7 +13,7 @@ Refer to the official docs here: https://docs.kommunicate.io/docs/flutter-instal
 ```
 dependencies:
  //other dependencies
- kommunicate_flutter: ^1.9.0
+ kommunicate_flutter: ^1.9.1
 ```
 
 2. Install the package as below:

example/android/app/build.gradle

@@ -34,7 +34,7 @@ android {
  defaultConfig {
  // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
  applicationId "io.kommunicate.app"
- minSdkVersion 16
+ minSdkVersion 19
  targetSdkVersion 33
  versionCode flutterVersionCode.toInteger()
  versionName flutterVersionName
@@ -59,6 +59,7 @@ dependencies {
  testImplementation 'junit:junit:4.12'
  androidTestImplementation 'com.android.support.test:runner:1.0.2'
  androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
+ implementation platform('com.google.firebase:firebase-bom:32.6.0')
 }
 
 apply plugin: 'com.google.gms.google-services'

example/android/build.gradle

@@ -25,6 +25,6 @@ subprojects {
  project.evaluationDependsOn(':app')
 }
 
-task clean(type: Delete) {
+tasks.register("clean", Delete) {
  delete rootProject.buildDir
 }

example/lib/home.dart

@@ -1,9 +1,9 @@
-import 'package:kommunicate_flutter_plugin_example/main.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
-
+import 'package:intl/intl.dart';
 import 'package:kommunicate_flutter/kommunicate_flutter.dart';
 import 'dart:io' show Platform;
-import 'package:intl/intl.dart';
+import 'main.dart';
 
 class HomePage extends StatefulWidget {
  @override
@@ -48,6 +48,8 @@ class HomePageWidget extends StatelessWidget {
  return "Android";
  } else if (Platform.isIOS) {
  return "iOS";
+ } else if (kIsWeb) {
+ return "Web";
  } else {
  return "NOP";
  }
@@ -70,7 +72,7 @@ class HomePageWidget extends StatelessWidget {
  }
  }
 
- String valueText;
+ String valueText = '';
  Future<void> _displayTextInputDialog(BuildContext context) async {
  return showDialog(
  context: context,
@@ -88,7 +90,7 @@ class HomePageWidget extends StatelessWidget {
  TextButton(
  style: TextButton.styleFrom(
  backgroundColor: Colors.red,
- primary: Colors.white,
+ foregroundColor: Colors.white,
  ),
  onPressed: () {
  Navigator.pop(context);
@@ -98,7 +100,7 @@ class HomePageWidget extends StatelessWidget {
  TextButton(
  style: TextButton.styleFrom(
  backgroundColor: Colors.green,
- primary: Colors.white,
+ foregroundColor: Colors.white,
  ),
  onPressed: () {
  fetchUserDetails(valueText);
@@ -111,16 +113,114 @@ class HomePageWidget extends StatelessWidget {
  });
  }
 
+String coversationIDValue = '';
+ Future<void> _displayConversationIDInputDialog(BuildContext context) async {
+ return showDialog(
+ context: context,
+ builder: (context) {
+ return AlertDialog(
+ title: Text('Enter Conversation ID'),
+ content: TextField(
+ onChanged: (value) {
+ coversationIDValue = value;
+ print(value);
+ },
+ decoration: InputDecoration(hintText: "Enter Conversation ID"),
+ ),
+ actions: <Widget>[
+ TextButton(
+ style: TextButton.styleFrom(
+ backgroundColor: Colors.red,
+ foregroundColor: Colors.white,
+ ),
+ onPressed: () {
+ Navigator.pop(context);
+ },
+ child: Text('CANCEL'),
+ ),
+ TextButton(
+ style: TextButton.styleFrom(
+ backgroundColor: Colors.green,
+ foregroundColor: Colors.white,
+ ),
+ onPressed: () {
+ KommunicateFlutterPlugin.openParticularConversation(coversationIDValue);
+ Navigator.pop(context);
+ },
+ child: Text('OK'),
+ ),
+ ],
+ );
+ });
+ }
+
+ String messageText = '';
+ Future<void> _displayMessageInputDialog(BuildContext context) async {
+ return showDialog(
+ context: context,
+ builder: (context) {
+ return AlertDialog(
+ title: Text('Enter Message and Conversation ID'),
+ content: SizedBox(
+ height: MediaQuery.of(context).size.height * 0.2, // Set the height to 30% of the screen height
+ child: SingleChildScrollView(
+ child: Column(
+ children: [
+ TextField(
+ onChanged: (value) {
+ coversationIDValue = value;
+ print(value);
+ },
+ decoration: InputDecoration(hintText: "Enter Conversation ID"),
+ ),
+ SizedBox(height: 10),
+ TextField(
+ onChanged: (value) {
+ messageText = value;
+ print(value);
+ },
+ decoration: InputDecoration(hintText: "Enter Message"),
+ ),
+ ],
+ ),
+ ),
+ ),
+ actions: <Widget>[
+ TextButton(
+ style: TextButton.styleFrom(
+ backgroundColor: Colors.red,
+ foregroundColor: Colors.white,
+ ),
+ onPressed: () {
+ Navigator.pop(context);
+ },
+ child: Text('CANCEL'),
+ ),
+ TextButton(
+ style: TextButton.styleFrom(
+ backgroundColor: Colors.green,
+ foregroundColor: Colors.white,
+ ),
+ onPressed: () {
+ KommunicateFlutterPlugin.sendMessage({
+ "channelID": "$coversationIDValue",
+ "message": "$messageText"
+ });
+ Navigator.pop(context);
+ },
+ child: Text('OK'),
+ ),
+ ],
+ );
+ },
+ );
+}
+
+
  @override
  Widget build(BuildContext context) {
- return Center(
- child: Container(
- padding: const EdgeInsets.all(36.0),
- child: Column(
- crossAxisAlignment: CrossAxisAlignment.center,
- mainAxisAlignment: MainAxisAlignment.center,
- children: <Widget>[
- new Material(
+ List<Widget> widgets = [
+ new Material(
  elevation: 5.0,
  borderRadius: BorderRadius.circular(30.0),
  color: Color(0xff5c5aa7),
@@ -142,8 +242,9 @@ class HomePageWidget extends StatelessWidget {
  color: Color(0xff5c5aa7),
  child: new MaterialButton(
  onPressed: () {
- KommunicateFlutterPlugin.openParticularConversation(
- '46286348');
+ // KommunicateFlutterPlugin.openParticularConversation(
+ // '46286348');
+ _displayConversationIDInputDialog(context);
  },
  minWidth: 400,
  padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
@@ -268,8 +369,125 @@ class HomePageWidget extends StatelessWidget {
  textAlign: TextAlign.center,
  style: style.copyWith(
  color: Colors.white, fontWeight: FontWeight.bold)),
- ))
- ],
+ )),
+ ];
+
+ if (kIsWeb) {
+ widgets.removeRange(widgets.length - 9, widgets.length - 1);
+ widgets.insert(
+ widgets.length - 1, // Insert before the logout button
+ new Material(
+ elevation: 5.0,
+ borderRadius: BorderRadius.circular(30.0),
+ color: Color(0xff5c5aa7),
+ child: new MaterialButton(
+ onPressed: () {
+ KommunicateFlutterPlugin.buildConversation({})
+ .then((result) {
+ print("Conversation builder success : " + result.toString());
+ }).catchError((error) {
+ print("Conversation builder error occurred : " + error.toString());
+ });
+ },
+ minWidth: 400,
+ padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
+ child: Text(
+ "Build Conversation",
+ textAlign: TextAlign.center,
+ style: TextStyle(fontFamily: 'Montserrat', fontSize: 20.0)
+ .copyWith(color: Colors.white, fontWeight: FontWeight.bold),
+ ),
+ ),
+ ),
+ );
+ widgets.insert(
+ widgets.length - 1,
+ SizedBox(height: 10),
+ );
+ widgets.insert(
+ widgets.length - 1, // Insert before the logout button
+ new Material(
+ elevation: 5.0,
+ borderRadius: BorderRadius.circular(30.0),
+ color: Color(0xff5c5aa7),
+ child: new MaterialButton(
+ onPressed: () {
+ _displayMessageInputDialog(context);
+ },
+ minWidth: 400,
+ padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
+ child: Text(
+ "Send Message",
+ textAlign: TextAlign.center,
+ style: TextStyle(fontFamily: 'Montserrat', fontSize: 20.0)
+ .copyWith(color: Colors.white, fontWeight: FontWeight.bold),
+ ),
+ ),
+ ),
+ );
+ widgets.insert(
+ widgets.length - 1,
+ SizedBox(height: 10),
+ );
+ widgets.insert(
+ widgets.length - 1, // Insert before the logout button
+ new Material(
+ elevation: 5.0,
+ borderRadius: BorderRadius.circular(30.0),
+ color: Color(0xff5c5aa7),
+ child: new MaterialButton(
+ onPressed: () {
+ KommunicateFlutterPlugin.isChatWidgetVisible(false);
+ },
+ minWidth: 400,
+ padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
+ child: Text(
+ "Hide Chat Widget",
+ textAlign: TextAlign.center,
+ style: TextStyle(fontFamily: 'Montserrat', fontSize: 20.0)
+ .copyWith(color: Colors.white, fontWeight: FontWeight.bold),
+ ),
+ ),
+ ),
+ );
+ widgets.insert(
+ widgets.length - 1,
+ SizedBox(height: 10),
+ );
+ widgets.insert(
+ widgets.length - 1, // Insert before the logout button
+ new Material(
+ elevation: 5.0,
+ borderRadius: BorderRadius.circular(30.0),
+ color: Color(0xff5c5aa7),
+ child: new MaterialButton(
+ onPressed: () {
+ KommunicateFlutterPlugin.isChatWidgetVisible(true);
+ },
+ minWidth: 400,
+ padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
+ child: Text(
+ "Show Widget",
+ textAlign: TextAlign.center,
+ style: TextStyle(fontFamily: 'Montserrat', fontSize: 20.0)
+ .copyWith(color: Colors.white, fontWeight: FontWeight.bold),
+ ),
+ ),
+ ),
+ );
+ widgets.insert(
+ widgets.length - 1,
+ SizedBox(height: 10),
+ );
+ }
+
+ return Center(
+ child: Container(
+ padding: const EdgeInsets.all(36.0),
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.center,
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: widgets,
  ),
  ),
  );

example/lib/main.dart

@@ -1,9 +1,12 @@
+import 'dart:io';
+
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
 import 'package:kommunicate_flutter/kommunicate_flutter.dart';
-import 'package:kommunicate_flutter_plugin_example/AppConfig.dart';
-import 'package:kommunicate_flutter_plugin_example/prechat.dart';
+import 'AppConfig.dart';
+import 'prechat.dart';
+import 'package:flutter/foundation.dart' show kIsWeb;
 
 import 'home.dart';
 
@@ -19,6 +22,7 @@ MethodChannel channel = MethodChannel('kommunicate_flutter');
 class _MyAppState extends State<MyApp> {
  @override
  void initState() {
+ if (kIsWeb == false) {
  channel.setMethodCallHandler((call){
  if(call.method == 'onPluginLaunch'){
  print(call.arguments);
@@ -35,9 +39,9 @@ class _MyAppState extends State<MyApp> {
  } else if(call.method == 'onMessageSent'){
  print(call.arguments);
  } 
-
- return null;
+ return Future.value(null);
  });
+ }
  super.initState();
  }
 
@@ -70,7 +74,8 @@ class LoginPage extends StatelessWidget {
  dynamic user = {
  'userId': userId.text,
  'password': password.text,
- 'appId': AppConfig.APP_ID
+ 'appId': AppConfig.APP_ID,
+ 'authenticationTypeId': 1
  };
 
  KommunicateFlutterPlugin.login(user).then((result) {
@@ -234,7 +239,7 @@ class LoginPage extends StatelessWidget {
  borderRadius: BorderRadius.circular(30.0),
  color: Color(0xff5c5aa7),
  child: new MaterialButton(
- onPressed: () {
+ onPressed: () async {
  buildConversationWithPreChat(context);
  },
  minWidth: 400,