Build a Grocery Ecommerce Shopping App with FlutterFlow

Name: Build a Grocery Ecommerce Shopping App with FlutterFlow
Rating: 4.0 (199 reviews)

Learn how to build an e-commerce shopping app without coding using FlutterFlow, Firebase and Stripe

Created byDavid Orok

Last updated 8/2023

English

What you'll learn

Convert UiUx design from Figma into Pages in FlutterFlow using Widgets
Use custom functions to implement difficult features in FlutterFlow
Understand Firebase and how to use it for your FlutterFlow project
Web Publishing
View code
Download code
Connect to Github repository
Integrate Stripe Payment
Animations

Course content

3 sections • 27 lectures • 11h 28m total length

Introduction to FlutterFlow and Nocode Development1:27

Onboarding Page40:06
Login and Sign up Page5:23
Home Page1:10:38
Build a grocery ecommerce home page in FlutterFlow by designing a fixed header, a search bar, a carousel, and category cards with responsive layouts.
Shoping Category Page22:26
Design and implement a shopping category page in flutterflow, selecting a category layout, building product detail integration, and configuring a scrollable, backend-ready list of categories and items.
Product Page19:40
Product Details Page20:36
Shopping Cart Page16:48
Checkout Page24:12
Order Page18:30
Create an orders page in FlutterFlow, build a list view of order items with images and details, use rows and columns, and implement conditional display on tap.
Track Order Page28:24

Backend Actions for Login and Sign up Page and Home Page30:50
Backend Actions for Home Page and Recommended Items13:26
Backend Actions for Shopping Category and Products Page - Part 140:11
Backend Actions for Shopping Category and Products Page - Part 212:00
Backend Actions for Shopping Category and Products Page - Part 328:01
Backend Actions for Shopping Cart and Checkout Page - Part 120:28
Backend Actions for Shopping Cart and Checkout Page - Part 227:25
Backend Actions for Shopping Cart and Checkout Page - Part 318:48
Backend Actions for Stripe Payment33:19
Configure Stripe payments in your app on FlutterFlow by setting keys, enabling Blaze plan, and creating a Stripe amount function to convert to cents, then test with Stripe test cards.
Backend Actions for Orders Page - Part 129:22
Backend Actions for Orders Page - Part 214:44
Backend Actions for Track Orders Page - Part 120:41
Backend Actions for Track Orders Page - Part 220:41
Backend Part 9 - Using Latlng to calculate distance35:29
Enable a distance indicator by using lat long and a custom function to compute how far a product is from the user, using the device's current location and Firestore data.
Backend Part 10 - Search functionality for Products44:24
Backend Part 11 - category filter functionality using app state variables30:13

Requirements

No programming skills need. No prior nocode skills needed. This course is beginner friendly.

Description

In this course, you will learn how to build an e-commerce shopping app without coding using FlutterFlow, Firebase, and Stripe.

You will learn how to convert UiUx designs from Figma into FlutterFlow using widgets. You will understand how to implement backend actions for the application and publish it to the web, Play Store or App Store. With this course, you will move from beginner to advance no-code developer with proficiency in frontend development, backend development, firebase integration, and stripe for payment. You will learn how to publish your app to the web.

Here is the summary of what you will learn in this course:

You will learn how to download the codes to your project.

You will learn how to publish the mobile app to the web.

You will learn how to connect to Stripe for payment.

You will learn how to connect to your GitHub repo like traditional developers.

You will learn about conditional visibility.

You will learn how to use custom functions to achieve some functionalities in your app.

You will learn best practices for mobile responsiveness.

You will learn more about Firebase security rules.

You will learn how to switch from the Spark plan to the Blaze plan in Firebase.

Who this course is for:

Beginner to Professional Mobile App Development without coding using FlutterFlow

Build a Grocery Ecommerce Shopping App with FlutterFlow

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 1min

From Figma to FlutterFlow10 lectures • 4hr 27min

Backend Actions and Custom functions to implement key features16 lectures • 7hr

Requirements

Description

Who this course is for: