FlutterFlow: No-Code App Development for Beginners

FlutterFlow enables users to create apps without coding, making app development accessible and enjoyable.

### Creating Apps Without Coding: Introduction to FlutterFlow
Seo Hyung-il will conduct a two-hour lecture on creating an Instagram app without coding using FlutterFlow. FlutterFlow is a tool that offers **quick app creation** through a **drag-and-drop widget system**. The lecture will cover the **basics of app development**, the **benefits of using Flutter for cross-platform development**, and the unique features that have made FlutterFlow the **leading no-code app builder**.

### Getting Started with FlutterFlow
FlutterFlow is the leading no-code tool, offering the ability to **insert and download code for continuous development**. Unlike other app builders, FlutterFlow provides **flexibility and a seamless transition from no-code to regular code**. The platform also offers resources like **YouTube tutorials, documentation, and a community forum for support**, making it ideal for beginners.

### Navigating FlutterFlow: Menu and Widget Tree
The menu allows you to **change the text and color**, with the Widget Tree showing the **hierarchy of widgets** on the page. You can **add, resize, and reorder widgets**, as well as set **padding for empty space**. The Page Selector tab lets you **create and navigate between pages**, with the option to **merge Page View and Widget View** for easier navigation.

### Configuring App Icon and Splash Image in FlutterFlow
In FlutterFlow, the app's icon and splash image can be set up in the **Settings and Integrations menu** under **App Assets**. The Splash image appears briefly at launch, while the Launcher Icon is the app's icon. After uploading the images, users can navigate back to the project list to **confirm the changes**. The session also covers implementing a button action for navigation between the **HomePage and WritePost page**, as well as testing the app's functionality through **preview and Test Mode**.

### Understanding Layout Widgets: Column and Row in FlutterFlow
The button has turned blue, but the Run mode doesn't show an **Instant Reload screen**. Test Mode's Instant Reload feature allows for **seamless working and testing**. The Column Layout Widget arranges widgets **vertically**, while the Row Layout Widget arranges them **horizontally**, with both offering **Main Axis and Cross Axis alignment options** for layout arrangement.

### Creating a Simple Instagram Post Layout with FlutterFlow
The session focused on using **Column and Row Layout Widgets** to create a simple Instagram post layout. Key elements included an **email section**, **delete option**, **image section**, and **text input area**. The tutorial covered **renaming widgets**, **adding elements**, **adjusting properties**, and **applying spacing and padding** for a polished layout.

### Server Integration for Instagram: Using Firebase
Server integration is crucial for the Instagram app to function, with **Firebase** being the chosen platform for this purpose. Firebase offers three key features: **Cloud Firestore** for data storage, **Firebase Authentication** for user login, and **Cloud Storage** for image file storage. The setup process involves enabling authentication, configuring file uploads, and generating configuration files, with the majority of the setup **completed by the end**.

### Setting Up Firebase and Implementing Login Feature
The Firebase security settings have been configured and deployed, including the **Firestore Rules**. A login and registration feature is being implemented in FlutterFlow by creating a new page based on the existing **Auth 1 page**. The social login options are temporarily removed, and a **Log Out button** is added to the homepage, with actions set up for **logging out the user**.

### Setting Up a Users and Posts Collection for Instagram
The users collection is compared to an Excel sheet, with fields representing **column headers** and various data types like **Integer, String, Boolean, and Document Reference**. A new posts collection is created to hold Instagram post data, with fields for **post image, description, author, and posting time**. The Document Reference for the post author links to the users collection, providing a **shortcut to retrieve user information**.

### Creating a Functional Instagram Post Writing Page
A Floating Action Button (FAB) is added to the homepage to navigate to the post writing page. The post writing page includes a button to **upload images**, an image widget to **display the uploaded image**, a text input field for content, and a submission button. The image upload is set to **Firebase**, and the uploaded file's URL is used to **display the image**, while the text field label is changed to **"Please enter the content"** for better user guidance.

### Creating a Post Document in Firestore
An action is being added to create a post document in Firestore, with the collection type set to **"post."** Four fields are being set: **post_image**, **post_description**, **post_author**, and **time_posted**, with values sourced from the uploaded photo, widget state, authenticated user, and current time, respectively. After creating the document, an additional action is added to **navigate back to the homepage**, and the process of **testing the post creation and resolving any errors** is also described.

