whatsapp_field 1.0.9

whatsapp_field: ^1.0.9 copied to clipboard

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:whatsapp_field/model/attachment_model.dart';
import 'package:whatsapp_field/whatsapp_text_field.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: ChatExample(),
      ),
    );
  }
}

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

  @override
  State<ChatExample> createState() => _ChatExampleState();
}

class _ChatExampleState extends State<ChatExample> {
  final TextEditingController _controller = TextEditingController();

  final List<Map<String, dynamic>> _messages = [
    {'text': 'Hey! How are you?', 'isMe': false, 'time': '10:00 AM'},
    {'text': 'I’m good, how about you?', 'isMe': true, 'time': '10:01 AM'},
    {'text': 'Doing great! Busy with work.', 'isMe': false, 'time': '10:02 AM'},
    {'text': 'Same here 😅', 'isMe': true, 'time': '10:03 AM'},
    {'text': 'Let’s catch up this weekend.', 'isMe': false, 'time': '10:04 AM'},
    {'text': 'Sure! Looking forward to it 👍', 'isMe': true, 'time': '10:05 AM'},
  ];

  void _sendMessage(String message) {
    if (message.trim().isEmpty) return;
    setState(() {
      _messages.add({
        'text': message.trim(),
        'isMe': true,
        'time': TimeOfDay.now().format(context),
      });
      _controller.clear();
    });
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Column(
        children: [
          header(),
          Expanded(
            child: ListView.builder(
              padding: const EdgeInsets.all(12),
              reverse: false,
              itemCount: _messages.length,
              itemBuilder: (context, index) {
                final msg = _messages[index];
                return Align(
                  alignment: msg['isMe'] ? Alignment.centerRight : Alignment.centerLeft,
                  child: Container(
                    margin: const EdgeInsets.symmetric(vertical: 4),
                    padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                    constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.75),
                    decoration: BoxDecoration(
                      color: msg['isMe'] ? Colors.green[100] : Colors.grey[200],
                      borderRadius: BorderRadius.only(
                        topLeft: const Radius.circular(12),
                        topRight: const Radius.circular(12),
                        bottomLeft: Radius.circular(msg['isMe'] ? 12 : 0),
                        bottomRight: Radius.circular(msg['isMe'] ? 0 : 12),
                      ),
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          msg['text'],
                          style: const TextStyle(fontSize: 16),
                        ),
                        const SizedBox(height: 4),
                        Align(
                          alignment: Alignment.bottomRight,
                          child: Text(
                            msg['time'],
                            style: const TextStyle(fontSize: 10, color: Colors.grey),
                          ),
                        )
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
          WhatsAppTextField(
            controller: _controller,
            hintText: "Type something...",
            sendIcon: Icons.send,
            sendButtonColor: Colors.green,
            emojiIcon: Icons.insert_emoticon,
            attachmentIcon: Icons.attach_file,
            showEmogyIcon: true,
            showAttachmentIcon: true,
            maxLines: 1,
            autoFocus: false,
            readOnly: false,
            enabled: true,
            onSendTap: () => _sendMessage(_controller.text),
            onChanged: (value) {},
            attachmentConfig: AttachmentConfig(
              showCamera: true,
              showGallery: true,
              showAudio: true,
              showDoc: true,
              showContact: true,
              onCameraFilesPicked: (p0) {},
              onGalleryFilesPicked: (p0) {},
              onAudioFilesPicked: (p0) {},
              onDocFilerPicked: (p0) {},
              onContactPicked: (p0) {},
            ),
          )
        ],
      ),
    );
  }

  Widget header() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      color: Colors.green,
      child: Row(
        children: [
          const Icon(Icons.arrow_back, color: Colors.white),
          const SizedBox(width: 10),
          const CircleAvatar(
            radius: 20,
            backgroundImage: NetworkImage("https://i.pravatar.cc/150?img=3"), // Dummy avatar
          ),
          const SizedBox(width: 10),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: const [
              Text(
                "Meet Mevada",
                style: TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.bold),
              ),
              Text(
                "Online",
                style: TextStyle(color: Colors.white70, fontSize: 12),
              ),
            ],
          ),
          const Spacer(),
          const Icon(Icons.more_vert, color: Colors.white),
        ],
      ),
    );
  }
}