Mastering Flutter Web | Santos Enoque | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

24 Lessons (3h 11m)
    • 1. Introduction

    • 2. Before you start

    • 3. When to use flutter web

    • 4. Responsive design

    • 5. Flutter project structure

    • 6. Getx overview

    • 7. How to get help

    • 8. Understanding the layout

    • 9. Custom theme

    • 10. Building the site layout

    • 11. Responsive widgets

    • 12. Top navigation (pt 1)

    • 13. Top navigation (pt 2)

    • 14. Menu controller

    • 15. Site menu

    • 16. Local navigation

    • 17. Overview cards (pt 1)

    • 18. Overview cards (pt 2)

    • 19. Displaying charts

    • 20. Data tables

    • 21. Drivers & Clients pages

    • 22. Authentication page

    • 23. Url navigation

    • 24. Firebase auth (BONUS)

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Hey there, welcome to the only flutter web class you will ever need to take, on this class you will be learning about flutter web from a real-world project, you will build a dashboard, the good things about dashboards or admin panels is that they are required in almost every singly project you will build in the future, so you can use this as a template for your future dashboards, on this class you will learn the following:

  • Responsive design
  • State management with GetX
  • Using custom themes on your flutter projects
  • Flutter large project structure
  • Custom navigation
  • Advances URL navigation and so much more

This class is for people with some experience with flutter, so if you never worked with flutter you will have to learn flutter basic concepts before taking this class.

You will find all assets and the final project in the link below


Meet Your Teacher

Teacher Profile Image

Santos Enoque

Youtuber - Software engineer


Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


