11. flutterflow.io → Sign up
22. Create New Project
33. Choose blank hoặc template
44. Name your app

1FlutterFlow + Firebase:
21. Create Firebase project
32. Connect in FlutterFlow settings
43. Auto-configures:
5   - Authentication
6   - Firestore (database)
7   - Storage
8   - Cloud Functions

1┌────────────────────────────────────────────┐
2│  Widget Tree │  CANVAS  │  Properties     │
3│  ──────────│  ┌──────┐ │  ────────────   │
4│  Page       │  │Phone │ │  Widget config  │
5│  └─Column   │  │UI    │ │  Styling        │
6│    └─Row    │  │      │ │  Actions        │
7│      └─Text │  └──────┘ │  Conditions     │
8├────────────────────────────────────────────┤
9│  [Pages] [Components] [Firestore] [API]   │
10└────────────────────────────────────────────┘

1Everything is a Widget:
2 
3Page (Scaffold)
4└─ Column
5   ├─ Container (Header)
6   │  └─ Text ("Welcome")
7   ├─ ListView
8   │  └─ ListTile (repeating)
9   └─ Button
10      └─ Text ("Submit")

1Column - Vertical stack
2Row - Horizontal stack
3Stack - Layered (z-index)
4Container - Box with styling
5ListView - Scrollable list
6GridView - Grid layout
7Wrap - Auto-wrap items

1Display:
2- Text
3- Image
4- Icon
5- Video Player
6 
7Input:
8- TextField
9- Dropdown
10- Checkbox
11- Slider
12- Date Picker
13 
14Interactive:
15- Button
16- IconButton
17- Card
18- ListTile

11. Add Column to page
22. Inside Column, add Container (header)
33. Add Text widget for title
44. Add ListView for content
55. Style each widget
66. Test in preview

1Every widget has:
2- Padding/Margin
3- Colors (fill, border)
4- Border radius
5- Shadows
6- Alignment
7- Size constraints

1FlutterFlow responsive options:
2- Min/Max width
3- Expand/Shrink
4- Breakpoints (mobile/tablet/desktop)
5- Responsive visibility

1Firestore = NoSQL
2 
3Collections → Documents → Fields
4 
5users (collection)
6├─ userId1 (document)
7│  ├─ name: "John"
8│  ├─ email: "john@..."
9│  └─ created: timestamp
10└─ userId2 (document)
11   └─ ...

11. Firestore tab in FlutterFlow
22. Add Collection (e.g., "products")
33. Define fields:
4   - name (String)
5   - price (Double)
6   - image (ImagePath)
7   - category (Reference to categories)

1Backend Query:
2Collection: products
3Filters:
4  - category == selected_category
5  - price < 100
6Order: price (ascending)
7Limit: 20

11. Add ListView widget
22. Backend Query → products
33. Inside: ListTile
44. Bind data: item.name, item.price

1Navigation:
2- Navigate to page
3- Navigate back
4- Open drawer
5 
6Data:
7- Create document
8- Update document
9- Delete document
10 
11UI:
12- Show snackbar
13- Show dialog
14- Update state
15 
16Custom:
17- Call API
18- Run custom code
19- Firebase function

1Example - Submit Button:
2 
31. Validate form
42. If valid:
5   - Create document in Firestore
6   - Show success message
7   - Navigate to home
83. If invalid:
9   - Show error message

11. Firebase Console → Authentication
22. Enable providers (Email, Google, Apple)
33. FlutterFlow → Auth settings
44. Configure sign-in methods

1FlutterFlow provides:
2- Sign Up page
3- Login page  
4- Forgot Password
5- Phone verification
6 
7Customize UI, logic auto-handled

1Page settings:
2- Requires authentication: Yes
3- Entry page: Login page
4- Auth user collection: users

1Store temporary data per page:
2 
31. Add Page State variable
42. Type: String, Int, List, etc.
53. Update via actions
64. Use in conditionals

1Global state across app:
2 
31. Add App State variable
42. Accessible from any page
53. Use for:
6   - User preferences
7   - Shopping cart
8   - Selected filters

11. Click "Test" button
22. Choose:
3   - Web preview
4   - Run on device (debug)
53. Test all flows

1- Action flow debugger
2- Console logs
3- Network inspector
4- State viewer