The Best Flutter Responsive UI Setup

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.filledstacks.com/post/the...

[@FilledStacks]

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

[@FilledStacks]

Check out the support by MKBHD as well!! twitter.com/FilledStacks/status/1183359494753017856

[@getmmg]

@@FilledStacks Congratulations on the milestone. Keep making these awesome videos.

[@FilledStacks]

@@getmmg Thanks a lot man. I appreciate the support. I'll try my best to keep putting out good content.

[@ParabTarak]

With these kind of smart videos you deserve at least a million subs. Basically all flutter users.🙌

[@FilledStacks]

@@ParabTarak Haha, I wish I could get everyone to watch it. Maybe one day 😁

[@gmc254quads6]

You will never really get how much I appreciate your videos. Thanks a lot.

[@FilledStacks]

I'm happy to hear that. Thank you for the support from the beginning. 😊

[@berosolo866]

you change my whole experience with flutter and programming... great tutorials

[@FilledStacks]

That's amazing news. Thank you for letting me know. I appreciate it ❤️😁

[@mosesbinzi339]

Can't wait for the part II, great work, i appreciate your stuff man

[@FilledStacks]

Thanks man. I'm working on it 😄 I hope it doesn't dissapoint

[@Salehalanazi-7]

Keep em coming mate. Love your work

[@FilledStacks]

I'll try my best! Thanks for the long term support, it's much appreciated.

[@Merlinvn82]

Yet, another awesome tutorial. Thank you very much.

[@FilledStacks]

You're welcome! Thanks for watching :) and thanks for the feedback

[@HenryMainaDn]

Tutorials always on point. Thanks.

[@FilledStacks]

Thanks man. I appreciate it 😊

[@charliesta.abc123]

Thanks bro, I was looking for this on Friday. Thanks alot for the teachings

[@FilledStacks]

Awesome man. Happy to have helped 😁

[@pinkdiscomosh2766]

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.

[@FilledStacks]

Thank you! The responsive_builder package wraps all this up nicely.

[@matthewreevesdavis8106]

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👊

[@FilledStacks]

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.

[@matthewreevesdavis8106]

FilledStacks bell is on. Look forward to it 👌

[@leonardoventocilla3275]

Man, you are the master !! Congratulations. Thanks for sharing ..

[@FilledStacks]

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.

[@compton8301]

This is amazing! Sata Frika's very own!!!!! Keep it up dude, keep representing us! 🏆💯💥

[@FilledStacks]

Haha Thanks man! I'll try my best to keep it up. Thanks for the support.

[@mruduladdipalli5417]

I came to this video after 8 months, previously it was not understandable, now I have understood them very well.

[@FilledStacks]

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

[@mruduladdipalli5417]

@@FilledStacks , yes yes yes :)

[@RobertWildling]

This is fantastic stuff! Thank you very much for sharing!

[@FilledStacks]

It's my pleasure. Thanks for all the positive reinforcement. I appreciate you taking the time to comment.

[@AllenWillian]

Extremely useful as always. Thanks a lot!

[@FilledStacks]

It's my pleasure 😁 Thanks for watching.

[@julianarnold7992]

Mind blown once again!

[@FilledStacks]

Haha 🤯😱 yeeeaaaahhh man! That's what I like to hear. I think this will be a big step towards writing once for multiple platforms 💪

[@oliverbytes]

Another awesome tutorial!!!! Keep it up bro!

[@FilledStacks]

Thank you! I'll try my best to keep delivering.

[@maksimryabovol4592]

There is a lot of useful information. Thank you! You are really cool!

[@FilledStacks]

😎😎 thanks man. Glad to hear you got some value from it.

[@rise4gamers506]

Appreciated Efforts! You save my time sir.

[@FilledStacks]

I'm happy to hear that! thanks for watching and leaving a comment.

[@randomizedrobot]

Great Suff man... Lovin it!!!:)

[@FilledStacks]

Thank you!! Happy that You liked it.

[@getmmg]

I was thinking about responsive UI and just when I found a pub package you have posted this.

[@FilledStacks]

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.

[@ariola.3625]

Thank you so much! This Tutorial really helped me a LOOOOOOOOOOT.

[@FilledStacks]

You're very welcome. I 'm happy to have helped.

[@BanchaRajainthong]

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 :).

[@FilledStacks]

Niiice! Thanks for watching. I'm happy to hear that you learned something new :)

[@sivavenkateshr]

Hey bro, your videos are awesome. Your content helped me lot in the learning process. Thank you. Love from India.

[@FilledStacks]

Thank you very much. I appreciate the kind words. I'm happy that I could help you on your learning journey.

[@alliu6757]

Thank you for your awesome tutorial !!!

[@FilledStacks]

