Flutter Shop App

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)

onboard screen
email login
social media login
viewing course
play video course
search course
upload course from backend
view multiple teachers course
buy course on the front end
stripe payment
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

Laravel basics and MVC
Laravel admin panel (CRUD)
Laravel sanctum
Laravel restful api

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

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

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

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Uses Riverpod for state management, which is a modern and efficient approach for building scalable and maintainable Flutter applications, making it 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

Employs Laravel as the backend framework, which is widely used for building robust APIs and server-side logic, making it beneficial for developers interested in full-stack development

Includes Firebase for social media login, which is a common feature in modern apps and provides learners with experience in integrating authentication services

Focuses on Riverpod 1.0 and 2.0, along with AsyncNotifer, AsyncValue, and AsyncData, which are cutting-edge concepts that can help developers stay up-to-date with the latest state management techniques

Utilizes Laravel Sanctum for API token generation and user authorization, which is a secure and efficient method for protecting APIs and managing user access in web applications

Reviews summary

Comprehensive flutter shop app development

According to learners, this course provides a comprehensive and step-by-step guide to building a realistic shop application using Flutter. Students particularly praise the clear explanations of Riverpod state management, noting its practical application throughout the project and covering latest concepts like Riverpod 2.0. The hands-on nature is highlighted as a major strength, providing great practical experience in building a full-stack app. While the inclusion of the Laravel backend is seen as a significant plus, some reviewers found this section less detailed than the Flutter parts, potentially requiring prior backend knowledge or extra learning, especially for those primarily focused on frontend. A few mention needing to debug small code issues.

Backend integration adds value but needs prior knowledge.

"The Laravel backend part was also very helpful."

"However, the backend section feels a bit rushed and might be difficult for someone new to Laravel."

"The backend section was confusing for me as a frontend developer."

"Make sure you have some backend experience or be prepared for extra learning."

Hands-on building of a realistic shop application.

"The project is practical and I learned a lot about building a real app."

"Building the shop app provides great practical experience."

"The project is realistic and challenging in a good way."

"Building the app from scratch gives a real sense of accomplishment."

Excellent coverage of Riverpod v2 concepts.

"especially the Riverpod state management which is explained clearly."

"Fantastic deep dive into Riverpod 2.0 with practical application."

"The state management using Riverpod is explained perfectly with v2 concepts."

"This course is exactly what I needed to understand building a complex app with Riverpod."

Some small errors may require debugging.

"The code sometimes has small errors you need to figure out."

"Some code issues needed debugging on my end."

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

Show steps

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'

Show steps

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

Show steps

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

Show steps

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

Show steps

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

Show steps

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

Show steps

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'

Show steps

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].

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

$$$

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.

Dart & State Management | Riverpod [2024]

What's inside

Learning objectives

Syllabus

Traffic lights

Save this course

Reviews summary

Comprehensive flutter shop app development

Activities

Career center

Reading list

Share

Similar courses