Flutter Bootcamp

GDSC IBA

Muhammad Sohaib Baig with Ibrahim Ahmed Khan

Guide Rough Draft

Day 1

• Introductions
• Flutter Installation
• Create a Template app
• Everything is a Widget
• Changing widgets
• Stateful/Stateless
• packages, import
• IDE IntelliSense (pressing ctrl+Space)
• Flutter/dart hierarchy of code
• Flutter hierarchy of folders
• Figma basic
• Build function, why stateful widget has two classes

Assignment:

Finish installation

Day 2

• Dart basics -> final, const, Stateless, Stateful, setState
• Widget UI Layout Process ->
  1. Widget tree https://docs.flutter.dev/development/ui/layout
  2. User input or animation triggers build
  3. Fixed constraints then flex
  4. flex concept
  5. constraint management beginning from Scaffold body
  6. Flex Widget; Column, Row
  7. Using Expanded, Flexible
• Layout Widgets (column, row, gridview, listview, wrap)
• pubspec.yaml -> Importing Images
• Scaffold, bnavbar, hamburger menu, appbar
• Shapes, button colors, splash/material rendering, CropRRect

Assignment:

1. Make a screen with brown button, imported image inside and 25 radius
2. Read the typography blog[https://medium.com/flutter/playful-typography-with-flutter-f030385058b4]
3. Read the material blog[https://medium.com/flutter/material-3-for-flutter-d417a8a65564]

Day 3

Clarify

• VS Code debug console vs all other tabs
• Errors caused by using const
• What is the root folder of the project. ease of misplacing asset folder.

1. CodeLab Review
2. Table with borders
3. Tictactoe [data structure, logic]
4. Dialogs
5. Drawer
6. Navigation across pages
7. Scoreboard Screen

Day 4

1. Firebase intro

2. Installation

3. Basic connection with DB

Day 5

1. Retrieving data from DB

2. Connecting it with existing code

Day 6

1. Making create calls to firestore

2. Completing the app with backend