### Configuring Image Visibility and Implementing Post Retrieval
The image visibility is set to change based on the presence of an uploaded file, with the condition set to **"Is Set and Not Empty."** The posts are displayed using a ListView Widget, with a query added to **retrieve data from the server and sort it by the latest posts.** The post's author and image are then matched with the retrieved data to **establish a connection.**

### Implementing the Delete Function and User Email Display
The process involves matching the post image with the post description and using a document reference to **fetch the user's email** instead of displaying a unique ID. A backend query is used to **retrieve user information** from the post's author reference, and the user's email is **displayed correctly on the page**. The delete function is implemented with a **confirmation dialog**, ensuring that only the post creator can see the delete option and **preventing immediate deletion**.

### Implementing Delete Functionality and Deploying a Website with FlutterFlow
The delete action is set to occur only when '**yes**' is confirmed in the dialog, using the **Conditional** option. The website deployment is configured for **Android, iOS, and the web**, allowing access to the created site. Scrolling and spacing issues are addressed by **enabling scrolling** and adding a **Divider widget**, enhancing the overall **user experience**.

### Creating Apps Without Coding: A Comprehensive Guide to FlutterFlow
* 👋 Hello everyone, I am Tutor Seo Hyung-il, and today we will create an **Instagram-like app** using FlutterFlow, a **no-code platform** designed for **rapid app development**.
* 📱 FlutterFlow allows users to build applications quickly by utilizing a **drag-and-drop interface with widgets**, making it accessible even for those **without coding experience**.
* 🔄 There are three main approaches to app development: native, cross-platform, and web-based, with **Flutter being a popular choice for cross-platform development** due to its **efficiency and flexibility**.
* 🌍 FlutterFlow stands out as the **leading no-code app builder**, maintaining a **high Google search ranking** since mid-2022, and allows users to **view and modify the underlying Flutter code**, providing a unique blend of **no-code and coding capabilities**.
* 🛠 In this session, we will explore the features of FlutterFlow, including the **Widget Palette**, **Widget Tree**, and **Page Selector**, enabling us to **create and organize app components effectively**.
* 📊 We will also learn about Layout Widgets, specifically **Column and Row**, which help structure our app's UI by arranging elements **vertically and horizontally**, respectively.
* 🚀 Finally, we will discuss server integration using Firebase, which will enable us to **store data and manage user authentication**, transforming our app from a **static shell into a fully functional application**.
* 🔗 By the end of this lecture series, you will have the skills to **create, design, and deploy your own applications** using FlutterFlow and Firebase, making app development both **fun and accessible**.

### Setting Up Firebase and Building an Instagram-like App with FlutterFlow
* 🔒 To begin, ensure that Firebase security settings are deployed by clicking on the **"Deploy" option**, which finalizes the configuration for **uploading storage files**.
* 📚 Next, navigate to Firestore to set up the database, where you will need to **deploy Firestore Rules** to communicate with the server effectively.
* 🖥 After deploying, create a login page in FlutterFlow by adding a page named **Auth 1** and customizing it to **remove unsupported social login options**.
* ✍ A logout button is added to the homepage, allowing users to **log out**, while configuring the entry and logged-in pages eliminates any **error messages**.
* 📝 Proceed to test the signup process by entering an email and password, confirming successful registration by checking the **Firestore database for user details**.
* 📊 Understand that the users section in Firestore is a collection storing user data, structured similarly to an **Excel sheet** with defined **fields and data types**.
* 🖼 Moving forward, create a new collection for posts, defining necessary fields such as **post_image**, **post_description**, and **post_author**, and ensure to **deploy Firestore Rules again** to update changes.
* 🚀 Finally, implement CRUD operations for posts, allowing users to **create, read, and delete posts**, culminating in **deploying the app to the web for public access**.

LiveWiki

[스파르타코딩클럽] 노코드로 2시간만에 인스타그램 앱 만들기

[스파르타코딩클럽] 노코드로 2시간만에 인스타그램 앱 만들기