Flutter Event hosted by Augustana College

1. Flutter: Basic Chat app! 💬
Christopher Le
GDSC Lead - Augustana College
/chrislevn
Build a chat app UI from scratch with
Flutter and Dart language

2. • Creating column, row widget
• Understand basic Flutter UI Elements
• Understand how to navigate between
pages in Flutter.
What you will be
building/learning

3. • Installed Flutter SDK, Android Studio, and iOS/Android Emulator
• Clone this repo:
https://github.com/chrislevn/Flutter_Basic_Chap_App
Requirements

4. • UpperCamelCase
○Classes, enum types, typedefs, extensions and type parameters
●lowercase_with_underscores
○libraries, packages, directories, prefixes, and source files
●lowerCamelCase
○Class members, top-level definitions, variables, parameters, constant names, and named
parameters
More on: dart.dev/guides/language/effective-dart/style
Good practice: Dart Styling Guide

5. //: Comments
///: Doc comments to document members and types.
More on dart.dev/guides/language/effective-dart/documentation
Good practice: Dart Documentation Style

6. Folder structure
“lib” folder - where we will be coding
“models” folder - class folder for user and message
“chat_message_model”, “chat_user_model” file
“screens” folder - screens folder
“chat_detail_page”, “chat_page”, “home_page”,
“channel_page“, “profile_screen” file
“widgets” folder - widget folder
conversation_list.dart - column widget file
main.dart - starter file

7. Chat Message Object
• messageContent
• messageType (sender, receiver)
Chat User Object
• name
• messageText
• imageText
• time

8. #1 TODOS: main.dart

9. #TODOs 2: home_page.dart
1. Bottom navigation

10. #TODOs 3: chat_page.dart
1. Header and search bar
1. Conservation list

11. #TODOs 4: chat_detail_page.dart
1. Custom header
2. Bottom Text Box
3. Chat boxes

12. v
Congratulations! You made
it!
Thank you for listening