Flutter UI Widgets

Open the starter 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 stateless widget returns an empty Container in its build method. More on the Container widget later on.

Update the build method as follows:

...
  return const MaterialApp(
    title: 'Flutter UI Widgets',
    home: MainPage(),
  );
...

Here, we returned a 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 snapshot when the user presses the “recent apps” button on Android devices. The display name can also be set in the AndroidManifest.xml file.

Note that on iOS devices, the MaterialApp’s title is not used. Instead you’ll have to set the string of the CFBundleName key in the Info.plist file for it to appear on the open apps list.

Next, we set the home to MainPage which is the default route that would be loaded when the app starts. Flutter offers us the Material component library and Cupertino widgets. Material is based on Google’s design specification for creating user interfaces while Cupertino provides iOS-style widgets.

We would be using MaterialApp since it is optimized for all platforms then later we’ll explore some Cupertino widgets. Let’s create the MainPage widget. Inside the lib folder, go ahead and create main_page.dart file inside a new folder named “pages”.

Update the file as follows:

class MainPage extends StatelessWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter UI Widgets'),
      ),
      body: const Center(
        child: Text('Main Page'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          print('Clicked');
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Here we returned a Scaffold 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 return a Text widget that is placed at the center of the screen with the Center widget.

Finally, the FloatingActionButton returns an Icon as its child widget. It also has an onPressed callback that is executed when this button is pressed. Flutter provides us with some interaction widgets and FloatingActionButton is one of them. We’ll be talking more about adding interactions later in this course.

Save this file. Then head back to the main.dart file and fix the import for the main page. After that, hit the F5 key to run the app in debug mode. You can see the corresponding widget shows up in the app.

Note, in Flutter everything is a widget. To an extent, a Widget can be likened to a View or UIView 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 explore the Container widget. Update your code as follows:

...
return Container(
  margin: cosnt EdgeInsets.all(32),
  padding: cosnt EdgeInsets.all(16),
  width: 200,
  height: 200,
  color: Colors.green,
  child: const Text('Main Page'),
)
...

Save the file. A Container can be used for sizing, painting and to house other widgets. Here, we give it a margin of 32 and a padding of 16. A width and height of 200. We set the color to green and passed in a Text as its child. A padding is the internal space between the Container and its children. While the margin is the space from the external bounds of the container to its suroundings.

To utilizie more of its painting capabilities, we use the decoration property. Update the Container as follows:

...
decoration: BoxDecoration(
  borderRadius: BorderRadius.circular(16),
  border: Border.all(width: 2.0, color: Colors.red),
  color: Colors.green,
),
...

For this code to work, you’ll have to comment out the color property of the Container because it is simply a shortcut for a decoration with a background color.

Save your work. The BoxDecoration class provides ways to paint and draw a box. Here, we used it to add a circular borderRadius and a red border around the Container. It also has additional properties for image, padding, gradients and others.

If you’re coming from the Android ecosystem, you use LinearLayout to lay out Views horizontally or vertically. In Flutter, you use the Row and Column widgets. Update your code to use a Column:

...
child: Column(
  children: <Widget>[
    const Text('1'),
    const Text('2'),
    const Text('3'),
  ],
),
...

Save the file. You can see that the items are arranged vertically. To increase the fontSize, update the code as follows:

const Text('1', style: TextStyle(fontSize: 32)),
const Text('2', style: TextStyle(fontSize: 32)),
const Text('3', style: TextStyle(fontSize: 32)),

You style texts with the TextStyle class. To align its children along its main axis, you use the mainAxisAlignment. Set it up as follows:

mainAxisAlignment: MainAxisAlignment.spaceEvenly,

This adds equal spaces between the children. Note, the main axis of a 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 crosss axis, you use the crossAxisAlignment. Here, the cross axis would be the horizontal axis since it is a Column. Add the following code:

crossAxisAlignment: CrossAxisAlignment.stretch

This sets the children to stretch across the horizontal axis. We can’t really see the effect right now. Let’s wrap the text with a Container and give it a background color. Update your code to the following:

Container(
  color: Colors.blue,
  child: const Text(
    '1',
    textAlign: TextAlign.center,
    style: TextStyle(fontSize: 32),
  ),
),
// Repeat this for the remaining 2 

Save you work. And you can see that the children now stretches from the start to the end along its cross axis. Commenting out the crossAxisAlignment would show you the difference. So without the cross axis.

And with the cross axis.

We can also align the text to the center. We already did that and you see the code here. So if i comment it out,you can see the difference. I’ll put that back in. Add an alignment to the Text widget like so:

textAlign: TextAlign.center

Save your work and you should see the changes. Next is the Row widget. It is similar to the Column widget but arranges its children horizontally. And its alignment axes are the opposite of the Column widget.

Change your Column to a Row. Save your work and you can see it inverts the alignments and arranges the children horizontally. Also, the mainAxis is aligned to space each child evenly. And commenting out the crossAxisAlingnment places the children at the start of the vertical axis. (Do it)