Send Chat Message Text Field  in Flutter

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

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"), ), 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: () { }, ), ) ], ), ) , ); } }