OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.

Flutter Shop App | Dart & State Management | Riverpod [2024]

Dastagir Ahmed

This is an online learning course selling app tutorial using Riverpod state management. In this course, we focus how to build a Flutter app for selling course with Stripe payment and Laravel as backend with Restful API.  State management and routing both have been done using Riverpod.

It consists of Laravel backend with Firebase for basic social media login. Most of the API are built using Laravel. The backend contains multi admin( super admin panel and teachers panel) including teacher's app for chatting. We will also build the backend step by step.

App Features (Part 1 features)

Read more

This is an online learning course selling app tutorial using Riverpod state management. In this course, we focus how to build a Flutter app for selling course with Stripe payment and Laravel as backend with Restful API.  State management and routing both have been done using Riverpod.

It consists of Laravel backend with Firebase for basic social media login. Most of the API are built using Laravel. The backend contains multi admin( super admin panel and teachers panel) including teacher's app for chatting. We will also build the backend step by step.

App Features (Part 1 features)

  1. onboard screen

  2. email login

  3. social media login

  4. viewing course

  5. play video course

  6. search course

  7. upload course from backend

  8. view multiple teachers course

  9. buy course on the front end

  10. stripe payment

  11. super admin panel

We used Laravel framework for building backend and API. Backend has multi user privileges. It means there are super admins and sub admins. Teachers accounts are sub admin. Super admin can observe and assign roles to the teachers or the sub admins.

With this course, you will learn how to build token for your api and how to do authorization of user access using Sanctum package of Laravel.

We used Laravel eloquent to work with our database from controller.

By the end of this course, you will master

  1. Laravel basics and MVC

  2. Laravel admin panel (CRUD)

  3. Laravel sanctum

  4. Laravel restful api

Part 2 of this course will include teacher's  app and chat.

Enroll now

What's inside

Learning objectives

  • Learn flutter step by step
  • Master dart programming language and oop concept
  • Building front end step by step
  • Using riverpod for state management
  • Paying with stripe payment
  • Build api step by step
  • Build a visual backend
  • Cover riverpod 1.0 and 2.0 and all the latest concepts
  • Cover concept of asyncnotifer, asyncvalue, asyncdata, asyncerror
  • In depth discussion of different riverpod providers
  • Use clear mvc architecture step by step
  • Postman test and learn about debugging techniques
  • In-depth cover of riverpod code generation code concept
  • Show case of server side optimization of api calls
  • Learning manual creation riverpod 2.0 providers
  • Show more
  • Show less

Syllabus

How to use the backend api
Understanding basic state management
Introduction
Project creation
Read more
About the backend api
Basic understanding of state management and setState
Understanding Riverpod provider
Understand StateProvider and use it
Use StateProvider value across pages
Wrap up stateProvider
Welcome screen section
Introduce Stack Widget
Work on Positioned and Non-positioned widgets
Onboarding screen and Column and reusable text styles
New reusable widget in Column
Column widget and reusable widgets and color
Working with next button
Create reusable boxShadow
Jumping to next page view
Understanding animation of pagecontroller
Understanding const, final and immutability
Immutability in flutter
Dynamically change button name
Work on pageview safearea and background
Show dots indicator
Riverpod StateProvider for dots indicator
Install tools and generate providers
Use the newly generated provider for dots
Sign in screen and reusable widgets
Go to sign in page
Understanding Navigator push and pushNamed
PreferredSize app bar
Sign in social icons
27. Sign in text fields and reusable image widgets
28. Sign in screen and reusable text fields
Sign in screen and work with the buttons
Sign in screen and finish working with the buttons
Sign in screen and button border
App theme and static class
Theme and understand static class
Register screen and ui and laravel api and firebase login
Register page and ui
Finish Registration ui
Function call anonymous function, call back function and onPressed property
Understanding the constructor and parameter
Understanding the immutibility
Understanding the power of copyWith method
Generate Provider for RegisterState
Create function for passing shared states
Access shared states in controller
show pop message from controller
Validate Registration data and google auth api
Work on show circular loading icon and done with it
Firebase configuration with CLI
Manual configuration of firebase android
Catch firebase exception
Sign in section, controller, Riverpod StateNotifierProvider and Callback func
Dart OOP and StateNotifier part 1
OOP concept and StateNotifier part 2
StateNotifier and StateNotifierProvider for sign in
Sign in ui assign function , controller object and bring resources
Try to sign in
Save sign in states in text fields
Android and iOS login success
Sharedpreferences and init method
Understand how sharedpreferences help in storing objects
Understand different ways of doing routing and separate code
Understand ongenerateroute
Work on onGenerateRoute
Use correct route for onGenerateRoute callback
Remember Login in the Storage using onGenerateRoute
Application page section covers new Riverpod 2.0 and AsyncNotifier
BottomNavigation Bar and show the basic buttons
Add more routes to onGenerateRoute
BottomNavigationBarItem style
BottomNavigationBar index
Show dummy pages for application ui
Refactor code for Image Resources and Folder Structure
Refactor code for Images
All screen files refactor
Refactor for repo
Refactor for WidgetRef object
In our Home screen section we will cover in detail AsyncNotifier, dart json encode and decode function along with dart Map and Json
Home screen title and name
Dart jsonstring and string
jsonDecode and simple class
Profile object and constructor pass
UserProfile class and factory constructor
Work on the search bar part 1
Search bar solve renderflow part 2
Show banners and slide
Make dots stateful
Riverpod keepalive for dots
Riverpod UncontrolledProviderScope
Difference between initState() and didChangeDependencies()
Optimized Code
More optimization and refactor image path
TextWidget optimization
Homepage app bar reconstruct

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Uses Riverpod for state management, which is a modern and efficient approach for building scalable and maintainable Flutter applications, making it highly relevant for developers seeking best practices
Covers Stripe payment integration, which is essential for building e-commerce applications and provides practical skills for implementing payment processing in Flutter apps
Includes a Laravel backend with RESTful API, offering full-stack development experience and enabling learners to build robust and scalable server-side solutions for their Flutter apps
Employs Laravel Sanctum for API token generation and user authorization, which is a valuable skill for securing APIs and managing user access in web and mobile applications
Focuses on Riverpod 1.0 and 2.0, along with AsyncNotifer, AsyncValue, and AsyncData, ensuring learners are up-to-date with the latest features and best practices in state management
Requires familiarity with Laravel, which may pose a barrier for those without backend experience, as it necessitates learning a separate framework alongside Flutter and Riverpod