It was my pleasure to create 😊 Thanks for leaving a comment 🏵

[@bernard1751]

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!😁

[@FilledStacks]

That's the goal 😊 as long as you keep developing you can definitely get to where I am at.

[@JustMe2222222]

Can't be better. You are the best.

[@FilledStacks]

Thank you 😊 much appreciated

[@hugot8226]

Thank you so much, a lot of good ressources !

[@FilledStacks]

It's my pleasure. Thanks for watching and leaving a comment.

[@Dave-laye]

I'm a flutter dev and i love your usefull Channel ☺️

[@FilledStacks]

That's great news man. Thank you for watching.

[@rodinsuniga5549]

Thank you! I really learned a lot from you.

[@FilledStacks]

You're very welcome! I'm happy to hear that.

[@danielec6142]

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!

[@FilledStacks]

I'm replying here so it can get out of my unreplied comments haha. Thanks daniele

[@hammadpervez4568]

i really love you tutorial. Please make more

[@FilledStacks]

I definitely will be making more :)

[@JacquesvanWyk]

Love your stuff man and love that you are South African!!!! We need more from SA on youtube hehehe

[@FilledStacks]

Thanks Jacques! And thank you for the support, I appreciate it. I'll represent us in the Development space as well as I can 🙌🙌 😁

[@thiyraashdavid7784]

Impressive man! Crystal clear man!

[@FilledStacks]

Awesome!! Thanks for checking it out. haven't seen you around the slack in a while

[@thiyraashdavid7784]

@@FilledStacks hahahaha yes was busy with something else. Quite happy you still remember me man!

[@mawulijo]

Impressive work. Thank you man

[@FilledStacks]

Thank you very much 💪

[@mawulijo]

Can't wait for part 2

[@selandeemantha4933]

Great tutorial, thank you very much

[@FilledStacks]

Happy you found some value in it. thanks for watching

[@cxT9344]

thanks for share this amazing architecture

[@FilledStacks]

You're very welcome 😊💪

[@biancashousedotcom]

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.

[@FilledStacks]

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

[@biancashousedotcom]

@@FilledStacks yep, i saw your lib on pub.dev, so I will check it out... Cheers

[@RohithkannaDuraiswamy]

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!

[@FilledStacks]

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.

[@RohithkannaDuraiswamy]

@@FilledStacks That's all, huh? Sweet! Thanks! And g'luck with ur channel! I'm looking forward to more of your content😉

[@FilledStacks]

@@RohithkannaDuraiswamy Yep. I keep it simple :D

[@oualitsenramdane454]

Very smart thank you for sharing!

[@FilledStacks]

Thank you, you're welcome :)

[@rossthemusicandguitarteacher]

This is AMAZING

[@FilledStacks]

Haha yyyeeaaaaaaahh!!! That's great man! Happy you're enjoying it. For some reason I'm only seeing these comments now

[@bluyetiinc7553]

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

[@FilledStacks]

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.

[@bluyetiinc7553]

@@FilledStacks really appreciated Dane. I'll let you know from time to time how I get along..the key is not giving up.

[@bodehallak1552]

brilliant 💙💙🎯🎯

[@FilledStacks]

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

[@elherediaenc]

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!

[@FilledStacks]

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.

[@elherediaenc]

@@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?

[@FilledStacks]

@@elherediaenc Maybe, I haven't tried all the options I have in mind yet. Try that and let me know how it goes.

[@danumichael4864]

great video thanks a lot sir

[@FilledStacks]

You're very welcome :) and Thank you

[@ianoliveiradev]

i love flutter!!

[@FilledStacks]

So do I ❤️

[@_Karanjot]

Hey! great tutorial ! Btw what's the shortcut for the constructor being autogenerated?

[@FilledStacks]

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.

[@CloroxBleach-vy1dj]

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?

[@FilledStacks]

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! :)

[@ajnaf7277]

Thanks for the great tutorial is there a way to use one TextEditingController for landscape and portrait view?

[@FilledStacks]

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.

[@pierremarais7669]

Hi FilledStack I love your channel, please do a video on using existing sqlite database which just display data in table formats, please

[@FilledStacks]

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.

[@iansamz]

So awesome.... Was wondering how to do this

[@FilledStacks]

Great! If you're wondering about anything else please let me know.

[@iansamz]

@@FilledStacks Maybe firebase authentication with state management.. That would be great... Learnt alot from your channel

[@FilledStacks]

@@iansamz I'm planning on doing something like that soon.

[@ismailkoyuncu5518]

Thank you! I really learned a lot from you. Can you will to do with the Adode XD ?

[@FilledStacks]

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.

[@ismailkoyuncu5518]

@@FilledStacks Thanks for explations.

[@FilledStacks]

