Flutter UI Widgets

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

Open up the startup project for this episode in Visual Studio Code. I'm using version 1.60. Inside the main.dart file, you have the main method that runs the root widget of the application. The root widget, MyApp, which is a StatelessWidget, returns an empty Container in its build method. More on the Container widget later on. Now, update the build method to the following. Here, we return the MaterialApp and set its title and home properties to Flutter UI Widgets and MainPage respectively. The title is used by the device to identify the app. For example, the title is displayed beside the app snapshots when the user presses the recent button on Android devices. The display name can also be set in the Android manifest.xml file. Note that, on iOS devices, the MaterialApp's title is not used. Instead, you have to set the string of the CFBundleName key in Info.plist file for it to appear on the Open Apps list. Next, we set home to MainPage, which is the default route that will be loaded when the app starts. Flutter offers us the Material Component library and the Cupertino widgets. Material is based on Google's design specification for creating user interfaces, while, Cupertino provides iOS-styled widgets. We'll be using MaterialApp, since it is optimized for all platforms, then later, we'll explore some Cupertino widgets. Let's create the MainPage widgets. Inside the lib folder, go ahead and create main_page.dart file inside a new folder named pages. And then, you update the file to the followin'. In here, we return the Scaffold widgets, which is just a layout structure for an app screen that implements Material Design guideline. The AppBar, returns a text widget as its title. The body returns a text widget, as it's placed at the center of the screen using the Center widgets. Finally, the FloatingActionButton return an Icon as its child widgets. It's also has an onPressed callback function that is executed when the button is pressed. Flutter provides us with some interaction widgets and FloatingActionButton is one of them. We'll be talking more about interactions later on in the course. Now, save this file. Then head back to main.dart file and fix the import for the main_page. After that, you hit the F5 key to run the app in debug mode. You can see the corresponding widget shows up in the app. Notes, in Flutter, everything is a widget. To an extent, a widget can be likened to a view or UI view in Android and iOS, respectively. They are not exactly the same, but the idea can be useful while getting used to how UIs are constructed in Flutter. Next, let's next explore the Container widgets. Update your code to the following. And save the file. A container can be used for sizin', paintin' and to house other widgets. Here, we give it a margin of 32 and a padding of 16 and also the width and height of 200. We set the color to green and pass in a Text as its child. The padding is the internal space between the Container and its children, while the margin is a space from the external bounds of the Container to its surroundings. To utilize more of the painting capabilities of the Container, we use the decoration property. Update the Container as follows. For this code to work, you have to comment out the color property of the Container because it's a simply a shortcut for a decoration with the background color. Now, save your work. The BoxDecoration class provides ways to paint and draw a box. And in here, we used it to add a circular BorderRadius and a red border around the Container. It's also has additional properties for image, paddin', gradients, and others. Now, if you're coming from the Android ecosystem, you use the LinearLayout to layout views horizontally or vertically. In Flutter, you use the Row and Column widgets. Update your codes to use a Column. Save the file. You can see that the items are arranged vertically. To increase the font size, update the code as follows. We use the TextStyle class to style text, and that is just what we did. To align its children along its main axis, you use the mainAxisAlignment. Set it up as follows. This adds equal spaces between the children. Notes, the main axis of the column is the vertical axis. The mainAxisAlignment can be set to other values. And here are the different options you can set. I'll leave you to play around with them. To align its children along its cross axis, you use the crossAxisAlignment. Here, the cross axis by column would be the horizontal axis. Add the following code. This sets the children to stretch across the horizontal axis. We can't really see the effect right now. Let's wrap the text to the Container and give it a background color to make it stand out. Update your code to the followin'. And save your work. And you can see that the children now stretches from the starts to the end along its cross axis. Commenting out the crossAxisAlignment will show you the difference. So, without the crossAxisAlignment and with the crossAxisAlignment. We can also align the text to the center. We already did that and you can see the code here. So, if I comment it out, you can see the difference. And I'll put that back in. Next is the Row widgets. It is similar to the Column widgets, but arranges its children horizontally. And its alignment axis are the opposite of the Column widgets. Note that both the Row and Column widgets are called Flex widgets. Now, to use the Row widget, change your Column to a Row. Save your work. And you can see it inverts the alignment and arranges the children horizontally. Also, the main axis are lined to space each child evenly. And commenting out the crossAxisAlignment places the children at the start of the vertical axis.