TextField Material UI for Flutter CHAT Message App

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.

2. Creating void main runApp() method and here we would call MyApp class.

3. Creating our main MyApp extends StatelessWidget class.

4. Creating 4 functions named as callEmoji(), callAttachFile(), callCamera() and callVoice(). We would call these functions on Icon press event.

5. Creating a custom Icon widget named as moodIcon. We would use this widget to print Smiley icon.

6. Creating another widget attachFile to print Attach icon.

7. Creating another widget named as camera to print camera icon.

8. Creating one more widget voiceIcon to print voice record icon on screen.

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.

10. Complete source code for main.dart file :-

Screenshots :-

Leave a Reply

Your email address will not be published.