Flutter Responsive Design Tutorial 📲

Hey there, in this video I have shown how easy it is to create responsive design inside flutter application.
I have demonstrated with help of Portrait and Landscape of Mobile application but the same concept goes for all possible form factors like tablets and web.
0:00 - Introduction
1:00 - Page Setup
1:30 - Example and Agenda
3:05 - LayoutBuilder
7:45 - Responsive Widget
Join this channel to get access to perks:
kzbin.infojoin
Gears ========
Camera 📸 || Canon 250D : amzn.to/34isdKr
Mic 🎤 || Maono AU-04 : amzn.to/341g9wS
#CodeX
Connect with me on social media:
FB: / codexdevs
Twitter: / afzalali15
LinkedIn: / afzalali15
Discord: / discord

[@CodeXdev]

0:00 - Introduction 1:00 - Page Setup 1:30 - Example and Agenda 3:05 - LayoutBuilder 7:45 - Responsive Widget

[@faheemahmadofficial7701]

BRo why dont you say "ASSALAM U ALKUM " in the start of your video??? please be a better muslim and spread islamic values

[@luxecaviar7420]

Straight to the point, clear and concise. Organized and not wasting anyones time. Great quality video. 💯💯💯💯💯

[@bellekassouf8852]

Such an easy method with an outstanding explanation! No need for any external plugins as well. I definitely recommend. Thank you!

[@Zim_88]

Wonderful clean and concise example with understandable compact code. Thank you!

[@kainatnaeem4607]

One of the best tutorials of Layout Builders on YT, Thank you for such a simple & meaningful explanation, Stay Blessed & JazakAllah!!!

[@krzysztoffryc6095]

Very clear explanation and good show of clean code methodology. Thank you!

[@faizdev220]

Thank you. It’s a simple but meaningful

[@longtimedeveloper6498]

Outstanding presentation, very easy to follow, thank you!

[@mykolamykhaliuk]

I like applause in the end😅. Make me smile😂

[@noumanzafar8566]

perfect way to optimize code .. thank you for such a nice explanation

[@Seankim-vj1fl]

Good tutorial simple and easy to understand. Thank you

[@orkhanmammadov7175]

Thanks for everythink my brother.This will help to me.

[@tushargupta6533]

The solution is so clear that I had to subscribe 👍

[@nirjanmunshi9334]

A smart approach and easy to learn also. thanks, bro.

[@nornsiem4379]

Best Flutter Channel

[@ShafqatNadeem]

Thank you so much . love you

[@ahmedcpr5706]

Time saver, thank you

[@aashiqumar3017]

Thanks! Great Tutorial..

[@fadlydestrianarusmana1076]

Great!

[@muhammadafzal237]

Awesome👏

[@031_mohdahmad8]

finally, a worthy tutorial 😍😍😍

[@CodeXdev]

Thank you for the feedback :) Have you checked REST API tutorials, thats also very well made.

[@shourya-shikhar]

You just solved one of my biggest problems.

[@mastersorcerer555]

Wonderful

[@martygamingyt181]

thank you for this tutorial , best possible explanation.

[@CodeXdev]

Glad it was helpful!

[@prashant3285]

Nice

[@junaidjameel5049]

very nice

[@tasaddaqrandhawa4219]

Great

[@indikaNK95]

superb 👍👍👍

[@programmingskills3404]

perfect

[@imankamali5799]

👍😍

[@hpbisa7225]

Thank you, this is very nice tutorial😍 Can you provide getx + hive db tutorial in next video, please.

[@sanchaarnewsapp]

Nice video,, easily understandable.

[@CodeXdev]

Glad to hear that

[@sabuj0338]

Can you make a video about background work using the foreground service?

[@vandeljasonstrypper6734]

show we put inside an if else I don't know just a variable instead of the whole UI ?, because we can make the UI react based on the given mode we are in

[@DiyaLalDileepLal]

How will I make all my pages responsive in a flutter app? Should I implement the responsive layout code in every pages or will it inherit the responsive layout from its parent(main.dart)?

[@AZainkhan46]

sir how to use local notifications when receive events from pusher channel if app is open or closed it must show notifications because it is a chatting app. kindly elaborate or make a video on it I really need help as I am stuck in my project

[@phatho3875]

How to make widgets size correct on multiple screen? For example, I have a container which is 72x72 (width x height). It is correct on certain screen but it is large on small screen. I want it's like dp or sp in Android native. How do I deal with this?

[@akamadmanfire]

I have been searching on how to do responsive layouts in Flutter for AGES and they have been all really hard to follow. This sir is Clear, Simple and so easy to follow and understand. Best tutorial out there. Thank you so much and you have just earn yourself a new subscriber 🙂

[@CodeXdev]

Thank you for sub! I m glad that it helped you in some way ❤️

[@akamadmanfire]

@@CodeXdev Hey me again, I was wonder if you can help me with an issue I have. I just followed your tutorial again (been out of coding for a while), everything is word or word but for some reason when I rotate it to Landscape is still showing the mobile layout. Sometimes when I rotate the device I can see the change for a split second but by the time it rotates the Landscape its still the mobile view. Is there a reason why this might be happening?

[@sumonnexus7045]

Thanks for all video and afford your giving 🖤 Dio vs http and what why when

[@glen8146]

is this better than using media queries?

[@sankaranarayananp8407]

I want more videos for responsive design. Please consider my request.

[@animeshbanerjee4379]

Hi sir, I faced a real issue which is solved by this video. But I have one more question that can we use single one code for both tab and mobile and how ?

[@sanketjain2310]

Which software is used to mobile view

[@MoAdel92]

Please please please getx tutorial I can't build big project with it

[@poisonels8023]

please how to display image on web build with flutter

