In this tutorial I want to go over the code to build a base widget which can be used for building responsive UI's in Flutter. Written: www.filledstac...
For some reason I forgot to say Thank you for the 10K subscribers!! It's absolutely crazy 😍😍 Thank you to everyone that watches and subscribed, I hope to keep delivering real programming value you can apply every day. Responsive Builder package out: pub.dev/packages/responsive_builder
Haha nice! Yeah there's some cool pub packages but they don't quite do what I wanted so I figured I'd share how I quickly built my own setup to help with responsive UI.
Hi Dane, Daniele here, really great video as always! One thing you might want to consider to determine if a device is a tablet or not is to use MediaQuery.of(context).size.shortestSide which will do the landscape/portrait check you do on minute 8:45 for you! Thanks for the great video! I was really looking for something like this!
Wow! Super helpful. I was just building a little app recently and hated the fact that I had media queries everywhere just to determine device sizing. What a great solution.
Thanks for the great tutorial on a responsive topic. You also introduce the Device_preview package that I never known before even I already finished 2 flutter apps and publish on the play store :).
Excellent tutorial! Could you please show how to implement this responsive ui basewidget with your provider architecture? That'll be the ultimate ULTIMATE architecture implementation!
I definitely will. The next video is making use of the base widget builder to create a readable responsive UI pattern. Then I'll use that as the base and build the state management portion (provider) ontop of that.
@@FilledStacks nice. Tell me if my assumption is correct: inside the baseview, we'll have the basewidget implementation. We'll pass the builder with the parameters for the baseview and basewidget too. Is that correct?
As a beginner in flutter dev, I was recommended to check out this channel and boy was it worth it :) I'd like to see your complete setup, like what extensions you use and stuff. So, can you share that? I think a lotta peeps would be interested in that too. That nested indent highlighter is dope!
Nice! I'm happy you watched some of the videos. I don't have a special setup. I use VS code with the dart code plugin and enable the flutter UI options in the settings for dart code. Open vs code settings, type flutter ui in the search box. Enable all the check boxes that come up then restart. Thats's basically it. no special setup my side.
Hello, just came across your channel. I am trying to learn flutter for the first time and after last programming around 30 years back...I can see that your content is like a goldmine. I am doing this to see if I can takeover my own apps from the current outsourced dev team and rebuild them in flutter. However, from your channel I can see that there are a lot of architectural considerations, so will try and digest them over time. If you have any suggestions on where to continue this path of learning please let me know
That's awesome! 30 years ago, That's a long time. Well the first thing I would recommend is learning the SOLID principles in relation to programming in general. All my videos are examples of using those principles without telling the viewer. That's very important to me and my team. The first principle is the most important which is single responsibility. Give each flie a specific reason to live, and only ine reason. That should get you on the road to easy maintenance and expansion doen the line.
Thanks man. Please keep in mind this is the videos for when I was creating this package (pub.dev/packages/responsive_builder ). You don't have to create all the widgets. They're all in this package.
Hey hey, Thank you. I'm happy to make the content and share it. And I do zoom in usually. Not too big because it'll make it confusing with all the scrolling. But I can see if i can set it up better so you can see the code better.
@@Gd-jq6mz I'm here to teach and share :) hopefully I still have the same mindset even 5 years from now and every single comment gets a reply. It gets more difficult as the channel grows but it's still manageable now. Even though I reply late, I always reply.
Really nice Content. So glad I stumbled upon your video. I realised I need to understand flutter layout better, because I'm trying to do DnD to populate Rows/Columns, and have these container adapt to the available screen size / available space. Anyway, on wards to part 2, where I can start to see how you use the base widget... Much appreciated.
Hey, you again, sorry I get the comments latest first haha. If you'd like to see it in action in an application that already exists there's a flutter web episode that I use the package in. I built a package called responsive_builder which contains all these widgets and more. I think it's flutter web part 3
I just want raise this issue/error, this is flutter web. "This Scaffold widget cannot be marked as needing to build because the framework is locked." I have 2 different Scaffold Layout Mobile - Scaffold with drawer Desktop - Scaffold without drawer Error happens when the Drawer is open on mobile, and I suddenly resized the screen into desktop, flutter somehow becomes confused on sudden disappearance of drawer since we rebuild the widget into a desktop layout having no drawer.
Yeah, I've seen that before. To keep one scaffold I would make the scaffold top level and then make the body of the scaffold reactive using the responsive_builder package.
Instant subscriber! This is so helpful! I am confused on one thing, however. If I want to create, lets say, a Login Screen, and my widget tree is composed of a container, a column, and then plenty of rows and buttons, texts, etc. How do I scale each component? Do I put everything in a container with a child of BaseWidget and return my desired widget?
Thank you!! I'd say watch part 2, that's where I build the responsive widgets that make use of this underlying setup we build in this part. In addition to that, once you understand it use the package I made to remove all that code from your code base (pub.dev/packages/responsive_builder). THEN, haha, to answer your question. You'll supply a separate view / widget per layout. You can go into fine details using that setup, so if you want a widget one way for mobile and tablet and different for desktop. You use a ScreenTypeLayout and supply a view for mobile and one for desktop. It'll them automatically swap as the views resize. I hope that helps. Thanks for the sub! :)
very important , thank you very much i like your tuts., simple and easy to understand i have problem, to share variable between screens, i try ( Provider ) but the class members must be static , how to share member value provider class without set to static member, i want the value stay as is in every screen i use ? thanks in advance ! , i hope you understand my bad english
Thank you. hey, i don't know which one you're referring to but I use awesome flutter snippets extension in VS code and when there's a quick option I press ctrl+. on the line marked in red and select the option to take.
You're welcome 😊 Yes. You can provide it with a provider or pass it through the constructor. I'd pass it through the constructor to separate it from the data model supply through provider. So one controller in the main view then pass it to the specialised views.
It might be. It depends on how much it improves or reduces the readability of the code. If it reduces the understanding of the code I opt for "keeping it in sight"
Happy to see that this is still useful. I've built this into a package if you don't feel like maintaining all that code pub.dev/packages/responsive_builder
Thanks for letting me know. I'm very happy to hear that I've helped you on your journey. I don't use Adobe XD, mostly Figma and sketch. But it's the same as all other vector based design tools, you can watch any tutorial and apply it to the other since they all have the same basics to cover the fundamental things required to design anything.
For anyone who trying to get the DevicePreview section working. There has been an update to how this syntax works since the recording of this video. Here is a link to the doc on this. pub.dev/packages/device_preview#quickstart
Hey I think it's great if you want your UI to look the same on all the screens. My goal with this package is the opposite. I want my UI to look different on every screen, have a different layout, place items in different positions etc.
@@FilledStacks i think you should mention also resizing Text for different devices because it's part of Responsive layouts. Thanks for this kind of amazing videos!
@@YasinIlhan61 I'll try and mention it if it fits in anywhere. What I'm trying to provide is the architecture to make all those decisions. What I don't want to do is tell you guys what decisions to make. Given the layouts they can easily adjust their font sizing throughout the app using the sizing information. Better options exist for handling that globally with something like AutoText and even better ones that are built into your Provider architecture. If it adds value to the video I'll definitely mention it.
haha, Master????? I use the width of the local widget if it's dependent on that or the width of the screen and multiply by 0.1 or whatever factor you need to size properly.
@@FilledStacks Thank you, it worked. One more thing, in this case, my emulator displays a nested phone in another phone, it shows a phone image outside the preview_device, (see the image ibb.co/gw0StrF). how to hide the emulator hide the outside phone image?
haha, imagine it was that difficult to use. I find it so much easier, which is why I left Xamarin to come over to Flutter. It's so much better for building mobile apps for me.
@@FilledStacks When I develop an app on iOnic I don't have to think about responsive. The topbar, footerbar are all shaped by the device on all devices. I was saying, is that even so?
@@rezwansaki From my experience you have to. Maybe just the toolbar would stretch and update and it's the same for Flutter. So in that case it is similar to what you're asking. Toolbars and general elements will look good on any size. We're using all custom elements here to get the idea across of how to do it.
@@mydrama6980 I want to do something because my UI's require completely different layouts for the same views based on the device size. So I don't want my text or UI to shrink or match in the screen. I want a different layout, one specifically designed for that screen. Not a generic scale by 2 approach.
Luckily there is a pause button, a slow down speed, a reverse button and a full written tutorial on filledstacks.com for every tutorial that has a video. You can follow it at any pace :)
It would be extremely helpful if you would have noted clearly that you are building for a WEBSITE and not mobile apps. The whole purpose of Flutter for most users will be for Mobile app development, mostly because it is for designing cross platform apps.
I'm not building for a website specifically although this will be my approach for that as well. This is a technique to build information into a base widget to allow for you to make responsive decisions (orientation changes, smaller devices vs larger, tablet sizes, etc) . Part2 will be developed for mobile devices and the ipad only. Not the web.
I can definitely live with this video being the best :) Hopefully the follow up where I make use of the setup is even better 😊 Thanks for watching and providing feedback. I appreciate it.
First of all Thank you for you package, now i'm facing a problem you OrientationLayoutBuilder return an object WidgetBuilder in portrait parameter and I can't return a StatefulWidget giving me this The argument type 'HomeScreenMob' can't be assigned to the parameter type 'Widget Function(BuildContext)'
haha you're welcome. There are some community members that don't like the way I write code 😅 it makes sense because I'm not a purist when it comes to engineering. I'm more concerned about maintainability, readability and ease of understanding. Most software architects don't care about that as much as I do.
That's awesome to know. Thanks for coming back. All my videos are for non beginners in programming. Once you understand the general programming concepts my videos will make a lot more sense
You could use that in every single widget you want changed and do multiple if statements and checks wherever possible. But that's the exact this I want to avoid. I simply want to give a layout for mobile, Tablet, Desktop and that's it. No if statements. But like I mention at the beginning. The current way to do this is to litter your build function with if statements and most flutter devs seem to be happy with those large build files. I'm not. I need to work in the code with multiple devs for multiple years.
Just to clarify, correct me if I wrong, it doesn't directly makes your UI responsive, it only gives you a vital information/guide on adjusting the responsiveness of you UI right? btw, awesome video
@@FilledStacks Oh, I was just about to do what you did on the video when I realized that it's already available on pub.dev as package and you're also the author!, hahah thanks
haha, I keep hearing that but in my head I definitely say bild and not bold. But either way if that's how it sounds outside of my face then I'm also fine with that :D
Hey, I don't know how to do that. I use one emulator. In this tutorial I mention that we use the device_preview package in the code base to allow us to preview different screen sizes of our code. The emulator isn't changing. It's just some code that runs your app using a different media query object. read device_preview package readme and use that to get the same functionality.
@@FilledStacks i managed to find it before you replied to my comment. i realised that the responsive UI shown here is not like the type seen in HTML5. I had to reposition some of the widgets to be able to match for all devices given in the plugin.
@@shankmang Yes. The plugin is made specifically to make the development of a responsive UI more verbose and easier to read when going through the code.
Sure. We have a minimum budget and engagement time. We don't take on projects that yield less than $10k USD in total. That's a minimum of $3500 USD a month for a minimum of 3 months. This gets you just a bit more than a weeks work with a release a month. This naturally has a longer development time given it's not constant work on your project.
The normal emulator that comes with Android Studio. I use the pixel 2 xl rom I think. You're most likely asking about being able to switch the view sizes? That's done with a package, not an emulator.
have you checked the screen_util package. It does the same plus also takes in account the text. It is much easier I believe, what's your opinion? PS: You are a wonderful creator.
I have checked it, it doesn't do anything that I do in responsive_builder. My package is for creating readable responsive UI. It's not for making everything look the same on different screen sizes. Which is what screen util is for. It's two very separate functionalities.
Hey Pierre, Thank you. I appreciate you watching the videos. I am planning on doing a sqlite video, not specifically about displaying data as a table but more about my setup, migration code, how I manage that and how I separate all of that into a more maintainable set of code.
@@FilledStacks I meant images and other widgets inside this method which will help a beginner like me to understand how to use this in real app development
@@arjunvarma9 I still don't know what you mean. This is how it's used in a real app. Do you want images to have different sizes? You can simply go to part and three of the series and see how I build a UI with it.
Thanks for the valuable content man!!💪🏼 I decided to use this videos.. and if I dont know a widget or concept, ill go and google it en learn about it.. and then continue this video! If you keep your videos up, maybe one of these days ill also be as pro as you!😁
I have a problem with your structure that Do we need to design our app fully for each Device Specification like (Orientation, Tablet, Mobile) My 2nd question is How may we scale our Text and Image on Devices change? I really need your answers please
The problem you see is the solution that I see. That's the actual solution that we're building in this series. The responsive builder package contains all the code to do that now, this series just shows how it was built. The best way I think to handle a responsive UI that will make the code readable and easy to understand is to supply different layouts per device type / orientation. It's the most maintainable approach that I've seen. I came up with this after searching through all the existing responsive guides which were shitty. And for text use auto size text
tried the void main() => runApp( DevicePreview( child: MyApp(), ), ); but the version 0.2.4 says that devicepreview constructor doesnt have a parameter called child
For some reason I forgot to say Thank you for the 10K subscribers!! It's absolutely crazy 😍😍 Thank you to everyone that watches and subscribed, I hope to keep delivering real programming value you can apply every day.
Responsive Builder package out: pub.dev/packages/responsive_builder
Check out the support by MKBHD as well!! twitter.com/FilledStacks/status/1183359494753017856
@@FilledStacks Congratulations on the milestone. Keep making these awesome videos.
@@getmmg Thanks a lot man. I appreciate the support. I'll try my best to keep putting out good content.
With these kind of smart videos you deserve at least a million subs. Basically all flutter users.🙌
@@ParabTarak Haha, I wish I could get everyone to watch it. Maybe one day 😁
you change my whole experience with flutter and programming...
great tutorials
That's amazing news. Thank you for letting me know. I appreciate it ❤️😁
I was thinking about responsive UI and just when I found a pub package you have posted this.
Haha nice! Yeah there's some cool pub packages but they don't quite do what I wanted so I figured I'd share how I quickly built my own setup to help with responsive UI.
Hi Dane,
Daniele here, really great video as always! One thing you might want to consider to determine if a device is a tablet or not is to use MediaQuery.of(context).size.shortestSide which will do the landscape/portrait check you do on minute 8:45 for you!
Thanks for the great video! I was really looking for something like this!
I'm replying here so it can get out of my unreplied comments haha. Thanks daniele
Wow! Super helpful. I was just building a little app recently and hated the fact that I had media queries everywhere just to determine device sizing. What a great solution.
Thank you! The responsive_builder package wraps all this up nicely.
You will never really get how much I appreciate your videos. Thanks a lot.
I'm happy to hear that. Thank you for the support from the beginning. 😊
Thanks for the great tutorial on a responsive topic.
You also introduce the Device_preview package that I never known before even I already finished 2 flutter apps and publish on the play store :).
Niiice! Thanks for watching. I'm happy to hear that you learned something new :)
Excellent tutorial! Could you please show how to implement this responsive ui basewidget with your provider architecture? That'll be the ultimate ULTIMATE architecture implementation!
I definitely will. The next video is making use of the base widget builder to create a readable responsive UI pattern. Then I'll use that as the base and build the state management portion (provider) ontop of that.
@@FilledStacks nice. Tell me if my assumption is correct: inside the baseview, we'll have the basewidget implementation. We'll pass the builder with the parameters for the baseview and basewidget too. Is that correct?
@@elherediaenc Maybe, I haven't tried all the options I have in mind yet. Try that and let me know how it goes.
Hey bro, your videos are awesome. Your content helped me lot in the learning process. Thank you.
Love from India.
Thank you very much. I appreciate the kind words. I'm happy that I could help you on your learning journey.
As a beginner in flutter dev, I was recommended to check out this channel and boy was it worth it :)
I'd like to see your complete setup, like what extensions you use and stuff. So, can you share that? I think a lotta peeps would be interested in that too. That nested indent highlighter is dope!
Nice! I'm happy you watched some of the videos. I don't have a special setup. I use VS code with the dart code plugin and enable the flutter UI options in the settings for dart code. Open vs code settings, type flutter ui in the search box. Enable all the check boxes that come up then restart. Thats's basically it. no special setup my side.
@@FilledStacks That's all, huh? Sweet! Thanks! And g'luck with ur channel! I'm looking forward to more of your content😉
@@RohithkannaDuraiswamy Yep. I keep it simple :D
I'm a flutter dev and i love your usefull Channel ☺️
That's great news man. Thank you for watching.
Yet, another awesome tutorial. Thank you very much.
You're welcome! Thanks for watching :) and thanks for the feedback
Hello, just came across your channel. I am trying to learn flutter for the first time and after last programming around 30 years back...I can see that your content is like a goldmine. I am doing this to see if I can takeover my own apps from the current outsourced dev team and rebuild them in flutter. However, from your channel I can see that there are a lot of architectural considerations, so will try and digest them over time. If you have any suggestions on where to continue this path of learning please let me know
That's awesome! 30 years ago, That's a long time.
Well the first thing I would recommend is learning the SOLID principles in relation to programming in general. All my videos are examples of using those principles without telling the viewer. That's very important to me and my team.
The first principle is the most important which is single responsibility. Give each flie a specific reason to live, and only ine reason. That should get you on the road to easy maintenance and expansion doen the line.
@@FilledStacks really appreciated Dane. I'll let you know from time to time how I get along..the key is not giving up.
This is amazing! Sata Frika's very own!!!!! Keep it up dude, keep representing us! 🏆💯💥
Haha Thanks man! I'll try my best to keep it up. Thanks for the support.
Tutorials always on point. Thanks.
Thanks man. I appreciate it 😊
Appreciated Efforts!
You save my time sir.
I'm happy to hear that! thanks for watching and leaving a comment.
Thanks bro, I was looking for this on Friday. Thanks alot for the teachings
Awesome man. Happy to have helped 😁
Love your stuff man and love that you are South African!!!! We need more from SA on youtube hehehe
Thanks Jacques! And thank you for the support, I appreciate it. I'll represent us in the Development space as well as I can 🙌🙌 😁
Man, you are the master !! Congratulations. Thanks for sharing ..
Thanks man. Please keep in mind this is the videos for when I was creating this package (pub.dev/packages/responsive_builder ). You don't have to create all the widgets. They're all in this package.
Thank you so much! This Tutorial really helped me a LOOOOOOOOOOT.
You're very welcome. I 'm happy to have helped.
Please zoom in your IDE, terminal, etc.., a lot of us watch the videos through our cellphone. Great content. Thanks a lot.
Hey hey, Thank you. I'm happy to make the content and share it.
And I do zoom in usually. Not too big because it'll make it confusing with all the scrolling. But I can see if i can set it up better so you can see the code better.
@@FilledStacks Pretty cool that you still respond a year and half In.
@@Gd-jq6mz I'm here to teach and share :) hopefully I still have the same mindset even 5 years from now and every single comment gets a reply. It gets more difficult as the channel grows but it's still manageable now. Even though I reply late, I always reply.
@@FilledStacks well that's the best quality to have for an entrepreneur, empathy to his or her users, may be you should be one.
@@Gd-jq6mz I think I should be one too. That's why i've been running this company for 6 years :D
Great Suff man... Lovin it!!!:)
Thank you!! Happy that You liked it.
Really nice Content. So glad I stumbled upon your video.
I realised I need to understand flutter layout better, because I'm trying to do DnD to populate Rows/Columns, and have these container adapt to the available screen size / available space.
Anyway, on wards to part 2, where I can start to see how you use the base widget... Much appreciated.
Hey, you again, sorry I get the comments latest first haha. If you'd like to see it in action in an application that already exists there's a flutter web episode that I use the package in. I built a package called responsive_builder which contains all these widgets and more. I think it's flutter web part 3
@@FilledStacks yep, i saw your lib on pub.dev, so I will check it out... Cheers
Extremely useful as always. Thanks a lot!
It's my pleasure 😁 Thanks for watching.
I just want raise this issue/error, this is flutter web.
"This Scaffold widget cannot be marked as needing to build because the framework is locked."
I have 2 different Scaffold Layout
Mobile - Scaffold with drawer
Desktop - Scaffold without drawer
Error happens when the Drawer is open on mobile, and I suddenly resized the screen into desktop, flutter somehow becomes confused on sudden disappearance of drawer since we rebuild the widget into a desktop layout having no drawer.
Yeah, I've seen that before. To keep one scaffold I would make the scaffold top level and then make the body of the scaffold reactive using the responsive_builder package.
This is fantastic stuff! Thank you very much for sharing!
It's my pleasure. Thanks for all the positive reinforcement. I appreciate you taking the time to comment.
Can't be better. You are the best.
Thank you 😊 much appreciated
Another awesome tutorial!!!! Keep it up bro!
Thank you! I'll try my best to keep delivering.
Thank you so much, a lot of good ressources !
It's my pleasure. Thanks for watching and leaving a comment.
Impressive man! Crystal clear man!
Awesome!! Thanks for checking it out. haven't seen you around the slack in a while
@@FilledStacks hahahaha yes was busy with something else. Quite happy you still remember me man!
i really love you tutorial. Please make more
I definitely will be making more :)
Instant subscriber! This is so helpful! I am confused on one thing, however. If I want to create, lets say, a Login Screen, and my widget tree is composed of a container, a column, and then plenty of rows and buttons, texts, etc. How do I scale each component? Do I put everything in a container with a child of BaseWidget and return my desired widget?
Thank you!! I'd say watch part 2, that's where I build the responsive widgets that make use of this underlying setup we build in this part. In addition to that, once you understand it use the package I made to remove all that code from your code base (pub.dev/packages/responsive_builder).
THEN, haha, to answer your question. You'll supply a separate view / widget per layout. You can go into fine details using that setup, so if you want a widget one way for mobile and tablet and different for desktop. You use a ScreenTypeLayout and supply a view for mobile and one for desktop. It'll them automatically swap as the views resize.
I hope that helps. Thanks for the sub! :)
very important , thank you very much i like your tuts., simple and easy to understand
i have problem, to share variable between screens, i try ( Provider ) but the class members must be static , how to share member value provider class without set to static member, i want the value stay as is in every screen i use ?
thanks in advance ! , i hope you understand my bad english
Hey thanks for the feedback. Provide your value above the Material App to make it available to all your child widgets in the tree.
@@FilledStacks thanks, i'll try , and give you the result if you please
@@FilledStacks Thanks, Works fine, thank you for your help
@@Maystro_eg You're welcome
Impressive work. Thank you man
Thank you very much 💪
Can't wait for part 2
Hey! great tutorial ! Btw what's the shortcut for the constructor being autogenerated?
Thank you. hey, i don't know which one you're referring to but I use awesome flutter snippets extension in VS code and when there's a quick option I press ctrl+. on the line marked in red and select the option to take.
So awesome.... Was wondering how to do this
Great! If you're wondering about anything else please let me know.
@@FilledStacks Maybe firebase authentication with state management.. That would be great... Learnt alot from your channel
@@iansamz I'm planning on doing something like that soon.
Great tutorial, thank you very much
Happy you found some value in it. thanks for watching
device preview not working it shows some error
You should look into that error and fix it.
Thanks for the great tutorial
is there a way to use one TextEditingController for landscape and portrait view?
You're welcome 😊 Yes. You can provide it with a provider or pass it through the constructor. I'd pass it through the constructor to separate it from the data model supply through provider. So one controller in the main view then pass it to the specialised views.
The best
Thank you! much apprecaited
Awesome tutorial. Which emulator you use? how to use ios emulator in windows?
Thank you. I use the normal pixel 2 emulator. And You can't use the ios emulator on windows.
Does this preform well if there a bunch of widgets?
The same as a normal widget implementation.There's nothing that forces additional redraws so it's literally the exact same as normal flutter.
It’s seems like I have seen the same solution on Reddit, but there’s no official package claiming that solution. Do you plan on making a package ?
I don't plan on making a package right now.
Why are you overriding the "toString" method? You can define another function instead no?
I could but then if I place it into a string where dart automatically calls .toString I'd have to always call my function
thank you man. but my app boomed because device_preview use shared_prefences library
haha, you're welcome. Well you can probably just upgrade to latest versions and it'll work.
is it good idea if i create a mixin n do that repetitive dirty stuff there
It might be. It depends on how much it improves or reduces the readability of the code. If it reduces the understanding of the code I opt for "keeping it in sight"
brilliant 💙💙🎯🎯
Happy to see that this is still useful. I've built this into a package if you don't feel like maintaining all that code pub.dev/packages/responsive_builder
Thank you! I really learned a lot from you. Can you will to do with the Adode XD ?
Thanks for letting me know. I'm very happy to hear that I've helped you on your journey. I don't use Adobe XD, mostly Figma and sketch. But it's the same as all other vector based design tools, you can watch any tutorial and apply it to the other since they all have the same basics to cover the fundamental things required to design anything.
@@FilledStacks Thanks for explations.
@@ismailkoyuncu5518 You're welcome. I'm happy to help
For anyone who trying to get the DevicePreview section working. There has been an update to how this syntax works since the recording of this video. Here is a link to the doc on this. pub.dev/packages/device_preview#quickstart
Thanks for sharing! i Appreciate it. I hope it helps some others.
This is AMAZING
Haha yyyeeaaaaaaahh!!! That's great man! Happy you're enjoying it. For some reason I'm only seeing these comments now
great tutorial, how you can used device preview in macOs? thanks in advance
Hi thanks. I don't know, haven't tried it yet.
Hey what do you think about ScreenUtils for creating response UI?
Hey I think it's great if you want your UI to look the same on all the screens. My goal with this package is the opposite. I want my UI to look different on every screen, have a different layout, place items in different positions etc.
Where are you from? You have a South African accent
I am from South Africaaaaaaa!! :)
@@FilledStacks hehehehe awe😅🤣😂💪🔥
what is plugin android emulator? thank
Hey, the android emulator is normal. If you listen in the video it's a package called device_preview
Is second part will cover auto Text size for different devices?
No. Just responsive layouts. I'll mention the use of AutoText the package if you want to use it for text resizing.
@@FilledStacks i think you should mention also resizing Text for different devices because it's part of Responsive layouts. Thanks for this kind of amazing videos!
@@YasinIlhan61 I'll try and mention it if it fits in anywhere. What I'm trying to provide is the architecture to make all those decisions. What I don't want to do is tell you guys what decisions to make. Given the layouts they can easily adjust their font sizing throughout the app using the sizing information. Better options exist for handling that globally with something like AutoText and even better ones that are built into your Provider architecture. If it adds value to the video I'll definitely mention it.
@@FilledStacks Thanks.
great video thanks a lot sir
You're very welcome :) and Thank you
Hi master, How to make the text responsive?
haha, Master????? I use the width of the local widget if it's dependent on that or the width of the screen and multiply by 0.1 or whatever factor you need to size properly.
How do you get the android emulator to select different iOS devices?
Use the device_preview package from pub.dart
@@FilledStacks Thank you, it worked. One more thing, in this case, my emulator displays a nested phone in another phone, it shows a phone image outside the preview_device, (see the image ibb.co/gw0StrF). how to hide the emulator hide the outside phone image?
@@levanchuong89 You're welcome. Remove the skin from your AVD. Open up the AVD, edit it, then set skin to none
i love flutter!!
So do I ❤️
thanks for bundle
It's my pleasure!
How can get that type of emulator ?
It's a normal emulator with no skin on it.
@@FilledStacks But you can change another devices easily. my ADV has no that feature.
@@rezwansaki It's a separate AVD. I have about 6 on my PC.
Good to see some black developers out there. Also, very nice way of implementing it. I just need to digest it a bit more to understand it
Thank you, I made a package called responsive_builder that wraps all this up.
what emulator is he using?
I'm using the normal emulator. The package that gives me the diferent previews is called device preview (pub.dev/packages/device_preview)
@@FilledStacks that's very cool, thanks for your reply.
wish flutter was easier...as windows.form :(
haha, imagine it was that difficult to use. I find it so much easier, which is why I left Xamarin to come over to Flutter. It's so much better for building mobile apps for me.
Congrats for 10k subs. I always thought you were Indian before this video:)
Thank you. Lots of people do, I guess maybe my accent sounds similar? I'm from South Africa so to me the accents are worlds apart.
shout out ma se kind! 😁
Hoyaaaaaaaaaaaa!! Dankie bru!
Great ....
Thanks
Finally saw your face. Lol
haha, there's a few videos with my face in it :D
mantull
mantull to you too.
XD
Is Flutter Not Responsive?
Flutter is the same as every other platform. You have to make it responsive.
@@FilledStacks When I develop an app on iOnic I don't have to think about responsive. The topbar, footerbar are all shaped by the device on all devices. I was saying, is that even so?
@@rezwansaki From my experience you have to. Maybe just the toolbar would stretch and update and it's the same for Flutter. So in that case it is similar to what you're asking. Toolbars and general elements will look good on any size. We're using all custom elements here to get the idea across of how to do it.
use responsive_framework package its the best best best best!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
I prefer the responsive_builder package. It's even beettteeeeeeeer
@@FilledStacks thank you so much let me check?
but the responsive framework handles all the responsiveness you don't have to do anything
@@mydrama6980 I want to do something because my UI's require completely different layouts for the same views based on the device size. So I don't want my text or UI to shrink or match in the screen. I want a different layout, one specifically designed for that screen. Not a generic scale by 2 approach.
@@mydrama6980 Sure you can go check on pub.dev and search responsive_builder
you are moving too quick can not understand
Luckily there is a pause button, a slow down speed, a reverse button and a full written tutorial on filledstacks.com for every tutorial that has a video. You can follow it at any pace :)
It would be extremely helpful if you would have noted clearly that you are building for a WEBSITE and not mobile apps. The whole purpose of Flutter for most users will be for Mobile app development, mostly because it is for designing cross platform apps.
I'm not building for a website specifically although this will be my approach for that as well. This is a technique to build information into a base widget to allow for you to make responsive decisions (orientation changes, smaller devices vs larger, tablet sizes, etc) . Part2 will be developed for mobile devices and the ipad only. Not the web.
Stop like this video please, it is 666 likes !!
I'm the one who bears the number 666. :D
Haha, nice like count :)
:D
Mind blown once again!
Haha 🤯😱 yeeeaaaahhh man! That's what I like to hear. I think this will be a big step towards writing once for multiple platforms 💪
This is the best implementation of Flutter responsive design I have ever seen. Thank you bro! This has helped me more than I can tell you👊
I can definitely live with this video being the best :) Hopefully the follow up where I make use of the setup is even better 😊 Thanks for watching and providing feedback. I appreciate it.
FilledStacks bell is on. Look forward to it 👌
First of all Thank you for you package, now i'm facing a problem you OrientationLayoutBuilder return an object WidgetBuilder in portrait parameter and I can't return a StatefulWidget giving me this The argument type 'HomeScreenMob' can't be assigned to the parameter type 'Widget Function(BuildContext)'
Seems like you're assigning the widget directly instead of using a builder function (context) => HomeScreenMob.
Thanks man and who the fuck disliked your video
haha you're welcome. There are some community members that don't like the way I write code 😅 it makes sense because I'm not a purist when it comes to engineering. I'm more concerned about maintainability, readability and ease of understanding. Most software architects don't care about that as much as I do.
Can't wait for the part II, great work, i appreciate your stuff man
Thanks man. I'm working on it 😄 I hope it doesn't dissapoint
Keep em coming mate. Love your work
I'll try my best! Thanks for the long term support, it's much appreciated.
Thought this guy was Indian or something
naaah, South African. I am brown though, so that's a good guess I think haha.
I came to this video after 8 months, previously it was not understandable, now I have understood them very well.
That's awesome to know. Thanks for coming back. All my videos are for non beginners in programming. Once you understand the general programming concepts my videos will make a lot more sense
@@FilledStacks , yes yes yes :)
Why not just use OrientationBuilder and LayoutBuilder. So much extra work in this setup
You could use that in every single widget you want changed and do multiple if statements and checks wherever possible. But that's the exact this I want to avoid. I simply want to give a layout for mobile, Tablet, Desktop and that's it. No if statements. But like I mention at the beginning. The current way to do this is to litter your build function with if statements and most flutter devs seem to be happy with those large build files. I'm not. I need to work in the code with multiple devs for multiple years.
@@FilledStacks I see! makes sense
Just to clarify, correct me if I wrong, it doesn't directly makes your UI responsive, it only gives you a vital information/guide on adjusting the responsiveness of you UI right? btw, awesome video
Yes you are correct. In this video we build the responsive_builder package.
@@FilledStacks Oh, I was just about to do what you did on the video when I realized that it's already available on pub.dev as package and you're also the author!, hahah thanks
@@markdioneeb8997 yup! That's why I made the package :D all packaged up neatly.
Cool! Try working a bit on your pronunciation, because your 'build/built' sounds like 'bold/bolt'.
haha, I keep hearing that but in my head I definitely say bild and not bold. But either way if that's how it sounds outside of my face then I'm also fine with that :D
@@FilledStacks I guess it's just a specifics of African accent.
@@StrifeTheHorseman yep. Definitely that.
Hello bro,
can you please tell me how you can change between emulators?
Hey, I don't know how to do that. I use one emulator. In this tutorial I mention that we use the device_preview package in the code base to allow us to preview different screen sizes of our code. The emulator isn't changing. It's just some code that runs your app using a different media query object. read device_preview package readme and use that to get the same functionality.
@@FilledStacks thank you :) :)
How do I hide the toolbar ? I want to see only the app that is responsive to different screen sizes without the help of the toolbar.
remove the code for the toolbar.
@@FilledStacks i managed to find it before you replied to my comment. i realised that the responsive UI shown here is not like the type seen in HTML5. I had to reposition some of the widgets to be able to match for all devices given in the plugin.
@@shankmang Yes. The plugin is made specifically to make the development of a responsive UI more verbose and easier to read when going through the code.
Bro I'm Thabang from South Africa JHB can I ask how much you charge for creating an app I'm willing to come to Cape Town for this project
Sure. We have a minimum budget and engagement time. We don't take on projects that yield less than $10k USD in total. That's a minimum of $3500 USD a month for a minimum of 3 months. This gets you just a bit more than a weeks work with a release a month. This naturally has a longer development time given it's not constant work on your project.
5:50-7:00
:)
which emulator you are using in this video.
The normal emulator that comes with Android Studio. I use the pixel 2 xl rom I think. You're most likely asking about being able to switch the view sizes? That's done with a package, not an emulator.
@@FilledStacks
Please tell me about that package
@@mohammad7774 it's called device_preview. I show everything in the video.
@@FilledStacks ok thank you
have you checked the screen_util package. It does the same plus also takes in account the text. It is much easier I believe, what's your opinion?
PS: You are a wonderful creator.
I have checked it, it doesn't do anything that I do in responsive_builder. My package is for creating readable responsive UI. It's not for making everything look the same on different screen sizes. Which is what screen util is for. It's two very separate functionalities.
Hi FilledStack I love your channel, please do a video on using existing sqlite database which just display data in table formats, please
Hey Pierre, Thank you. I appreciate you watching the videos. I am planning on doing a sqlite video, not specifically about displaying data as a table but more about my setup, migration code, how I manage that and how I separate all of that into a more maintainable set of code.
can u show how this widget works with images and other stuffs.
What exactly would that show?
@@FilledStacks I meant images and other widgets inside this method which will help a beginner like me to understand how to use this in real app development
@@arjunvarma9 I still don't know what you mean. This is how it's used in a real app. Do you want images to have different sizes? You can simply go to part and three of the series and see how I build a UI with it.
@@FilledStacks Can you show an example by creating a small app with this method by including images, carousel etc....
It will be a great help
@@arjunvarma9 I do. In the web series and in the parts following this part.
Thanks for the valuable content man!!💪🏼 I decided to use this videos.. and if I dont know a widget or concept, ill go and google it en learn about it.. and then continue this video!
If you keep your videos up, maybe one of these days ill also be as pro as you!😁
That's the goal 😊 as long as you keep developing you can definitely get to where I am at.
I have a problem with your structure that Do we need to design our app fully for each Device Specification like (Orientation, Tablet, Mobile)
My 2nd question is How may we scale our Text and Image on Devices change? I really need your answers please
The problem you see is the solution that I see. That's the actual solution that we're building in this series. The responsive builder package contains all the code to do that now, this series just shows how it was built. The best way I think to handle a responsive UI that will make the code readable and easy to understand is to supply different layouts per device type / orientation. It's the most maintainable approach that I've seen. I came up with this after searching through all the existing responsive guides which were shitty. And for text use auto size text
@@FilledStacks Thank you so much bro for your detailed answer :).
There is a lot of useful information. Thank you! You are really cool!
😎😎 thanks man. Glad to hear you got some value from it.
thanks for share this amazing architecture
You're very welcome 😊💪
Where do I get that emulator?
It's a normal emulator. Use the device_preview package for additional devices functionality.
tried the
void main() => runApp(
DevicePreview(
child: MyApp(),
),
);
but the version 0.2.4 says that devicepreview constructor doesnt have a parameter called child
Is the package downloading properly?
make it like that
void main() => runApp( DevicePreview(
builder: (context) => MyApp(),
),);
@@AbdullahGad95 I was stuck on this! Thanks!
@@AbdullahGad95 Thanks!!!!
@@AbdullahGad95 thanks bro!
Very smart thank you for sharing!
Thank you, you're welcome :)