Save this course

Save Flutter Shop App | Dart & State Management | Riverpod [2024] to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Flutter Shop App | Dart & State Management | Riverpod [2024] with these activities:
Review Dart Fundamentals
Solidify your understanding of Dart syntax, data structures, and object-oriented programming principles to prepare for the course's more advanced topics.
Show steps
  • Review Dart's basic syntax and data types.
  • Practice writing simple Dart programs.
  • Study object-oriented programming concepts in Dart.
Read 'Flutter Apprentice'
Gain a broader understanding of Flutter development principles and best practices to complement the course's focus on Riverpod state management.
View Flutter Apprentice (Second Edition): Learn to... on Amazon
Show steps
  • Obtain a copy of 'Flutter Apprentice'.
  • Read the chapters covering basic Flutter concepts.
  • Experiment with the code examples provided in the book.
Implement Basic Flutter Layouts
Reinforce your understanding of Flutter layouts (Row, Column, Stack) by building simple UI components.
Show steps
  • Create a new Flutter project.
  • Implement layouts using Row, Column, and Stack widgets.
  • Experiment with different layout properties.
Five other activities
Expand to see all activities and additional details
Show all eight activities
Follow Riverpod Tutorials
Deepen your understanding of Riverpod by following online tutorials and implementing example applications.
Show steps
  • Search for Riverpod tutorials on YouTube or Flutter blogs.
  • Follow along with the tutorials and implement the code examples.
  • Experiment with different Riverpod providers.
Build a Simple Counter App with Riverpod
Apply your Riverpod knowledge by building a simple counter application with state management.
Show steps
  • Create a new Flutter project.
  • Implement a counter using Riverpod StateProvider.
  • Display the counter value in the UI.
  • Add buttons to increment and decrement the counter.
Document Your Riverpod Learning Journey
Reinforce your understanding by creating blog posts or documentation explaining Riverpod concepts and implementation.
Show steps
  • Choose a Riverpod concept to explain.
  • Write a blog post or create documentation explaining the concept.
  • Include code examples and diagrams.
Contribute to a Flutter Open Source Project
Apply your Flutter and Riverpod skills by contributing to an open-source project.
Show steps
  • Find a Flutter open-source project on GitHub.
  • Identify an issue or feature to work on.
  • Submit a pull request with your changes.
Read 'Clean Architecture'
Learn about software architecture principles to improve the structure and maintainability of your Flutter and Laravel projects.
View Clean Architecture on Amazon
Show steps
  • Obtain a copy of 'Clean Architecture'.
  • Read the chapters covering software design principles.
  • Apply the principles to your Flutter and Laravel projects.

Career center

