whelp_flutter_sdk 0.2.2

Whelp Live Chat SDK for Flutter Android and iOS projects

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:whelp_flutter_sdk/whelp_flutter_sdk.dart';

const whelpColor = Color(0xff194856);

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

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late final TextEditingController _appIdController;
  late final TextEditingController _apiKeyController;
  late final TextEditingController _deviceIdController;
  late final TextEditingController _fullNameController;
  late final TextEditingController _phoneNumberController;
  late final TextEditingController _languageController;
  late final TextEditingController _emailController;
  late final IdentityIdentifier _identifier;

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

    _appIdController = TextEditingController(
      text: '828317669d8ffba03df286a51f7866ee',
    );
    _apiKeyController = TextEditingController(
      text: '347675776479e65f2db4c',
    );
    _deviceIdController = TextEditingController(
      text: '1234567890',
    );
    _fullNameController = TextEditingController(
      text: 'John Doe',
    );
    _phoneNumberController = TextEditingController(
      text: '[phone]',
    );
    _languageController = TextEditingController(
      text: 'EN',
    );
    _emailController = TextEditingController(
      text: '[e-mail]',
    );
    _identifier = IdentityIdentifier.email;
  }

  @override
  void dispose() {
    _appIdController.dispose();
    _apiKeyController.dispose();
    _deviceIdController.dispose();
    _fullNameController.dispose();
    _phoneNumberController.dispose();
    _languageController.dispose();
    _emailController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: whelpColor,
      appBar: AppBar(
        backgroundColor: whelpColor,
        centerTitle: true,
        title: Image.network(
          'https://whelp.co/blog/content/images/2023/01/Untitled-design-2-.png',
          height: 24.0,
        ),
      ),
      body: Container(
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(24.0),
            topRight: Radius.circular(24.0),
          ),
        ),
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextField(
                controller: _appIdController,
                decoration: const InputDecoration(
                  labelText: 'App ID',
                ),
              ),
              const SizedBox(height: 16.0),
              TextField(
                controller: _apiKeyController,
                decoration: const InputDecoration(
                  labelText: 'API Key',
                ),
              ),
              const SizedBox(height: 16.0),
              TextField(
                controller: _deviceIdController,
                decoration: const InputDecoration(
                  labelText: 'Device ID',
                ),
              ),
              const SizedBox(height: 16.0),
              TextField(
                controller: _fullNameController,
                decoration: const InputDecoration(
                  labelText: 'Full Name',
                ),
              ),
              const SizedBox(height: 16.0),
              TextField(
                controller: _phoneNumberController,
                decoration: const InputDecoration(
                  labelText: 'Phone Number',
                ),
              ),
              const SizedBox(height: 16.0),
              TextField(
                controller: _languageController,
                decoration: const InputDecoration(
                  labelText: 'Language',
                ),
              ),
              const SizedBox(height: 16.0),
              TextField(
                controller: _emailController,
                decoration: const InputDecoration(
                  labelText: 'Email',
                ),
              ),
              const SizedBox(height: 16.0),
              DropdownButtonFormField<IdentityIdentifier>(
                value: IdentityIdentifier.email,
                onChanged: (value) {
                  setState(() {
                    _identifier = value!;
                  });
                },
                items: const [
                  DropdownMenuItem(
                    value: IdentityIdentifier.email,
                    child: Text('Email'),
                  ),
                  DropdownMenuItem(
                    value: IdentityIdentifier.phoneNumber,
                    child: Text('Phone'),
                  ),
                ],
              ),
              const SizedBox(height: 64.0),
              FilledButton.icon(
                onPressed: () {
                  final config = WhelpConfig(
                    appId: _appIdController.text,
                    apiKey: _apiKeyController.text,
                    deviceId: _deviceIdController.text,
                  );
                  final user = WhelpUser(
                    fullName: _fullNameController.text,
                    phoneNumber: _phoneNumberController.text,
                    language: _languageController.text,
                    email: _emailController.text,
                    identifier: _identifier,
                  );

                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (_) => WhelpPage(
                        config: config,
                        user: user,
                      ),
                    ),
                  );
                },
                label: const Text('Open Whelp'),
                icon: const Icon(Icons.open_in_new),
              ),
              const SizedBox(height: 64.0),
            ],
          ),
        ),
      ),
    );
  }
}

class WhelpPage extends StatelessWidget {
  const WhelpPage({super.key, required this.config, required this.user});

  final WhelpConfig config;
  final WhelpUser user;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: whelpColor,
      appBar: AppBar(
        backgroundColor: whelpColor,
        leading: const BackButton(
          color: Colors.white,
        ),
        centerTitle: true,
        title: Image.network(
          'https://whelp.co/blog/content/images/2023/01/Untitled-design-2-.png',
          height: 24.0,
        ),
      ),
      body: Container(
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(24.0),
            topRight: Radius.circular(24.0),
          ),
        ),
        child: ClipRRect(
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(24.0),
            topRight: Radius.circular(24.0),
          ),
          child: SafeArea(
            child: WhelpView(
              config: config,
              user: user,
            ),
          ),
        ),
      ),
    );
  }
}