Beginning Flutter - Intermediate - Using Common Widgets

[Music] in this video you're gonna take a look at how to use basic widgets such as the scaffold app bar safe area container text rich text column row as well as different types of buttons you'll learn how to use the most common wages I called them our base building blocks for creating beautiful user interfaces in user experiences the scaffold widget implements the basic material design visual layout allowing you to easily add various widgets such as the app bar bottom app bar a floating action button a drawer snack bar bottom sheet and more the app bar widget usually contains a standard title toolbar leading and action properties you know along with buttons as well as many customization options the title property is typically implemented with a text widget you can customize it with other widgets such as a drop down widget the leading property is displayed before the title property usually this is an icon button or a back button the actions property is displayed to the right of the title property it's a list of widgets aligned to the upper right of an app bar usually with an icon button in a pop-up menu button the flexible space property is stacked behind the toolbar or the tab bar widget the height is usually the same as the F bars widgets height the background image is commonly applied to the flexible space property but anyway Jade such an icon could be used the safe area widget is necessary for today's devices such as the iPhone 10 or Android devices with a notch a partial cutout obscuring the screen usually located on the top portion of the device the safe area widget automatically as sufficient padding to the child widget to avoid intrusions by the operating system you can optionally pass a mineral month of padding or boolean value to not enforce padding on the top bottom left or right the container widget is a commonly used widget that allows customization of its child widget you can easily add properties such as color with high padding margin border constraint alignment transform such as a rotating or a sizing the widget and many others the child property is optional and the container widget can be used as an anti placeholder like invisible to add space between widgets the text widget is used to display a string of characters the text constructor takes the argument string style max lines overflow text align and others the constructor is how the arguments are passed to initialize and customize the text which the rich text widget is a great way to display text using multiple styles the rich text widget takes text bands as children to style different parts of the strings a column widget displays its children vertically it takes a children property containing an array of lists of widget meaning you can add multiple widgets the children are lined vertically without taking up to full height of the screen each child widget can be embedded and expended widget to fill the available space cross axis alignment main axis alignment and main exercise can be used to align in size a much space is occupied on the main axis a religion displaces children horizontally it takes a children property containing an array of list widget the same properties that the column contains are applied to the row widget with the exception that the alignment is horizontal and not vertical there are a variety of buttons to choose from for different situations such as a raised button floating action button a flat button an icon button pop a menu button and button bar [Music]

Channel: JediPixels

Views: 41,634

Rating: 4.9871216 out of 5

Keywords: Flutter, Dart, iOS, Android, Mobile

Id: WOvj84xq_fc

Length: 4min 44sec (284 seconds)

Published: Wed Jan 29 2020

Reddit Comments

[u/arunlokas]

Helpful,....

[u/jsdom23]

Hey, i did not watched yet but i recognized you took the images from the book that I am reading. I have question in Chapter 6 of the that book on the last part regarding the textformfield as i do not know how to complete the validation form. I would be glad if you make the video on that part? Thank you!