Flutter Navigator 2.0

Nov 8 2022 · Dart 2.17.3, Flutter 3.0.2, Android Studio 2020.3

Part 2: Deep Dive Into Navigator 2.0

03. What are we Going to Build

Episode complete

Play next episode

Next
About this episode
Leave a rating/review
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 02. Learn Navigator 2.0 Next episode: 04. Create an App State Manager

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

So what are we going to build? This is a book app where users can select a book that they want to buy. At first, we get an initialization screen where our app gets initialized, and then goes to the login screen. At login screen, the user has to login with email and password. There is also a signup page to create a new account for the users. At home screen, we see a grid view, which displays all the books. The app bar consists of the title, and the cart, and the settings, which navigate us to the cart and the settings screen. Clicking on the book title will take us to the detail screen, which will show all the details of the selected book, like the name, the author, et cetera. We also have a sample button and a buy now button. The sample button takes us to read the sample page where a demo of the book is present. User can decide the book after reading the sample page. It has the buy button, which will add the book to the cart. On the detail screen, we also have a buy button. It will also add the book to the cart, which we can check out later. In the cart screen, we show a list of all selected books where user can check out or remove from the cart. The settings screen will display all the settings of the app, and will hold two buttons, my book, which will display a list of books and can read them, and the log out button, where user can log out from the application. This is the overall application that we are going to build. After downloading the starter project, open the starter project in VSCode or any IDE which you're comfortable with. Our project is divided into three directories. The helper directory, screens directory, and widget directory. The helper directory consists of three class files, book data, constant, and helper functions. The book data consists of all the books that we will display in our application, the constant file contains all the constant values that we will require in our application, and the helper function contains all the helper functions that we are going to use to build our application. The screen folder has all the screens that we display in our application, like the login screen and the sign-up screen are used to login the user into our application. The home screen displays the grid of all the books that we are going to show to the user. Just like the login screen, sign up screen, and the home screen, all other screen displays the specific part of the application, as per their name suggests. Then we have a widget directory. The widget directory consists all of the extracted common widgets that we will be using in our application throughout. For example, a custom app bar that we will show on all the screens that we have.