# Introduction to Flutter / FlutterFlow
Ryan Chen 2023.05.27

## What is Flutter?
[:link:Flutter official website](https://flutter.dev/)
Flutter is an open-source UI toolkit developed by Google for building natively compiled applications for mobile, web, and desktop from a single codebase. It allows developers to create high-performance, visually appealing applications with a single codebase, which means they can write code once and deploy it on multiple platforms.

[:link:Google's introduciton to Flutter](https://www.youtube.com/watch?v=fq4N0hgOWzU)
[:link:If you already know of React Native](https://www.youtube.com/watch?v=X8ipUgXH6jw)

#### What does that mean?
Traditionally, if you want to build a service with IOS and Android App support plus a website of some sort, you'd need to know Java/Kotlin for Android Development, Objective-C/Swift for iOS Development, and HTML, CSS, JavaScript for web Development.
With flutter, you can build a service for IOS, Android, and web all under one framework, with a single codebase.

##### Traditional Workfloow

graph TD
    style requirementsStyle fill:#FFD700,stroke:#000,stroke-width:2px
    style designStyle fill:#FFA500,stroke:#000,stroke-width:2px
    style developmentStyle fill:#FFC0CB,stroke:#000,stroke-width:2px
    style testingStyle fill:#90EE90,stroke:#000,stroke-width:2px
    style deploymentStyle fill:#ADD8E6,stroke:#000,stroke-width:2px
    style submissionStyle fill:#87CEEB,stroke:#000,stroke-width:2px
    style hostingStyle fill:#F0E68C,stroke:#000,stroke-width:2px

    A[Gather Requirements] -->|requirementsStyle| B[Design]
    B -->|designStyle| C[Development]
    C -->|developmentStyle| D[Testing]
    D -->|testingStyle| E[Deployment]
    E -->|deploymentStyle| F[App Store]
    E -->|deploymentStyle| G[Play Store]
    E -->|deploymentStyle| H[Website]

    subgraph iOS App
        C -->|developmentStyle| I[Swift]
        D -->|testingStyle| J[Manual Testing]
        F -->|submissionStyle| K[Apple Developer Account]
        K -->|submissionStyle| L[App Store Review]
    end

    subgraph Android App
        C -->|developmentStyle| M[Java/Kotlin]
        D -->|testingStyle| N[Manual Testing]
        G -->|submissionStyle| O[Google Developer Account]
        O -->|submissionStyle| P[Play Store Review]
    end

    subgraph Website
        C -->|developmentStyle| Q[Front-end]
        C -->|developmentStyle| R[Back-end]
        D -->|testingStyle| S[Automated Testing]
        H -->|hostingStyle| T[Web Hosting]
    end

##### Flutter Workflow

graph LR
    A[Requirements Gathering] --> B[Design]
    B --> C[Development]
    C --> D[Testing]
    D --> E[Deployment]
    E --> F[App Store Submission]
    E --> G[Play Store Submission]
    E --> H[Website Hosting]

    subgraph Flutter App
        C --> I[Flutter Development]
        D --> J[Unit & Widget Testing]
        F --> K[Apple Developer Account]
        F --> L[Google Developer Account]
        K --> M[App Store Review]
        L --> N[Play Store Review]
    end

    subgraph Website
        C --> O[Front-end Development]
        C --> P[Back-end Development]
        D --> Q[Automated Testing]
        H --> R[Web Hosting]
    end

## What is FlutterFlow?
[:link:FlutterFlow official website](https://flutterflow.io/)
FlutterFlow is a browser-based drag and drop interface based on Flutter to visually build mobile apps without writing code.You can think of it as Scratch for Mobile app developement. You can later export the codebase as an flutter project for more detailed developements.
[:link:The Flutter team's introduction to FlutterFlow](https://www.youtube.com/watch?v=5j82wxzwFyI)

## Where do I start?
Register flutterflow with your Google account: :link:https://flutterflow.io/
Here is a quick tour of flutterflow: :link:https://www.youtube.com/watch?v=NimXzr4LYWE
Play around and follow any short tutorial online to build your first app.