Hello friends, In today’s tutorial we would learn about some UI basics of flutter. Today we would make TextField material UI for flutter chat message app. The UI contains 1 smiley icon, 1 TextField widget, 1 attach file icon, 1 camera icons and 1 Record voice button. We have seen the same UI in WhatsApp chat application. So let’s get started 🙂 .
Contents in this project TextField Material UI for Flutter CHAT Message App :-
1. Open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating void main runApp() method and here we would call MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main MyApp extends StatelessWidget class.
|
1 2 3 4 5 |
class MyApp extends StatelessWidget { } |
4. Creating 4 functions named as callEmoji(), callAttachFile(), callCamera() and callVoice(). We would call these functions on Icon press event.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
void callEmoji() { print('Emoji Icon Pressed...'); } void callAttachFile() { print('Attach File Icon Pressed...'); } void callCamera() { print('Camera Icon Pressed...'); } void callVoice() { print('Voice Icon Pressed...'); } |
5. Creating a custom Icon widget named as moodIcon. We would use this widget to print Smiley icon.
|
1 2 3 4 5 6 7 8 |
Widget moodIcon() { return IconButton( icon: const Icon( Icons.mood, color: Color(0xFF00BFA5), ), onPressed: () => callEmoji()); } |
6. Creating another widget attachFile to print Attach icon.
|
1 2 3 4 5 6 |
Widget attachFile() { return IconButton( icon: const Icon(Icons.attach_file, color: Color(0xFF00BFA5)), onPressed: () => callAttachFile(), ); } |
7. Creating another widget named as camera to print camera icon.
|
1 2 3 4 5 6 |
Widget camera() { return IconButton( icon: const Icon(Icons.photo_camera, color: Color(0xFF00BFA5)), onPressed: () => callCamera(), ); } |
8. Creating one more widget voiceIcon to print voice record icon on screen.
|
1 2 3 4 5 6 |
Widget voiceIcon() { return const Icon( Icons.keyboard_voice, color: Colors.white, ); } |
9. Creating Widget build area -> We would make Expanded widget -> Container widget and apply BoxDecoration on it to make the shadow effect on TextField widget. Now we would call each above widget one by one.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text("TextField UI for Flutter Chat App"), ), body: Container( margin: const EdgeInsets.all(12.0), height: 60, child: Row( children: [ Expanded( child: Container( decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(35.0), boxShadow: const [ BoxShadow( offset: Offset(0, 2), blurRadius: 7, color: Colors.grey) ], ), child: Row( children: [ moodIcon(), const Expanded( child: TextField( decoration: InputDecoration( hintText: "Message", hintStyle: TextStyle(color: Color(0xFF00BFA5)), border: InputBorder.none), ), ), attachFile(), camera(), ], ), ), ), const SizedBox(width: 15), Container( padding: const EdgeInsets.all(15.0), decoration: const BoxDecoration( color: Color(0xFF00BFA5), shape: BoxShape.circle), child: InkWell( child: voiceIcon(), onLongPress: () => callVoice(), ), ) ], ), )), ); } |
10. Complete source code for main.dart file :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { void callEmoji() { print('Emoji Icon Pressed...'); } void callAttachFile() { print('Attach File Icon Pressed...'); } void callCamera() { print('Camera Icon Pressed...'); } void callVoice() { print('Voice Icon Pressed...'); } Widget moodIcon() { return IconButton( icon: const Icon( Icons.mood, color: Color(0xFF00BFA5), ), onPressed: () => callEmoji()); } Widget attachFile() { return IconButton( icon: const Icon(Icons.attach_file, color: Color(0xFF00BFA5)), onPressed: () => callAttachFile(), ); } Widget camera() { return IconButton( icon: const Icon(Icons.photo_camera, color: Color(0xFF00BFA5)), onPressed: () => callCamera(), ); } Widget voiceIcon() { return const Icon( Icons.keyboard_voice, color: Colors.white, ); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text("TextField UI for Flutter Chat App"), ), body: Container( margin: const EdgeInsets.all(12.0), height: 60, child: Row( children: [ Expanded( child: Container( decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(35.0), boxShadow: const [ BoxShadow( offset: Offset(0, 2), blurRadius: 7, color: Colors.grey) ], ), child: Row( children: [ moodIcon(), const Expanded( child: TextField( decoration: InputDecoration( hintText: "Message", hintStyle: TextStyle(color: Color(0xFF00BFA5)), border: InputBorder.none), ), ), attachFile(), camera(), ], ), ), ), const SizedBox(width: 15), Container( padding: const EdgeInsets.all(15.0), decoration: const BoxDecoration( color: Color(0xFF00BFA5), shape: BoxShape.circle), child: InkWell( child: voiceIcon(), onLongPress: () => callVoice(), ), ) ], ), )), ); } } |
Screenshots :-