Learners who complete Flutter Shop App | Dart & State Management | Riverpod [2024] will develop knowledge and skills that may be useful to these careers:
Flutter Developer
A Flutter developer specializes in building applications using the Flutter framework, which is the core focus of this course. This course provides a strong foundation in Flutter development, covering state management with Riverpod, integrating with backend APIs using Laravel, and implementing features like payment processing with Stripe and social media login. A Flutter developer will find significant value in this course's focus on building a complete app with front-end and back-end components. The in-depth coverage of Riverpod, including code generation and async concepts, is particularly valuable. This course is a practical, hands-on approach to learning Flutter, making it highly relevant to a Flutter developer.
See salaries and explore the career path for Flutter Developer
Mobile Application Developer
A mobile application developer creates applications for smartphones and tablets, and this course directly aligns with that role. This course specifically focuses on building a shop app using Flutter, a popular cross-platform framework. The course covers essential aspects of mobile app development, from state management with Riverpod to integrating payment systems and building user interfaces. A mobile application developer would find this course useful for its focus on building a real-world application, and they will benefit from learning how to handle user authentication, manage data with APIs, and implement features such as video playback and search. The practical focus of building an app selling courses is highly relevant to development best practices.
See salaries and explore the career path for Mobile Application Developer
Full-Stack Developer
A full stack developer works on both the front-end and back-end of an application, and this course offers exposure to both areas. The course teaches front-end development with Flutter and back-end development using Laravel, which is essential to working in the field. This course covers how to build APIs and integrate them with the front-end, manage user authentication, and implement payment processing, which is invaluable in a full stack role. A person interested in becoming a full stack developer will benefit significantly from this practical, end-to-end approach to full-stack development.
See salaries and explore the career path for Full-Stack Developer
Front-End Developer
A front end developer builds the user interface and user experience for applications, and this course contributes to that skill set within the Flutter framework. The course emphasizes building user interfaces, handling user interactions, managing state with Riverpod, and integrating with a backend using APIs. A front end developer can gain hands-on experience designing and implementing a full app, learning how to create reusable widgets, manage page navigation, and handle animations. The focus on visual feedback, immutability, and dynamic content is important to the responsibilities of a front end developer.
See salaries and explore the career path for Front-End Developer
API Developer
An API developer designs, builds, and manages application programming interfaces, and this course contains relevant content. The course delves into building RESTful APIs using Laravel, working with user authentication and authorization using Sanctum, and optimizing server-side API calls. An API developer will benefit from learning how APIs are structured in Laravel, how they are integrated into a front-end application, and how to optimize API calls. The course's practical approach to building a working application is very similar to the daily tasks of an API developer.
See salaries and explore the career path for API Developer
Backend Developer
A backend developer focuses on the server-side logic and database management, and this course provides an introduction to those concepts through the use of Laravel. While the course's main focus is on Flutter, it includes a significant component on building a Laravel backend and handling API development. This course also covers topics such as user authentication and authorization, database interaction using Laravel eloquent, and API testing with Postman. A backend developer may find this a good starting point for working with full stack teams.
See salaries and explore the career path for Backend Developer
Software Engineer
A software engineer designs, develops, and maintains software applications, and this course provides the practical knowledge of application development to help with success in that role. While this course is focused on mobile app development with Flutter, it includes important aspects of software engineering like state management, API integration, and database interaction. A software engineer may find this course valuable for its hands-on approach to creating a complete application with both front end and back end components. The course's focus on practical application of design patterns and architecture is also useful to those building software.
See salaries and explore the career path for Software Engineer
Technical Lead
A technical lead manages a team of developers and guides the technical direction of projects. This course may be useful by providing a hands-on look at the technologies being used by their team. While no project management is directly covered, the course’s complete approach to building a full stack app using Flutter and Laravel can provide valuable insights. The technical lead is likely to find the course's coverage of state management with Riverpod, API development, and database interaction to be very helpful when engaging with the engineers who work with these technologies.
See salaries and explore the career path for Technical Lead
Application Architect
An application architect designs the structure and components of applications, and this course is helpful in providing practical experience with a real world app. The course provides hands-on experience with building a complete application, encompassing both front-end and back-end components. An application architect may find this a good introduction to the design decisions made in mobile app development and how the front end and backend communicate. The course’s emphasis on state management using Riverpod, and API development using Laravel provide a practical foundation for the application architect.
See salaries and explore the career path for Application Architect
Solutions Architect
A solutions architect is responsible for designing and overseeing the implementation of software solutions to meet business requirements. This course may help by providing a holistic view of an application build. The course’s approach to building a complete mobile app with both front-end and back-end components helps the solutions architect develop a deeper understanding of the architecture of such a system. Concepts discussed in the course, such as state management and API integration with Laravel, will empower the solutions architect to make more well-informed design decisions.
See salaries and explore the career path for Solutions Architect
Mobile UI/UX Designer
A mobile UI/UX designer focuses on the user interface and user experience of mobile applications, and this course helps them to understand implementation considerations. While the main focus of this course is not design, its exploration of front end development with Flutter provides insights into how designs are implemented. Learning how to build reusable widgets, handle page navigation, and create animations in Flutter is helpful to a designer wishing to better collaborate with engineers. A mobile UI/UX designer may find understanding the limitations of a tool like flutter to be a good way to improve their design work.
See salaries and explore the career path for Mobile UI/UX Designer
Project Manager
While a project manager coordinates teams and resources to complete projects, this course may be useful to help them understand the technologies involved in app creation. Although project management is not taught in this course, understanding the process of building an application with Flutter and Laravel is important to better coordinate resources. This hands-on learning of mobile app development, including state management, API integration, and payment processing gives a project manager a clearer view of the engineering tasks needed to build such systems. They will be better equipped to estimate time and resources required.
See salaries and explore the career path for Project Manager
Quality Assurance Analyst
A quality assurance analyst tests and validates software applications to ensure they meet quality standards. This course may be useful, as it provides an opportunity to learn about the build process of an application. While the course does not discuss testing and QA directly, a QA analyst will find the practical look at building an app with Flutter and Laravel to be helpful in understanding the challenges encountered by developers. They will better understand the different parts of the development process, including building the front-end, integrating APIs, and managing state.
See salaries and explore the career path for Quality Assurance Analyst
Technical Writer
A technical writer creates documentation for software products, and this course may help them understand the product they are documenting. This particular course focuses on app development using Flutter and Laravel, and learning these frameworks can help a technical writer when they document systems that use these. By seeing the process of creating a mobile app, they will better understand the terms and concepts involved in development. Technical writers will be better equipped to write clear, accurate, and consistent documentation.
See salaries and explore the career path for Technical Writer
Database Administrator
A database administrator is tasked with managing databases, and this course introduces database interaction within the Laravel framework. While this course does not cover database management, it demonstrates how to use Laravel eloquent to interact with databases from controllers. They will better understand how databases are consumed in application development by seeing an example in Laravel. By observing the flow of data from database to front-end, a database administrator will learn how their work is used by application developers.
See salaries and explore the career path for Database Administrator

