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

Akshit Madan
2 min readAug 25, 2020

--

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 !!

--

--

Akshit Madan

Founder @Resumepal | Software Engineer | AI & LLMs | Flutter