#2 Flutter UI of Send Chat Message Text Field (Flutter Series by Akshit Madan)

Hey there , in this blog , we are going to see how can you create this beautiful Message Send Text Field UI in Flutter .

Output would look like this

Step 1 — Initialise your App

Import the material.dart statement and define your app. Create a stateless widget and return a Material App , define your preferred theme and brightness. Remove the debug banner , define home as another stateful widget.

import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);
@override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.dark
      ),
      debugShowCheckedModeBanner: false,
      home: ChatMessageField(),
  );
  }
}

Step 2 — Create the body of the Message Send Text Field

Return a Scaffold which creates the roof or base of your app screen. Then return an app bar with a title as per you. Then in main body Container with some margin as shown to beautify your app. Return a row with expanded which helps to cover the entire available space by the widgets. Refer the below diagram to understand the widget tree.

class ChatMessageField extends StatefulWidget {
  ChatMessageField({Key key}) : super(key: key);
@override
  _ChatMessageFieldState createState() => _ChatMessageFieldState();
}
class _ChatMessageFieldState extends State<ChatMessageField> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
       appBar: AppBar(
         title: Text("Cool Flutter Blog"),
       ),

Now body will return a container that will contain our child widgets. If you understood the above widget tree then it would become very easy for you to code.

body:Container(
  margin: EdgeInsets.all(15.0),
  height: 61,
  child: Row(
    children: [
      Expanded(
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(35.0),
            boxShadow: [
              BoxShadow(
                  offset: Offset(0, 3),
                  blurRadius: 5,
                  color: Colors.grey)
            ],
          ),
          child: Row(
            children: [
              IconButton(
                  icon: Icon(Icons.face , color: Colors.blueAccent,), onPressed: () {}),
              Expanded(
                child: TextField(
                  decoration: InputDecoration(
                      hintText: "Type Something...",
                      hintStyle: TextStyle( color:     Colors.blueAccent),
                      border: InputBorder.none),
                ),
              ),
              IconButton(
                icon: Icon(Icons.photo_camera ,  color: Colors.blueAccent),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.attach_file ,  color: Colors.blueAccent),
                onPressed: () {},
              )
            ],
          ),
        ),
      ),
      SizedBox(width: 15),
      Container(
        padding: const EdgeInsets.all(15.0),
        decoration: BoxDecoration(
            color: Colors.blueAccent, shape: BoxShape.circle),
        child: InkWell(
          child: Icon(
            Icons.keyboard_voice,
            color: Colors.white,
          ),
          onLongPress: () {
          },
        ),
      )
    ],
  ),
) ,
    );
  }
}

You may have a doubt , why I used Inkwell , I could use Gesture Detector also but Inkwell provides much better touch effects when the container is pressed.

Thank You for reading the article , Stay tuned for more content !!