@@ismailkoyuncu5518 You're welcome. I'm happy to help

[@KenanYusubov]

Awesome tutorial. Which emulator you use? how to use ios emulator in windows?

[@FilledStacks]

Thank you. I use the normal pixel 2 emulator. And You can't use the ios emulator on windows.

[@LalitPawar29]

great tutorial, how you can used device preview in macOs? thanks in advance

[@FilledStacks]

Hi thanks. I don't know, haven't tried it yet.

[@aytunch]

Congrats for 10k subs. I always thought you were Indian before this video:)

[@FilledStacks]

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.

[@joseubaldocarvajal6472]

Please zoom in your IDE, terminal, etc.., a lot of us watch the videos through our cellphone. Great content. Thanks a lot.

[@FilledStacks]

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]

@@FilledStacks Pretty cool that you still respond a year and half In.

[@FilledStacks]

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

[@Gd-jq6mz]

@@FilledStacks well that's the best quality to have for an entrepreneur, empathy to his or her users, may be you should be one.

[@FilledStacks]

@@Gd-jq6mz I think I should be one too. That's why i've been running this company for 6 years :D

[@dhinesh534]

The best

[@FilledStacks]

Thank you! much apprecaited

[@JoyEnergiser]

shout out ma se kind! 😁

[@FilledStacks]

Hoyaaaaaaaaaaaa!! Dankie bru!

[@flutterdeveloper3033]

thanks for bundle

[@FilledStacks]

It's my pleasure!

[@Maystro_eg]

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

[@FilledStacks]

Hey thanks for the feedback. Provide your value above the Material App to make it available to all your child widgets in the tree.

[@Maystro_eg]

@@FilledStacks thanks, i'll try , and give you the result if you please

[@Maystro_eg]

@@FilledStacks Thanks, Works fine, thank you for your help

[@FilledStacks]

@@Maystro_eg You're welcome

[@markdioneeb8997]

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]

Yes you are correct. In this video we build the responsive_builder package.

[@markdioneeb8997]

@@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

[@FilledStacks]

@@markdioneeb8997 yup! That's why I made the package :D all packaged up neatly.

[@cripz4203]

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.

[@FilledStacks]

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.

[@impactsongs]

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)'

[@FilledStacks]

Seems like you're assigning the widget directly instead of using a builder function (context) => HomeScreenMob.

[@sachinmaharjan11]

is it good idea if i create a mixin n do that repetitive dirty stuff there

[@FilledStacks]

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"

[@internetcollections6453]

Great ....

[@FilledStacks]

Thanks

[@pinkdiscomosh2766]

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

[@FilledStacks]

Thanks for sharing! i Appreciate it. I hope it helps some others.

[@vinamrasaxena7313]

Hey what do you think about ScreenUtils for creating response UI?

[@FilledStacks]

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.

[@YasinIlhan61]

Is second part will cover auto Text size for different devices?

[@FilledStacks]

No. Just responsive layouts. I'll mention the use of AutoText the package if you want to use it for text resizing.

[@YasinIlhan61]

@@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!

[@FilledStacks]

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

[@YasinIlhan61]

@@FilledStacks Thanks.

[@markdioneeb8997]

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.

[@FilledStacks]

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.

[@shashankm5044]

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.

[@FilledStacks]

remove the code for the toolbar.

[@shashankm5044]

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

[@FilledStacks]

@@shashankm5044 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.

[@hammadpervez4568]

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

[@FilledStacks]

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

[@hammadpervez4568]

@@FilledStacks Thank you so much bro for your detailed answer :).

[@darelbitsy5027]

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 ?

[@FilledStacks]

I don't plan on making a package right now.

[@seanaguinaga]

Does this preform well if there a bunch of widgets?

[@FilledStacks]

The same as a normal widget implementation.There's nothing that forces additional redraws so it's literally the exact same as normal flutter.

[@irfnrdh]

mantull

[@FilledStacks]

mantull to you too.

[@abdulhaziq6918]

XD

[@kemalemreball701]

thank you man. but my app boomed because device_preview use shared_prefences library

[@FilledStacks]

haha, you're welcome. Well you can probably just upgrade to latest versions and it'll work.

[@ar1467]

Hi master, How to make the text responsive?

[@FilledStacks]

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.

[@arjunvarma9]

can u show how this widget works with images and other stuffs.

[@FilledStacks]

What exactly would that show?

[@arjunvarma9]

@@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

[@FilledStacks]

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

[@arjunvarma9]

@@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

[@FilledStacks]

@@arjunvarma9 I do. In the web series and in the parts following this part.

[@eduardohenao0]

tried the void main() => runApp( DevicePreview( child: MyApp(), ), ); but the version 0.2.4 says that devicepreview constructor doesnt have a parameter called child

