Flutter Center Widget - Flutter Widget Essentials #1 | Flutter Tutorial

[Music] okay so let's say we have a simple app in which we have only one textview on the screen and it is sticking to the top-left corner of the screen so what a center widget lets us do is well it helps us Center the widget but whose center so to use the center widget in Android studio what I can do is I can click on this text here and click on alt enter and it will prompt me with the options and I can click on wrap with widget and what I will do is I will wrap the text with a center widget and if I click on save now and it will heart reload the app into the emulator and what you can see is the text is in the center of the screen so basically what a center widget does is it takes the width and height of the parent and it centers the said widget that is the child of the center widget into the center of its parent so by default the center is having the width and height of its parent so what if you want to change that so other than this child property center is also having two other properties that are called height vector and width vector so let's take a look at height factor first so let's say I move the child down and add a high factor here and what a height vector will do it will take the height of this textview and it will multiply this height by the height vector and it will assign that height to the center so right now in the emulator we have a textview in the center here and if I add a high factor of two and if I save the app again so now what you can see is that the textview is no longer in the center of the whole scaffold so why is that so basically what's happening is that the center is taking the height of the textview and multiplying that by the height factor and then assigning the height to the center itself so right now the center is taking this much height and is centering the textview inside of that and you can also see that the width of the center is the exact same width of the scaffold this is because we're not using the width vector right now so let's take a look at it so if I go down here and add a width factor also and give it a value of two and then save it so now you can see that the width of the center is no longer the width of the scaffold it is twice the width of the textview that is the child off-center so basically what Center is doing right now it's taking the width and height of the textview and then multiplying that width and height by the width and height vector that is to at this point so the width of the Center is going to be twice of it tough textview and the height of Center is going to be twice the height of textview and it's centering the textview inside of it so you can say that the child is the most important property of the center and if you want to adjust the width and height of the center you can use the properties called width vector and height vector so hope you have a clear understanding of flutter Center widget and if you find this video useful make sure to subscribe to retro portal studio for more flutter widget essential videos see you next time peace [Music]

Channel: RetroPortal Studio

Views: 12,518

Keywords: flutter, flutter ui, flutter tutorial, flutter tutorial for beginners, flutter widget essentials, flutter center widget, center widget in flutter, flutter center widget in detail, flutter widgets in detail, flutter retroportal studio, flutter widgets in depth, flutter dart, flutter app development, flutter ui app development, flutter essentials video 1, flutter widget essentials center widget, flutter ui for beginners, flutter widgets for beginners

Id: c726pWTtxqI

Length: 3min 13sec (193 seconds)

Published: Sun Mar 15 2020