widgets_sdk_flutter 0.0.2

GliaWidgets SDK is a simple and customisable framework built on top of GliaSDK. It provides all the necessary UI components to quickly integrate GliaSDK into your project.

example/lib/main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:async';

import 'package:flutter/services.dart';
import 'package:widgets_sdk_flutter/GliaWidgetsSdk.dart';
import 'package:widgets_sdk_flutter/GliaWidgetsSdkPlatform.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _configurationError = '';
  final _sdk = GliaWidgetsSdk();

  @override
  void initState() {
    super.initState();
  }

  // Platform messages are asynchronous, so we initialize in an async method.
  Future<void> configure() async {
    String configurationError;
    // Platform messages may fail, so we use a try/catch PlatformException.
    // We also handle the message potentially returning null.
    try {
      await _sdk.configure(
          siteApiKeyId: apikeyIdTextController.value.text,
          siteApiKeySecret: apikeySecretTextController.value.text,
          siteId: siteIdTextController.value.text,
          queueId: queueIdTextController.value.text,
          region: regionTextController.value.text,
          config: remoteConfig);
      configurationError = '';
    } catch (err) {
      configurationError = 'Error $err';
    }

    // If the widget was removed from the tree while the asynchronous platform
    // message was in flight, we want to discard the reply rather than calling
    // setState to update our non-existent appearance.
    if (!mounted) return;

    setState(() {
      _configurationError = configurationError;
    });
  }

  Future<void> startChatEngagement() async {
    String configurationError = '';
    try {
      await _sdk.startEngagement(kind: EngagementKind.chat);
    } catch (err) {
      configurationError = 'Error $err';
    }
    if (!mounted) return;

    setState(() {
      _configurationError = configurationError;
    });
  }

  var apikeyIdTextController = TextEditingController(text: "");
  var apikeySecretTextController = TextEditingController(text: "");
  var siteIdTextController = TextEditingController(text: "");
  var queueIdTextController = TextEditingController(text: "");
  var regionTextController = TextEditingController(text: "");

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: const Text('Plugin example app'),
          ),
          body: Container(
            padding: const EdgeInsets.all(16),
            child: ListView(
              children: [
                Column(
                  children: [
                    TextField(
                      controller: apikeyIdTextController,
                      decoration: const InputDecoration(
                          hintText: "site api key id",
                          contentPadding: EdgeInsets.all(16)),
                    ),
                    TextField(
                      controller: apikeySecretTextController,
                      decoration: const InputDecoration(
                          hintText: "site api key secret",
                          contentPadding: EdgeInsets.all(16)),
                    ),
                    TextField(
                      controller: siteIdTextController,
                      decoration: const InputDecoration(
                          hintText: "site id",
                          contentPadding: EdgeInsets.all(16)),
                    ),
                    TextField(
                      controller: queueIdTextController,
                      decoration: const InputDecoration(
                          hintText: "queue id",
                          contentPadding: EdgeInsets.all(16)),
                    ),
                    TextField(
                      controller: regionTextController,
                      decoration: const InputDecoration(
                          hintText: "region id",
                          contentPadding: EdgeInsets.all(16)),
                    ),
                    Text(_configurationError),
                    CupertinoButton.filled(
                      onPressed: configure,
                      child: const Text("Configure"),
                    ),
                    const SizedBox(height: 16),
                    CupertinoButton.filled(
                      onPressed: startChatEngagement,
                      child: const Text("Start engagement"),
                    )
                  ],
                )
              ],
            ),
          )),
    );
  }
}

const remoteConfig = {
  "chatScreen": {
    "header": {
      "backButton": {
        "background": {
          "border": {
            "type": "fill",
            "value": ["#FFFFFF"]
          },
          "borderWidth": 2,
          "color": {
            "type": "fill",
            "value": ["#FFFFFF"]
          },
          "cornerRadius": 8
        },
        "shadow": {
          "color": {
            "type": "fill",
            "value": ["#FFFFFF"]
          },
          "offset": 0,
          "opacity": 1,
          "radius": 5
        },
        "text": {
          "alignment": "center",
          "background": {
            "type": "fill",
            "value": ["#FFFFFF"]
          },
          "font": {"size": 16, "style": "regular"},
          "foreground": {
            "type": "fill",
            "value": ["#FFFFFF"]
          }
        },
        "tintColor": {
          "type": "fill",
          "value": ["#000000"]
        }
      },
      "background": {
        "border": {
          "type": "fill",
          "value": ["#FFFFFF"]
        },
        "borderWidth": 2,
        "color": {
          "type": "fill",
          "value": ["#fdd42b"]
        },
        "cornerRadius": 8
      },
      "closeButton": {
        "background": {
          "border": {
            "type": "fill",
            "value": ["#FFFFFF"]
          },
          "borderWidth": 2,
          "color": {
            "type": "fill",
            "value": ["#FFFFFF"]
          },
          "cornerRadius": 8
        },
        "shadow": {
          "color": {
            "type": "fill",
            "value": ["#FFFFFF"]
          },
          "offset": 0,
          "opacity": 1,
          "radius": 5
        },
        "text": {
          "alignment": "center",
          "background": {
            "type": "fill",
            "value": ["#FFFFFF"]
          },
          "font": {"size": 24, "style": "regular"},
          "foreground": {
            "type": "fill",
            "value": ["#FFFFFF"]
          }
        },
        "tintColor": {
          "type": "fill",
          "value": ["#000000"]
        }
      },
      "endButton": {
        "background": {
          "border": {
            "type": "fill",
            "value": ["#FFFFFF"]
          },
          "borderWidth": 0,
          "color": {
            "type": "fill",
            "value": ["#04728c"]
          },
          "cornerRadius": 8
        },
        "shadow": {
          "color": {
            "type": "fill",
            "value": ["#FFFFFF"]
          },
          "offset": 0,
          "opacity": 1,
          "radius": 5
        },
        "text": {
          "alignment": "center",
          "background": {
            "type": "fill",
            "value": ["#FFFFFF"]
          },
          "font": {"size": 16, "style": "regular"},
          "foreground": {
            "type": "fill",
            "value": ["#FFFFFF"]
          }
        },
        "tintColor": {
          "type": "fill",
          "value": ["#2596be"]
        }
      },
      "endScreenSharingButton": {
        "background": {
          "border": {
            "type": "fill",
            "value": ["#FFFFFF"]
          },
          "borderWidth": 2,
          "color": {
            "type": "fill",
            "value": ["#FFFFFF"]
          },
          "cornerRadius": 8
        },
        "shadow": {
          "color": {
            "type": "fill",
            "value": ["#FFFFFF"]
          },
          "offset": 0,
          "opacity": 1,
          "radius": 5
        },
        "text": {
          "alignment": "center",
          "background": {
            "type": "fill",
            "value": ["#FFFFFF"]
          },
          "font": {"size": 16, "style": "regular"},
          "foreground": {
            "type": "fill",
            "value": ["#FFFFFF"]
          }
        },
        "tintColor": {
          "type": "fill",
          "value": ["#2596be"]
        }
      },
      "text": {
        "alignment": "center",
        "background": {
          "type": "fill",
          "value": ["#FFFFFF"]
        },
        "font": {"size": 24, "style": "bold"},
        "foreground": {
          "type": "fill",
          "value": ["#000000"]
        }
      }
    }
  }
};