Flutter Responsive Design Tutorial 📲

Поділитися
Вставка
  • Опубліковано 26 гру 2024

КОМЕНТАРІ • 103

  • @CodeXdev
    @CodeXdev  3 роки тому +10

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

    • @faheemahmadofficial7701
      @faheemahmadofficial7701 3 роки тому +1

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

    • @luxecaviar7420
      @luxecaviar7420 3 роки тому

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

  • @mykolamykhaliuk
    @mykolamykhaliuk 11 місяців тому +1

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

  • @kainatnaeem4607
    @kainatnaeem4607 2 роки тому +2

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

  • @nornsiem4379
    @nornsiem4379 3 роки тому

    Best Flutter Channel

  • @krzysztoffryc6095
    @krzysztoffryc6095 3 роки тому +4

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

  • @bellekassouf8852
    @bellekassouf8852 2 роки тому

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

  • @aashiqumar3017
    @aashiqumar3017 2 роки тому

    Thanks! Great Tutorial..

  • @031_mohdahmad8
    @031_mohdahmad8 2 роки тому

    finally, a worthy tutorial 😍😍😍

    • @CodeXdev
      @CodeXdev  2 роки тому

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

  • @muhammadafzal237
    @muhammadafzal237 2 роки тому

    Awesome👏

  • @orkhanmammadov7175
    @orkhanmammadov7175 Рік тому

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

  • @shourya-shikhar
    @shourya-shikhar 3 роки тому

    You just solved one of my biggest problems.

  • @sabuj0338
    @sabuj0338 3 роки тому +4

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

  • @Zim_88
    @Zim_88 2 роки тому

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

  • @Seankim-vj1fl
    @Seankim-vj1fl 3 роки тому +1

    Good tutorial simple and easy to understand. Thank you

  • @tushargupta6533
    @tushargupta6533 3 роки тому

    The solution is so clear that I had to subscribe 👍

  • @noumanzafar8566
    @noumanzafar8566 3 роки тому

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

  • @sanchaarnewsapp
    @sanchaarnewsapp 2 роки тому

    Nice video,, easily understandable.

  • @somevideos99999
    @somevideos99999 3 роки тому

    Outstanding presentation, very easy to follow, thank you!

  • @nirjanmunshi9334
    @nirjanmunshi9334 3 роки тому

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

  • @AZainkhan46
    @AZainkhan46 3 роки тому +2

    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

  • @indikaNK95
    @indikaNK95 3 роки тому

    superb
    👍👍👍

  • @faizdev220
    @faizdev220 3 роки тому

    Thank you. It’s a simple but meaningful

  • @ahmedcpr5706
    @ahmedcpr5706 3 роки тому

    Time saver, thank you

  • @glen8146
    @glen8146 3 роки тому

    is this better than using media queries?

  • @ShafqatNadeem
    @ShafqatNadeem 3 роки тому +1

    Thank you so much . love you

  • @akamadmanfire
    @akamadmanfire 3 роки тому

    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
      @CodeXdev  3 роки тому

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

    • @akamadmanfire
      @akamadmanfire 3 роки тому

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

  • @fadlydestrianarusmana1076
    @fadlydestrianarusmana1076 3 роки тому +1

    Great!

  • @tasaddaqrandhawa4219
    @tasaddaqrandhawa4219 3 роки тому +1

    Great

  • @junaidjameel5049
    @junaidjameel5049 Рік тому

    very nice

  • @hpbisa7225
    @hpbisa7225 3 роки тому +2

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

  • @sanketjain2310
    @sanketjain2310 3 роки тому

    Which software is used to mobile view

  • @martygamingyt181
    @martygamingyt181 3 роки тому

    thank you for this tutorial , best possible explanation.

    • @CodeXdev
      @CodeXdev  3 роки тому

      Glad it was helpful!

  • @mastersorcerer555
    @mastersorcerer555 3 роки тому

    Wonderful

  • @akasfotosnfilms7386
    @akasfotosnfilms7386 3 роки тому

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

  • @DiyaLalDileepLal
    @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)?

  • @prashant3285
    @prashant3285 3 роки тому

    Nice

  • @sankaranarayananp8407
    @sankaranarayananp8407 3 роки тому

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

  • @vandeljasonstrypper6734
    @vandeljasonstrypper6734 3 роки тому

    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

  • @gaaty1954
    @gaaty1954 3 роки тому

    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
    @hunter85070 3 роки тому +2

    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
      @CodeXdev  3 роки тому +1

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

    • @hunter85070
      @hunter85070 3 роки тому

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

    • @CodeXdev
      @CodeXdev  3 роки тому +1

      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
      @hunter85070 3 роки тому

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

  • @faizdev220
    @faizdev220 3 роки тому +1

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

  • @MoAdel92
    @MoAdel92 3 роки тому +2

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

  • @imankamali5799
    @imankamali5799 3 роки тому

    👍😍

  • @starskyz105
    @starskyz105 3 роки тому

    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
      @purplemojicon 3 роки тому

      ua-cam.com/video/Q_WloMNKOkU/v-deo.html
      You should watch this one video 📸

  • @phatho3875
    @phatho3875 3 роки тому

    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?

  • @mohammedaabid8608
    @mohammedaabid8608 3 роки тому

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

    • @CodeXdev
      @CodeXdev  3 роки тому

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

    • @mohammedaabid8608
      @mohammedaabid8608 3 роки тому

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

  • @soulofdarkbynta
    @soulofdarkbynta 10 місяців тому

    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
      @CodeXdev  10 місяців тому +1

      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
      @soulofdarkbynta 10 місяців тому

      Thank you ​@@CodeXdev

  • @sumonnexus7045
    @sumonnexus7045 3 роки тому +1

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

  • @animeshbanerjee4379
    @animeshbanerjee4379 3 роки тому

    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 ?

  • @poisonels8023
    @poisonels8023 3 роки тому

    please how to display image on web build with flutter

  • @himanshugarg08
    @himanshugarg08 3 роки тому

    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

  • @makemypetgamedevprocess6475
    @makemypetgamedevprocess6475 3 роки тому

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

  • @balajibalu6452
    @balajibalu6452 3 роки тому

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

    • @CodeXdev
      @CodeXdev  3 роки тому

      What is the pupperteen library?

  • @kanote6705
    @kanote6705 3 роки тому

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

  • @programmingskills3404
    @programmingskills3404 3 роки тому

    perfect

  • @muhammadjavedrafique4592
    @muhammadjavedrafique4592 2 роки тому

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

    • @CodeXdev
      @CodeXdev  2 роки тому

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

  • @harshjain4256
    @harshjain4256 3 роки тому

    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
      @CodeXdev  3 роки тому

      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
      @harshjain4256 3 роки тому

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

    • @harshjain4256
      @harshjain4256 3 роки тому

      @@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
      @CodeXdev  3 роки тому

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

  • @rezaasgary1442
    @rezaasgary1442 3 роки тому

    What about the fonts and paddings

    • @CodeXdev
      @CodeXdev  3 роки тому

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

  • @siddharth6043
    @siddharth6043 3 роки тому

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

    • @CodeXdev
      @CodeXdev  3 роки тому

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

    • @siddharth6043
      @siddharth6043 3 роки тому

      @@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
      @CodeXdev  3 роки тому

      you didn’t mentioned what is the issue?

    • @siddharth6043
      @siddharth6043 3 роки тому

      @@CodeXdev how to apply your method for this

    • @siddharth6043
      @siddharth6043 3 роки тому

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

  • @faheemahmadofficial7701
    @faheemahmadofficial7701 3 роки тому

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

  • @yashnayi8777
    @yashnayi8777 3 роки тому

    How to stop landscape in flutter??

    • @CodeXdev
      @CodeXdev  3 роки тому +1

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

    • @yashnayi8777
      @yashnayi8777 3 роки тому

      @@CodeXdev Thank a lot : )

  • @testwareinformatics6818
    @testwareinformatics6818 3 роки тому

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

  • @tommyeagen3763
    @tommyeagen3763 3 роки тому

    the wrap widget could’ve solve that problem as well

    • @CodeXdev
      @CodeXdev  3 роки тому

      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.

  • @leonardeuler7988
    @leonardeuler7988 Рік тому

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

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

  • @agoodmansaid
    @agoodmansaid 3 роки тому

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

    • @CodeXdev
      @CodeXdev  3 роки тому

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