This document provides instructions for building a basic chat app in Flutter. It discusses setting up the Flutter SDK and cloning the repository. It outlines the folder structure, including folders for libs, models, screens, and widgets. It describes naming conventions and documentation styles for Dart. It also provides TODOs for key files like main.dart, home_page.dart, and chat_page.dart that will need to be completed to build out the chat app interface and functionality.

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