whatsapp_chat_sdk 1.0.1

Flutter UI SDK for WhatsApp-style chat — embed chat list, threads, bubbles, emoji & attachments in your app. UI only, no backend.

example/lib/main.dart

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

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

/// Your app — SDK widgets are embedded, not a clone WhatsApp app.
class MyApp extends StatefulWidget {
  const MyApp({super.key});

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

class _MyAppState extends State<MyApp> {
  late final WhatsAppChatController _chatController;
  bool _isDark = false;
  int _tabIndex = 0;

  @override
  void initState() {
    super.initState();
    _chatController = WhatsAppChatController(
      currentUserId: WhatsAppDemoData.currentUserId,
      conversations: WhatsAppDemoData.conversations(),
      messagesByChatId: WhatsAppDemoData.messagesByChat(),
    );
  }

  @override
  void dispose() {
    _chatController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final chatTheme = _isDark ? WhatsAppTheme.dark() : WhatsAppTheme.light();

    return MaterialApp(
      title: 'My App',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(_tabIndex == 0 ? 'My App — Messages' : 'Settings'),
          actions: [
            IconButton(
              tooltip: 'Chat theme',
              onPressed: () => setState(() => _isDark = !_isDark),
              icon: Icon(_isDark ? Icons.light_mode : Icons.dark_mode),
            ),
          ],
        ),
        body: _tabIndex == 0
            ? WhatsAppChatSdk(
                controller: _chatController,
                currentUserId: WhatsAppDemoData.currentUserId,
                theme: chatTheme,
              )
            : Center(
                child: Text(
                  'Your settings, profile, shop, etc.\nSDK only provides chat UI.',
                  textAlign: TextAlign.center,
                  style: Theme.of(context).textTheme.bodyLarge,
                ),
              ),
        bottomNavigationBar: NavigationBar(
          selectedIndex: _tabIndex,
          onDestinationSelected: (i) => setState(() => _tabIndex = i),
          destinations: const [
            NavigationDestination(
              icon: Icon(Icons.chat_bubble_outline),
              label: 'Messages',
            ),
            NavigationDestination(
              icon: Icon(Icons.settings_outlined),
              label: 'Settings',
            ),
          ],
        ),
        floatingActionButton: _tabIndex == 0
            ? FloatingActionButton(
                onPressed: () {},
                child: const Icon(Icons.edit),
              )
            : null,
      ),
    );
  }
}