Reading list

We've selected two books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Flutter Shop App | Dart & State Management | Riverpod [2024].
Cover image
Flutter Apprentice (Second Edition)
Save
Provides a comprehensive introduction to Flutter development, covering UI design, state management, and basic app architecture. It's a great resource for beginners to get a solid foundation in Flutter before diving into more advanced topics like Riverpod. The book offers practical examples and step-by-step instructions, making it easy to follow along and build your own Flutter apps. It is particularly helpful for understanding the fundamentals of Flutter widgets and layouts.
Flutter Apprentice (Second Edition): Learn to Build...
Paperback
$$$
Cover image
Clean Architecture
Save
Discusses software design principles that are applicable to any language or framework. It is useful for understanding how to structure your Flutter and Laravel projects for maintainability and scalability. The book provides valuable insights into dependency inversion, separation of concerns, and building testable code. While not specific to Flutter or Laravel, the concepts are crucial for building robust applications.
Clean Architecture
Paperback
Check
Clean Architecture
Kindle Edition
Check

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Similar courses are unavailable at this time. Please try again later.
Effort
49.5 total hours
Via
Udemy
Instructor
Dastagir Ahmed
Language
English
Good to know
Uses Riverpod for state management, which is a modern and efficient approach for building scalable and maintainable Flutter applications, making it highly relevant for developers seeking best practices
Covers Stripe payment integration, which is essential for building e-commerce applications and provides practical skills for implementing payment processing in Flutter apps
Includes a Laravel backend with RESTful API, offering full-stack development experience and enabling learners to build robust and scalable server-side solutions for their Flutter apps
Employs Laravel Sanctum for API token generation and user authorization, which is a valuable skill for securing APIs and managing user access in web and mobile applications
Focuses on Riverpod 1.0 and 2.0, along with AsyncNotifer, AsyncValue, and AsyncData, ensuring learners are up-to-date with the latest features and best practices in state management
Requires familiarity with Laravel, which may pose a barrier for those without backend experience, as it necessitates learning a separate framework alongside Flutter and Riverpod
Share and help others discover this course.
Facebook LinkedIn X Reddit Link Email
Don't miss out
Enroll today to gain access to this course
Enroll in this course
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2025 OpenCourser