🚀 FlutterFlow Best Practices Cheat Sheet

📁 1. Project Organization

1.1 Folder Structure

/lib
├── 📂 pages
│   ├── 🏠 home_page.dart
│   └── 🔐 login_page.dart
├── 📂 widgets
│   └── 🔘 custom_button.dart
├── 📂 backend
│   └── 📂 collections
│       └── 👤 user_collection.dart
├── 📂 custom_code
│   └── 🛠️ custom_functions.dart
└── 📂 constants
    ├── 🎨 colors.dart
    └── 📝 strings.dart

1.2 Example Page Structure

/pages
├── 📂 auth
│   ├── 📱 auth_phone.dart
│   ├── ✅ auth_verify.dart
│   ├── ⏳ loading_screen.dart
│   └── 🌟 splash_screen.dart
├── 📂 business
│   ├── 📊 business_overview.dart
│   └── 📋 business_details.dart
├── 📂 client
│   ├── 🗂️ client_category_browse.dart
│   └── 🏠 client_home.dart
├── 📂 onboarding
│   ├── 🚶 onboarding_step2.dart
│   └── ⏰ setup_business_hours.dart
└── 📂 professionals
    ├── 📅 professional_appointments.dart
    ├── 🏠 professional_home.dart
    └── 📈 professional_reports.dart

🏷️ 2. Naming Conventions

2.1 Page Naming

• 📘 Descriptive Names: login_page.dart, profile_page.dart
• 🚫 Avoid Numbers: Use business_overview.dart instead of BusinessPage1
• 🔡 Lowercase with Underscores: product_details_page.dart

2.2 Widgets and Components

• 🔠 Class Names (Custom Widgets): CustomButton, ProfileAvatar
• 🔡 File Names: custom_button.dart, profile_avatar.dart
• 🐪 Variable Names: submitButton, profileAvatar

🔥 3. Firestore Best Practices

3.1 Naming Conventions for Firestore Fields

Category	Convention	Example
🔤 General Fields	camelCase	firstName, emailAddress
🆔 ID Fields	Specific prefix/suffix	userId, orderId
⏰ Timestamp Fields	Specific names	createdAt, updatedAt
👤 User Reference Fields	Specific names	createdBy, updatedBy

3.2 Lists and References

Type	Convention	Example
📚 Lists of Items	Plural camelCase	tags, categories
🔗 Document References	Singular with Ref suffix	userRef, postRef
🔢 Lists of Related IDs	Plural with Ids suffix	userIds, productIds

3.3 Nested Data Types

Type	Convention	Example
🗺️ Maps (Objects)	Singular, optional Map suffix	addressMap, settingsMap
📊 Arrays of Maps	Plural, optional List/Maps/Array suffix	addresses, settingsList

3.4 Example Firestore Schema

{
  "userId": "abc123",
  "profile": {
    "firstName": "John",
    "lastName": "Doe",
    "age": 30
  },
  "addresses": [
    {
      "street": "123 Main St",
      "city": "Springfield",
      "zip": "12345"
    },
    {
      "street": "456 Elm St",
      "city": "Shelbyville",
      "zip": "67890"
    }
  ],
  "createdAt": "2024-08-21T12:34:56Z",
  "createdBy": "adminUserId"
}

🤔 4. Decision-Making for Firestore Schema Design

4.1 Sense-Check Questions

• 🔍 Is the Field Name Descriptive?
• 🔢 Should This Be Singular or Plural?
• 🌐 Is There Clarity Across the Database?

4.2 Practical Examples

• 🆔 Naming ID Fields: Use cardId for clarity outside the cards collection
• 🔗 Choosing Field Names for Relationships: userRef for single references, userIds for lists

4.3 Things to Avoid

• ⚠️ Reserved Keywords: Avoid key, type, ref
• 🚫 Ambiguous Names: Avoid data, info, value

4.4 Summary of Best Practices

• 🔄 Consistency Is Key
• 🔍 Clarity Over Brevity
• 🧘‍♂️ Avoid Over-Complexity

🛠️ 5. Custom Functions and Widgets in FlutterFlow

5.1 Custom Widgets

• 🔠 Naming: PascalCase (CustomUserCard, PrimaryActionButton)
• 📄 File Naming: Lowercase with underscores (custom_user_card.dart)

5.2 Custom Functions

• 🐪 Naming: camelCase (fetchUserData, calculateTotalCost)
• 📝 Arguments and Parameters: camelCase (userId, totalAmount)

5.3 State Variables

• 🔄 Naming: camelCase (isLoading, userName, itemList)

5.4 Firebase Collections and Fields

Type	Convention	Example
📚 Collections	camelCase	userProfiles, orderHistory
🏷️ Fields	camelCase	firstName, lastLoginTime
🔤 String	fieldName: String	userName: String
🔢 Integer	fieldName: Integer	age: Integer
✅ Boolean	fieldName: Boolean	isActive: Boolean
⏰ Timestamp	fieldName: Timestamp	createdAt: Timestamp

---

🎉 By following these guidelines, even beginners can create clean, maintainable, and scalable app structures in FlutterFlow!