5. Flutter project structure: Hello, beautiful people. Welcome to this class. Well, on this video we are going to talk about flood your project structure. And remember that this is not specific for Flutter Wab, any flutter project being in a mobile or web can use the same project structure, right? So if you create your flood, your project, if you flood, your version is bigger than two flooded 200, you automatically will have the flood your web directory here. So we have to do nothing. You do not have to configure web because webcams with flattery. If you are running on a previous version, you'll have to run on, let me open the terminal. You will have to run this command here to enable flood grab, flood third, create. So this is everything you need to do, right? So after we have that out of the way, you already have flood the web enabled on your project. Let's talk product and project structure, right? And this is the structure that I personally used for my projects, right? Everything goes inside the lib folder. Actually not everything because outside the lib folder, we will have the assets folder, but that's not for now. For the moment, every single thing, it's going to go into our lib folder. So let's start adding some directories here. Yes. So this is the project structure I usually use. I will just explain the why, what each of these directories we will store. First we have the constants and has the name suggests the constants directory will store a constant files with constant values. For example, some global constant values. And everything will go into here. Now we have the controllers. Again. For this project, we are going to use the getX architecture. And when you are working with getX on with flatter, you will need the controllers here. And then we have the helpers. Here. We are going to store files with functions that the AI useful throughout the app. For example, the responsive widget, it's going to be stored here, and the local navigator logic as well, It's going to be stored here. And then we have here the pages, which are basically the website pages. Usually when I'm building mobile apps, I call this directory screens and have routing here. I did not have this in every single project. I only use routing when I know that I will do some navigation manually. That's why we haven't routing here. And we have widgets, which are global widgets that are going to be used in more than one screen and a project. And then we have here our main where it is, which is the first file where all of the magic starts, right? So a brief overview. This is a, this is the project structure that we're going to use for this project. 6. Getx overview: Before you watch this video, I would like to let you guys know that this is chopped up version of this video that I have on my YouTube channel. If you want to fully understand how good X works, you can watch this video and you can read the documentation. It's very easy to understand and easy to implement. So you can use these resources before you proceed if you never worked with getX before. So guys, this is the default project you get when you create your flood, your app. And now we are going to integrate the getX ecosystem into the project. The first thing to do here is to create a new folder called controllers. And I create another folder, Let's call it screens. Now use the link in the description to go to the getX package. Url, copy the dependency or the package. Come back to a project, open pups back to the demo. And we are going to add this dependency into our flood or project. After doing that, we are going to create a new file, call it counter controller that's going to keep track of the counter. And now inside of the file we are going to define our class counter controller, which extends get eggs controller. In here we are going to have our int controller. But since we want to know when the value of the variable changes, we are going to turn this variable into an observable. It's difficult, but it's very simple. Instead of having int here, we'll have var counter is equal 0 dot o bs. Obs makes the integer and observable, right? And in here, we're going to write our method to increment our observable. Basically we have here increment counter plus, plus. Again, for every single variable or value that you want to keep track of its value, you have to turn that into an observable. Now, let's go back to our main dot Dart. Remove this widget here, Import, get, and we need to convert the material app into GAD material app. Basically, we do this so that we can change screens without using the build context of the app. We can change screen from anywhere inside of the code. Now let's create our home screen. So it's home dot Dart. And a second screen we are going to call other screen in this case. And now for our home screen, this is going to be a stateless widget. So we need to import flatter material dot Dart, and we need to import get dark as well. Call it on screen. Right here we want to return our scaffold. And as the body of the scaffold, we are going to have a column, main axis alignment of the column is going to be centered so that every single widget inside of the column will be centered. Now here we can have the children of our column, which is a list of widgets. Obviously. Here, let's have a text that displays the counter value. So now we have to register our controller before we use it. So we have here counter controller, which has to be a final. Okay, counter controller is going to be equal to get dotplot and we use put to register our controllers. And inside of pooled we have to pass our class controller. Now here, inside of our widget, we can access the value of our counter by doing counter controller dot counter value. Now in here we can add sized box to give it a bit of height. And finally, let's create a button that will allow us to change screens. Here the other screen is going to be a stateless widget as well. And call it other screen. Again, we're doing this so that I can show to you guys how the process of changing screens without using context wakes. Here, we're going to return a scaffold as well and has the body of the scaffold. We are going to have a column and the same story here. We are going to have a text and then a button. Now the good thing is after you have registered your controller to access it, you just have to do get dot find, right and get x automatically will assign this variable to the controller. You are registered, you have registered as long as they have the same type. And here we can simply do controller dot concordat value. Let's make sure everything is centered. And again, we are going to create a button that will allow us to go back to our previous screen when we want. So let's just copy this and paste it here. Size the widget. And here to go back, we'll just do get back this simple. We do not need to specify the context, and this is only possible if you use get material app. So don't forget to change material AB with GAD material app. Now to go to that screen, we have to do get to n Here. The screen name. Now, change this here and the harm is going to be home screen. Now, if you run the app, you are going to have something like this. Which is not exactly how I expected it to look. No problem. Let's go back to our home screen and center the text and the button widgets. And now let's add a float action button to actually increment the value of our counter. Now, if you look at the app we have here, our action button, but it doesn't update the UI. So to fix that, we have to remove the top level we did. And here we are going to return object from getX called OBX. And this takes a method that has to return a widget. And the widget that we are going to return is the column, right? Hopefully it wasn't very complicated to understand, but basically you have to wrap everything inside of OBX. And now when you click, the counter actually changes. And if you click on open, you can see that the value here on the other screen is updated as well. So this is basically it. And this is the basic example of using state management and route management, using getx. 7. How to get help: Hello, beautiful, beautiful. Welcome back to class. Well, this video is about how to get help. Doesn't matter how good I am at explaining. Eventually, you will find some errors or things will not work the way you intend them to do, and you will need some help. And there's two ways of going about doing that. One you can ask in the Q&A section, but most likely I will need to see the code that you guys have. So it's extremely important for you to use any type of version control system. Usually people use GitHub because it's the mall or the most popular, right? So when you create the project, make sure you create a GitHub or Git repo so that every time you need me or someone else to help you, you can just send that link, something like this for example. So let's imagine this one is your project. Doesn't matter. Okay? You will have something similar to this. So when you're facing an error, you just have to push your code and you can share the link, just copying the link here. And every time I ask for the good link, you can copy and paste. Unfortunately, version control is not part of the class, is not the goal. And I don't want to stretch this one very long, but if you do not know how to use Git, make sure you watch some YouTube videos. They will teach you how to use Git it super simple. You only need like five to ten minutes to learn how to use it. And that's it. 8. Understanding the layout: So guys, if we take some time to have a look at our final design, we have something like this. And from this design, I think it's very easy to see how this site is structured, right? But if it's not, I have something to assist us. We have this section here, their main section. We have our side menu and we have our top navigation bar. So this is the basic site layout, right? And this will change obviously if we go to smallest screens like mobile phones screen, but that's, that's for another video. Right? Now, I can hide this and we can clearly see that this is a destructure of our website, right? So we want to do this in flatter and make sure that this is going to be responsive, right? It doesn't matter if the user uses a laptop. She's a very huge monitor. You should always follow this structure here. Now. Again, here is, this is where we are going to have the actual pages. And when we start working with page routing, the only thing that we are going to change is there, so we do not want to reload the whole page. That's why we are structuring the website like this. Because when, for example, the user clicks on drivers or clicks on one of the side menu items. We do not want to reload all of these. We only want to change the content here. And that's the reasoning behind using this layout here. Now enough talking, Let's do this using flatter. And at first, the first thing that we will do is creating this section here. And afterwards we're going to add our top navigation bar. So let's start with this. 9. Custom theme: And now to start things off here in the project, you will want to clear everything inside of the main file. And by doing so, you are going to have this error here with the test directory. And the only thing to do here is just delivering this because we are not going to use it anyways. So now the test directory is deleted. And the second thing we will, we will want to do here is add some libraries here or dependencies. All right? And I will add here all of the dependencies that we are going to use for this particular project. And depending on when you watch this video, you may need to update this dependencies to delay the latest version, right? So the first one is Google Fonts. And this is super nice because it allows you to use custom fonts inside of the app customer Google fonts, right? And it is a very simple approach in changing fonts in flood your apps. Because if you don't want to do it like this, you would have to download the font and then An important to font files into the asset folder and then used that way. And that's a bit complicated or complex for some people. So it's easier to just use this charts for water and is will this package here will allow us to create charts inside of our Dashboard. Get, which is the getX basically dependency and Data Table 2. And this is everything that we need actually in terms of dependencies. Now, just control, save this, and everything will be done for you. Now, coming back to our main dot Dart file, I decided to clean everything and start from scratch so that you guys can see what's happening and understand here. First of all, we need to create our main full flower, our main function. And because it's where the code starts with, the execution of the project starts here. So well, I believe that this is nothing new to you guys. So I'll just continue here creating our default stateless, a widget and everything. Now the first thing that we're going to do different heat differently here is that normally you would have material app here. But since we are using the get x architecture, we're going to use GAD material. So for the moment is still looks familiar. 100 and changing the dead material. What we did to get material, nothing else is going to change. Now here we are. We are going to add some theme to our app. First, let's define a background color. Now, when it comes to the text theme, this project uses a custom font. So that's why the Google Fonts comes in handy because we can just do Google Fonts and called the fund that we want to use. So now we have some custom fonts into the project. We are using the militia font with the black color. And this is very nice to do like this because we will not have to be changing this frequently and inside of our code. Now the second thing that we want to do here is to change the default transactions, page transactions. And finally, we are going to change our primary color. 10. Building the site layout: Well, now that you guys understood the layout of the website, let's actually start building this in flatter. First of all, let's create a new file called site layout. So we have here layout, dart. So what happened here is we created our site layout and now we have here define our site layout as the home of our gap material widget. Now let's work with our layout. So here we have our site layout to have the default app bar, which is going to be the top navigation bar. And now we have a row. If we go back to our design and we can see that basically this is what we have here. We have a row here, and we have our top navigation bar here. There's something I want you guys to notice, which is this row or the body of our scaffold, is divided into six sections with a equal size, right? So the side menu will take onto one of those columns and arrest the body is going to take the five remaining columns. Now in terms of code, this is how you would do that. So this is basically same as tears. We are saying that this section of the code will take five columns and these will take one column into default value is one. Right? Now what do we are going to do is actually running this code to see how it looks on our web browser. Here we have the app on the browser, and this is the layout. This layout is the same as this one. So this is what we wanted. But there's a small problem, for example. Now, if we reduce the size of this, you'll see that the website is not responsive. I mean, it is responsive because the sizes do adjust. But this is not a normal, this is the mobile size more or less. But this is not how this is supposed to look on the mobile. So we can see that this row here is only suitable for large screens. But when we're dealing with a small screens, this is not suitable. This doesn't look good. So what do we have to do now is actually creating two widgets. One that is going to be displayed here on large screens, large and medium screens. And the second one for the small screens. So in terms of code, what that means is that we are going to get rid of this. We are going to make this a different widget called a large screen. And we are going to create another widget called small screen as well. If you have a look at our website here, we still have the same things though had. And if we reduce the size, nothing changes. If you come back to the layout and instead of large screen you have here small screen. You will notice that the layout of the website changed, which is good. But the problem is, even one, this cream is large. The layout still remains for the small screen. Still, we still have the same layout as the small screens, which is not what we want to do here. Right. Now. What we need is to have a way of automatically changing the screens from large to small depending on the size of the window on the browser. So this is what we are going to do on our next video, which is building the responsive widget to deal with the responsiveness of our website.