# Roadmap

> This page is about FlutterFlow Studio (the visual builder), not FlutterFlow (the app builder you use by describing your app).

URL: https://docs.flutterflow.io/roadmap

This roadmap guides you through the key layers of app development: the UI Layer, Logic Layer, and Data Layer. Understanding these layers is essential for creating apps that are visually appealing, functionally robust, and secure.

This roadmap guides you through the key layers of app development: the **UI Layer, Logic Layer,** and **Data Layer**. Understanding these layers is essential for creating apps that are visually appealing, functionally robust, and secure. 

![layers.avif](https://docs.flutterflow.io/assets/images/layers-aea5e7fd1325b59a7152ec28570b56bc.avif)

## UI Layer
The UI Layer is all about the visual elements and interactions in your app. It includes widgets for buttons, forms, navigation, and layouts. In FlutterFlow Studio, this layer also covers customization options like themes and responsive design, ensuring your app looks great and is easy to use.

- **FlutterFlow Studio Widgets:**
  - [Atomic Design](https://docs.flutterflow.io/resources/ui/overview)
  - [Pages](https://docs.flutterflow.io/resources/ui/pages), [Widget](https://docs.flutterflow.io/resources/ui/widgets) & [Components](https://docs.flutterflow.io/resources/ui/components)
  - [TextFields](https://docs.flutterflow.io/resources/forms/textfield) & [Other Form Widgets](https://docs.flutterflow.io/resources/forms)
- **Navigation Elements:**
  - [Page Transitions (Slide, Fade, etc.)](https://docs.flutterflow.io/concepts/animations/page-transition)
  - [AppBar and other Page Elements](https://docs.flutterflow.io/resources/ui/pages/scaffold)
  - [Bottom Sheets](https://docs.flutterflow.io/concepts/navigation/bottom-sheet) 
  - [Webviews](https://docs.flutterflow.io/concepts/navigation/webview)
- **User Experience (UX):**
  - [Design System](https://docs.flutterflow.io/concepts/design-system)
  - [Responsiveness](https://docs.flutterflow.io/concepts/layouts/responsive)
  - Interaction Feedback 
    - [Animations](https://docs.flutterflow.io/concepts/animations)
    - [Haptic Feedback](https://docs.flutterflow.io/concepts/alerts/haptic-feedback)
         
## Logic Layer
The Logic Layer handles your app's business logic and decision-making. This includes state management, conditional actions, and navigation logic.

- **State Management:**
  - Representing Data
    - [Variables](https://docs.flutterflow.io/resources/data-representation/variables)
    - [Datatypes](https://docs.flutterflow.io/resources/data-representation/data-types) & [Custom Data Types](https://docs.flutterflow.io/resources/data-representation/custom-data-types)
    - [Enums](https://docs.flutterflow.io/resources/data-representation/enums)
    - [Constants](https://docs.flutterflow.io/resources/data-representation/constants)
  - [State Variables](https://docs.flutterflow.io/concepts/state-management)
  - [Managing Widget States](https://docs.flutterflow.io/concepts/state-management/widget-state)
  - Dynamic Lists [(Generating Dynamic Children)](https://docs.flutterflow.io/resources/ui/widgets/composing-widgets/generate-dynamic-children)
- **Actions & Business Logic:**
   - [Actions](https://docs.flutterflow.io/resources/functions/action-flow-editor) 
   - [Conditional Actions](https://docs.flutterflow.io/resources/functions/conditional-logic)
   - [Custom Code](https://docs.flutterflow.io/concepts/custom-code) 
   - [Form Validation Logic](https://docs.flutterflow.io/resources/forms/form-validation)
   
- **Navigation Logic:**
   - [Navigation & Routing](https://docs.flutterflow.io/concepts/navigation/overview)
   - [Deep & Dynamic Linking](https://docs.flutterflow.io/concepts/navigation/deep-dynamic-linking)

- **Notification Systems**:
   - [Triggering Push Notifications](https://docs.flutterflow.io/concepts/notifications/push-notifications)
   - [Alert Dialogs](https://docs.flutterflow.io/concepts/alerts/alert-dialog)

## Data Layer
The Data Layer manages data storage, retrieval, and integration with external sources like APIs and databases.

- **Authentication:**
  - [Auth Methods Overview](https://docs.flutterflow.io/integrations/authentication-methods)
  - [Firebase or Supabase or Custom Authentication](https://docs.flutterflow.io/integrations/authentication-types)
   
- **Database Integration:**
  - [Firebase](https://docs.flutterflow.io/integrations/database/cloud-firestore/getting-started) or [Supabase](https://docs.flutterflow.io/integrations/database/supabase/database-actions) integration.
  - Local Storage with [AppState](https://docs.flutterflow.io/resources/data-representation/app-state) or [SQLite DB](https://docs.flutterflow.io/integrations/database/sqlite)
   
- **API Integration:**
   - Working with [REST APIs](https://docs.flutterflow.io/resources/backend-logic/create-test-api)
   - [Streaming APIs](https://docs.flutterflow.io/resources/backend-logic/streaming-api)