Flutter Tutorial - Get Widget Size & Position - Get X, Y, Width & Height Of Widget

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

КОМЕНТАРІ • 48

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

    This might help you :)
    👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com
    Source Code: github.com/JohannesMilke/widget_size_example
    Localization & Internationalization Tutorial: ua-cam.com/video/Zw4KoorVxgg/v-deo.html
    Video Player Tutorial: ua-cam.com/video/uz4xRnE-UIw/v-deo.html
    Quiz App Tutorial: ua-cam.com/video/gSvd-i0JSsU/v-deo.html
    Shared Preferences Tutorial: ua-cam.com/video/szOllHT1S7Y/v-deo.html
    Login & Signup Tutorial: ua-cam.com/users/JohannesMilkevideos
    Container Transform Animation Tutorial: ua-cam.com/video/1nwuihDA8pE/v-deo.html
    Share Texts, Images & Files Tutorial: ua-cam.com/video/-PmUFbbA-Fs/v-deo.html
    Showcase & Highlight Widgets Tutorial: ua-cam.com/video/zbWPtF-V7g0/v-deo.html
    Deploy Flutter Web App With Firebase Tutorial: ua-cam.com/video/xJo7Mqse960/v-deo.html
    Buttons 2.0 Tutorial: ua-cam.com/video/ytlDKJBxW_A/v-deo.html

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

    This was really great... I can recount countless times in the past where if I had known this my life could have been so much more easier!

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

    Please keep the good work flowing. I love your videos' contents.

  • @fantamagier
    @fantamagier 3 роки тому +3

    This will help: final RenderBox box = keyText.currentContext!.findRenderObject() as RenderBox;

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

    Congratulations, we are 7K !
    waiting for more and more...

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

    Thanks ! this tutorial is very useful

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

    Thank you, this helped me a lot!

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

    Respects our master 🙏🙏🙏

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

    Nice one! But I have a question: you said that we can't get those values during the build, but if I need to resize some widget base on another widget, I think I need to do it during build proccess. Think about having an image and you need to know how much space it will fill and calculate other widgets based on this information. I dont know how to do it.
    Thanks for one more very useful video! I really like your videos.

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

      @@HeyFlutter Very good example. I am starting with flutter yet (one tetris game, 2 comercial web projects and 2 android comercial apps developed), but I am always looking for best pratices and your channel is one of the best for me. Thank you again!

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

      Thank you, SlashSP! 🙂 Sure, let's say you click on a button to resize some widget, then you first of all get the size of this widget, what we learned in this video and after this you could build the other widget depending on the size and position of this determined widget.
      1) By the way you could also use a LayoutBuilder to determine the size of a widget: stackoverflow.com/a/64662947
      2) Learn also here more about it: stackoverflow.com/a/49650741

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

    Thanks, so Usefull!!!

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

    Thank you!

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

    Hello Milke, nice content, very useful. I am wondering can we get current position of draggable widget with GlobalKey if we call the function for calculating in onDragStarted so we can calculate while it is dragged around?

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

      Thanks, Samir! 🙂 Sure should work, check also my tutorial out about Dragging & Dropping Widgets: ua-cam.com/video/Bc0qB1jtHBk/v-deo.html
      And below are more alternatives to determine the position & size of widgets
      1) By the way you could also use a LayoutBuilder to determine the size of a widget: stackoverflow.com/a/64662947
      2) Learn also here more about it: stackoverflow.com/a/49650741

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

    Really good

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

    nice tutorial bro but could you make annother video about using overlaywih dropdown using size and position ?

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

      @@HeyFlutter I was asking you about nested dropdown I know it's complicated if you can make video about I would be grateful to you

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

      Thanks Mohamed! 🙂 Check out my video tutorial about Dropdown: ua-cam.com/video/p1mzz6-19zo/v-deo.html In this video we learned how to get the size & position of a widget which you could be also applied to a dropdown button or do you want to get the size & position of the dropdown overlay directly?

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

    I don't get it. Was render box changed recently in flutter? your code doesnt let me do this: final RenderBox box = imageBoxKey.currentContext.findRenderObject();
    It says it should be RenderObject instead but then the rest of the code does not work with RenderObject so I am not sure what was changed?
    It seems there is no updated version on how to find a widget size anywhere on the internet. Could you help? Thank you!

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

      Thank You Nitzan Eliyahu! Follow this link: api.flutter.dev/flutter/rendering/RenderBox-class.html
      I hope you will get your answer 🙂

  • @pubgmobile-ir6ti
    @pubgmobile-ir6ti 3 роки тому

    Can anyone tell me
    In Which aspect ratio flutter show image in app & how to calculate the aspect ratio

  • @ashokkmr8758
    @ashokkmr8758 11 місяців тому

    how to get Screen Size,width,height of device without mediaQuery.of(context) ? i want to draw a line for inside of specific widget, i don't know how to do it...

    • @HeyFlutter
      @HeyFlutter  11 місяців тому

      Thank You @ashokkmr8758! Follow this link: stackoverflow.com/questions/57755174/getting-screen-size-in-a-class-without-buildcontext-in-flutter
      I hope you will get your answer 🙂

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

    How to paste the code in your tutorial is there any software ?...

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

    Thank you so much for this tutorial !
    Quick question : what if i want to get the size of a future widget inside a stream builder. where exactly should i call the "getSize" function knowing that it may lead to flickerin due to the setState();.
    Thank in advance.

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

      Thank You Aymen Fayadhi! Follow this link: medium.flutterdevs.com/explore-size-position-widget-in-flutter-5b3736d295f
      I hope you will get your answer 🙂

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

    after upgrading flutter doesn't work RenderBox. Please update your video.

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

      @@HeyFlutter I am using PageView. And my widget height is different size. I would be found heights for sizedbox. I used Expanded, Flexible and shrinkWrap. But all of them are useless. How to fix it?

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

    Hi, J Milke, have you any tutorial or link for pick multiple images from gallery if yes please guide me how to use in flutter. Thanks alot.

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

      @@HeyFlutter thanku so much but its shows some error while I update build.gradle 4.0.1 because its shows shared preferences plugin not found

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

      @@HeyFlutter hi J Milke, I used multi image picker but its not showing path of selected images too

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

      Sure check these tutorials out below:
      1) Image + Image Picker Tutorial: ua-cam.com/video/JDDoN2THwug/v-deo.html
      2) Share + Pick Files Tutorial: ua-cam.com/video/-PmUFbbA-Fs/v-deo.html
      Check also this Multi Image Picker plugin out: pub.dev/packages/multi_image_picker

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

    I got this error : The getter 'currentContext' isn't defined for the type 'Key'.
    Try importing the library that defines 'currentContext', correcting the name to the name of an existing getter, or defining a getter or field named 'currentContext'.
    What should I do ?
    Please help!

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

      Thank You Aayush Shah! Follow this link: stackoverflow.com/questions/50115416/get-height-of-a-widget-using-its-globalkey-in-flutter
      I hope it will help you 🙂

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

    👌👌
    Awesome tutorial!
    How we can make an VPN app in flutter?
    Would you try ever?
    #thankyou #flutter #stayhealthy

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

      @@HeyFlutter i dont have any idea of which service is using in vpn?
      But the thing is if you how to build an vpn app in flutter then teach us!

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

      You could actually decompile a VPN app and see the code and how it's made, the website to do this is called apkdecompiler

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

    Sources code need to pay or free.

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

      Thanks, Dipendra! 🙂 You can find the source code in the description for this video or check this link out: github.com/JohannesMilke/widget_size_example

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

    Nice one ! This code is outdated

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

      Thanks for your feedback, Harkirat Singh! 🙂

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

    I cant seem to get a RenderBox from a RenderObject, this works but size is not actually correct for me final renderBox = keySizeOfWidget.currentContext!.findRenderObject()! as RenderBox; So im getting 670 which isnt high enough, im starting to dislike flutter to be honest, absolutely awful at times, thanks for the videos though.

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

      i tried to add 2 calc methods because i have some photos loading late but the first one only returns zero.

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

      ok I mosved the key aroudn a bit and trial and errored, got 670+240, but this is still wrong, lol. man flutter.

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

      Thanks for your feedback, TYNEPUNK! 🙂