Master Flutter Design: Creating an Interactive Chat Message Screen | UI/UX Tutorial Episode [9]

Key Topics covered:

• Create and Design MessageScreen
• Add routing from Friends Page
• Add MessageRoute in AppRouter.dart

Description:

Welcome to my Flutter tutorial series, where I'll guide you through the process of designing a beautiful and interactive chat message screen using Flutter. In this step-by-step tutorial, we'll explore various Flutter widgets and techniques to create a sleek and user-friendly chat interface.

Whether you're a beginner or an experienced Flutter developer, this tutorial is perfect for you. I'll cover essential topics such as layout design, custom widgets, animations, and handling user interactions to make your chat screen truly engaging.

Code Snippet(MessageScreen.dart):

• lib/pages/dashboard/chat/MessageScreen.dart

Create a MessageScreen with 3 fields displayName, friendUserId and myUserId We will listen to the messages for (friendUserId and myUserId)

import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

@RoutePage()
class MessageScreen extends ConsumerWidget{

  String displayName;
  String myUserId;
  String friendUserId;

  TextEditingController _messageController = TextEditingController();
  MessageScreen({required this.displayName, required this.myUserId, required this.friendUserId});

  @override
  Widget build(BuildContext context, WidgetRef ref) {

    return Scaffold(
      appBar: AppBar(title: Text(displayName),),

      body: Form(

        child: Column(
          children: [
            Flexible(child: Container()),
          chatInputWidget()
          ],
        ),
      ),
    );
  }

  chatInputWidget() {

    return Container(
      height: 55.0,
      margin: EdgeInsets.symmetric(horizontal: 8),
      child: Row(
        children: [
          Container(
            margin: EdgeInsets.symmetric(horizontal: 4),
            child: IconButton(
              splashColor: Colors.white,
              icon: Icon(Icons.camera_alt,color: Colors.black,), onPressed: () {
                pickImage();
            },
            ),
          ),
          Flexible(child: TextFormField(
            validator: (value) {
              if(value?.isEmpty == true){

                return "Please enter a message";
              }
            },
            controller: _messageController,
            decoration: InputDecoration(
              hintText: "Enter Message",
              labelText: "Message",
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(5)
              )
            ),
            onFieldSubmitted: (value) {
              _messageController.text = value;
            },
          )),

          Container(
            margin: const EdgeInsets.symmetric(horizontal: 4),
            child: IconButton(
              splashColor: Colors.white,
              icon: const Icon(Icons.send,color: Colors.black,),
              onPressed: () {
              sendMessage("TEXT",_messageController.text);
            },
            ),
          ),
        ],
      ),
    );
  }

  void pickImage() {}

  void sendMessage(String type, String message) {}

}
        
        

Don't forget to run the following command in your terminal to generate MessageScreen route flutter packages pub run build_runner build

Code Snippet(FriendsListScreen.dart) modification:

• lib/pages/dashboard/friends/FriendsListScreen.dart

Add route to MessageScreen on ListTile(tap:(){})

FriendContact friend = friends[index];
String userId =  await LocalStorageService.getString(LocalStorageService.userId) ?? "";
AutoRouter.of(context).push(MessageRoute(displayName: friend.displayName ?? "",myUserId:userId,friendUserId:friend.mobileNumber ?? ""));

Code Snippet (AppRouter.dart):

• lib/route/app_route/AppRouter.dart

Add MessageRoute.page in routes array

 List<AutoRoute> get routes=>[
  ...
  AutoRoute(page: MessageRoute.page),
  ];
        
        

Conclusion:

We managed to design the Message screen and added a route to it from FriendPage. Don't forget to share and join our Discord Channel. May you please subscribe to our YouTube Channel. Let's continue sending a message in the next tutorial.