[@FilledStacks]

Is the package downloading properly?

[@AbdullahGad95]

make it like that void main() => runApp( DevicePreview( builder: (context) => MyApp(), ),);

[@alrazibashir846]

@@AbdullahGad95 I was stuck on this! Thanks!

[@antonicodes]

@@AbdullahGad95 Thanks!!!!

[@soumyasau1157]

@@AbdullahGad95 thanks bro!

[@limitlesskode]

Finally saw your face. Lol

[@FilledStacks]

haha, there's a few videos with my face in it :D

[@levanchuong89]

How do you get the android emulator to select different iOS devices?

[@FilledStacks]

Use the device_preview package from pub.dart

[@levanchuong89]

@@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?

[@FilledStacks]

@@levanchuong89 You're welcome. Remove the skin from your AVD. Open up the AVD, edit it, then set skin to none

[@yakoubtarkaoui2586]

Hello bro, can you please tell me how you can change between emulators?

[@FilledStacks]

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.

[@yakoubtarkaoui2586]

@@FilledStacks thank you :) :)

[@wehaveatweet7054]

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

[@FilledStacks]

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.

[@shadowdugify]

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

[@FilledStacks]

Thank you, I made a package called responsive_builder that wraps all this up.

[@novysandhu5193]

device preview not working it shows some error

[@FilledStacks]

You should look into that error and fix it.

[@anirudhsharma2228]

Thanks man and who the fuck disliked your video

[@FilledStacks]

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.

[@mohammad7774]

which emulator you are using in this video.

[@FilledStacks]

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.

[@mohammad7774]

@@FilledStacks Please tell me about that package

[@FilledStacks]

@@mohammad7774 it's called device_preview. I show everything in the video.

[@mohammad7774]

@@FilledStacks ok thank you

[@nguyenvanthuan6756]

what is plugin android emulator? thank

[@FilledStacks]

Hey, the android emulator is normal. If you listen in the video it's a package called device_preview

[@moin2542]

Where do I get that emulator?

[@FilledStacks]

It's a normal emulator. Use the device_preview package for additional devices functionality.

[@bobthebuilder6715]

Where are you from? You have a South African accent

[@FilledStacks]

I am from South Africaaaaaaa!! :)

[@bobthebuilder6715]

@@FilledStacks hehehehe awe😅🤣😂💪🔥

[@josecoverlessons]

Why not just use OrientationBuilder and LayoutBuilder. So much extra work in this setup

[@FilledStacks]

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.

[@josecoverlessons]

@@FilledStacks I see! makes sense

[@h3w45]

what emulator is he using?

[@FilledStacks]

I'm using the normal emulator. The package that gives me the diferent previews is called device preview (pub.dev/packages/device_preview)

[@h3w45]

@@FilledStacks that's very cool, thanks for your reply.

[@rezwansaki]

How can get that type of emulator ?

[@FilledStacks]

It's a normal emulator with no skin on it.

[@rezwansaki]

@@FilledStacks But you can change another devices easily. my ADV has no that feature.

[@FilledStacks]

@@rezwansaki It's a separate AVD. I have about 6 on my PC.

[@AjaSiva]

Why are you overriding the "toString" method? You can define another function instead no?

[@FilledStacks]

I could but then if I place it into a string where dart automatically calls .toString I'd have to always call my function

[@faheemahmadofficial7701]

wish flutter was easier...as windows.form :(

[@FilledStacks]

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.

[@zuherabud744]

5:50-7:00

[@FilledStacks]

:)

[@mydrama6980]

use responsive_framework package its the best best best best!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@FilledStacks]

I prefer the responsive_builder package. It's even beettteeeeeeeer

[@mydrama6980]

@@FilledStacks thank you so much let me check?

[@mydrama6980]

but the responsive framework handles all the responsiveness you don't have to do anything

[@FilledStacks]

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

[@FilledStacks]

@@mydrama6980 Sure you can go check on pub.dev and search responsive_builder

[@rezwansaki]

Is Flutter Not Responsive?

[@FilledStacks]

Flutter is the same as every other platform. You have to make it responsive.

[@rezwansaki]

@@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?

[@FilledStacks]

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

[@StrifeTheHorseman]

Cool! Try working a bit on your pronunciation, because your 'build/built' sounds like 'bold/bolt'.

[@FilledStacks]

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

[@StrifeTheHorseman]

@@FilledStacks I guess it's just a specifics of African accent.

[@FilledStacks]

@@StrifeTheHorseman yep. Definitely that.

[@quadhd1121]

Thought this guy was Indian or something

[@FilledStacks]

naaah, South African. I am brown though, so that's a good guess I think haha.

[@NicholasMaietta]

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.

[@FilledStacks]

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.