[@kanote6705]

How does its code work without the main function? In addition, the responsive is automatic in this video, it's not my case

[@starskyz105]

with the latest update of flutter now comes with null safety, how can I get around this "The return type 'Widget?' isn't a 'Widget', as required by the closure's context." when returning the mobile or tab in the ResponsiveWidget class ?

[@purplemojicon]

kzbin.info/www/bejne/h5C6naKDg7CCobc You should watch this one video 📸

[@makemypetgamedevprocess6475]

awesome intro, this video was really useful, keep it up :)

[@mohammedaabid8608]

Hi afzal. Thanks for this video. Can you make a video on complex form with Getx

[@CodeXdev]

Hello Aabid, what exactly you mean with complex form? UI or input form?

[@mohammedaabid8608]

@@CodeXdev can you make video on input forms with radio buttons, checkbox?

[@himanshugarg08]

bhai please ye btaa do ki flutter ke liye intern ya as an entry level job ke liye kitna chaiye..and how to find opportunity? please..help

[@gaaty1954]

Windows/Linux: Put your cursor on the widget name and press Ctrl+Alt+M to extract it as a method or "Ctrl+Alt+W to extract it as a widget.

[@hunter85070]

Hi! Hope you are fine! First that all thanks for this tutorial, i have a quesiton. This method works to any screen size? I practice layouts in Flutter and my main problem are overflows when i change screen to a smaller screen.

[@CodeXdev]

Yes, this trick works on all screen size.. you just have to target set of sizes and define layout for that.

[@hunter85070]

@@CodeXdev perfect! the images and texts would also adapt automatically?

[@CodeXdev]

Not really, that also you can keep per form factor! Size->20 for Phone, 22 for Tab and 24 for desktop... make sure you only apply wherever its needed.

[@hunter85070]

@@CodeXdev ohhh god! I will try it! THANKS SO MUCH! HAPPY VALENTINE'S DAY!

[@akasfotosnfilms7386]

Hi, ap VS code pir third party Emmulator kaisy use kr rahai hain . plz guid me

[@soulofdarkbynta]

can we make the layout as a root and to get whole app follow the condition that we check with constraints?. or do we have to check for every single screen?

[@CodeXdev]

Actually every single screen and every component has to change based on the condition, so its ideal to put the check on individual item.

[@soulofdarkbynta]

Thank you ​@@CodeXdev

[@faizdev220]

Sir, can you please tell me how to use post api using getx.

[@CodeXdev]

Sure 😊

[@balajibalu6452]

Bro can u do a tutorial on Web Scraping using pupperteen library.

[@CodeXdev]

What is the pupperteen library?

[@muhammadjavedrafique4592]

i was watching this in the office and the sound of clapping at the end just shocked me

[@CodeXdev]

we have one more story now for this clap sound.. hahaha many have experienced the same 😉

[@harshjain4256]

Hi afzal i made a clock app by following your tutorial but the alarm sound is not repetitive and the alarm notification is not showing in full screen mode just like a phone call screen. I searched alot on internet but found nothing plz help

[@CodeXdev]

Hello Harsh, currently the implementation of clock app is like that only. Its not the Native clock app which can show over entire screen. It just gives notification. I really doubt if we can make exact clock app like the inbuilt.

[@harshjain4256]

@@CodeXdev is there any way to make an app like this?

[@harshjain4256]

@@CodeXdev like how whatsapp implemented there phone call feature in which they show there phone calls notification on full screen even when the device is locked?

[@CodeXdev]

Thats phone call feature, both Android and iOS provide callkit with all the actions and interface

[@leonardeuler7988]

according to this tutorial, we need to create mutliple screens to make flutter apps responsive.

[@CodeXdev]

Responsiveness is achieved in multiple ways, sometime conditional layout, sometime different size of same layout or sometime by scaling up and down.. So its very broad term, the idea is to utilize available screen and show content in better way

[@faheemahmadofficial7701]

BRo why dont you say "ASSALAM U ALKUM " in the start of your video???

[@rezaasgary1442]

What about the fonts and paddings

[@CodeXdev]

That also needs to be handled separately, in this video I focused only on layout change

[@testwareinformatics6818]

hi bro, could you do make a video for create a camera module capture image upload to dio method

[@tommyeagen3763]

the wrap widget could’ve solve that problem as well

[@CodeXdev]

Indeed, but that is automatically done.. what if we want to control how many element show go in next line. Or may be I want to reduce the size of some widget.

[@siddharth6043]

I'm typing same code getting error. How it's running to you .

[@CodeXdev]

😜 thats magic 🪄 kidding, tell us whats the issue for u?

[@siddharth6043]

@@CodeXdev Widget build(BuildContext context) { var screenSize = MediaQuery.of(context).size; return WillPopScope( onWillPop: _onWillPop, child: Scaffold( backgroundColor: Constant.BLACK_COLOR, appBar: AppBar( centerTitle: true, this is my code need to make font responsive in tab , what i found is fontSize: Constant.FONT_SIZE_20*screenSize.width/430, id ont know how to apply your forma

[@CodeXdev]

you didn’t mentioned what is the issue?

[@siddharth6043]

@@CodeXdev how to apply your method for this

[@siddharth6043]

@@CodeXdev this code is working , but want to make tablet font size bigger

[@yashnayi8777]

How to stop landscape in flutter??

[@CodeXdev]

You can do that from native platform, iOS info.plist and Android manifest

[@yashnayi8777]

@@CodeXdev Thank a lot : )

[@agoodmansaid]

Since you asked, no I don't like your intro. BUT I LOVED THE TUTORIAL

[@CodeXdev]

Along with a developer, theres a designer in me who keeps trying such extras to make content even better 😍