How to use basic widgets such as Scaffold, AppBar, SafeArea, Container, Text, RichText, Column, and Row, as well as different types of buttons in Flutter

In this article, you’ll learn how to use the most common widgets. I call them our base building blocks for creating beautiful UIs and UXs. You’ll learn how to load images locally or over the Web via a uniform resource locator (URL), use the included rich Material Components icons, and apply decorators to enhance the look and feel of widgets or use them as input guides to entry fields. You’ll also explore how to take advantage of the Form widget to validate text field entry widgets as a group, not just individually. Additionally, to account for the variety of device sizes, you'll see how using the MediaQuery or OrientationBuilder widget is a great way to detect orientation—because using the device orientation and layout widgets accordingly based on portrait or landscape is extremely important. For example, if the device is in portrait mode, you can show a row of three images, but when the device is turned to landscape mode, you can show a row of five images since the width is a larger area than in portrait mode.

BASIC WIDGETS

When building a mobile app, you’ll usually implement certain widgets for the base structure. Being familiar with them is necessary.

• Scaffold “Creating a Starter Project Template,” the Scaffold widget implements the basic Material Design visual layout, allowing you to easily add various widgets such as AppBar, BottomAppBar, FloatingActionButton, Drawer, SnackBar, BottomSheet, and more.
• AppBar The AppBar widget usually contains the standard title, toolbar, leading, and actions properties (along with buttons) and many customization options.
• title The title property is typically implemented with a Text widget. You can customize it with other widgets such as a DropdownButton widget.
• leading The leading property is displayed before the title property. Usually this is an IconButton or BackButton.
• actions 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 AppBar widget usually with an IconButton or PopupMenuButton.
• flexibleSpace The flexibleSpace property is stacked behind the Toolbar or TabBar widget. The height is usually the same as the AppBar widget's height. A background image is commonly applied to the flexibleSpace property, but any widget, such as an Icon, could be used.
• SafeArea The SafeArea widget is necessary for today's devices such as the iPhone X or Android devices with a notch (a partial cut‐out obscuring the screen usually located on the top portion of the device). The SafeArea widget automatically adds sufficient padding to the child widget to avoid intrusions by the operating system. You can optionally pass a minimum amount of padding or a Boolean value to not enforce padding on the top, bottom, left, or right.
• Container The Container widget is a commonly used widget that allows customization of its child widget. You can easily add properties such as color, width, height, padding, margin, border, constraint, alignment, transform (such as rotating or sizing the widget), and many others. The child property is optional, and the Container widget can be used as an empty placeholder (invisible) to add space between widgets.
• Text The Text widget is used to display a string of characters. The Text constructor takes the arguments string, style, maxLines, overflow, textAlign, and others. A constructor is how the arguments are passed to initialize and customize the Text widget.
• RichText The RichText widget is a great way to display text using multiple styles. The RichText widget takes TextSpans as children to style different parts of the strings.
• Column A Column widget displays its children vertically. It takes a children property containing an array of List<Widget>, meaning you can add multiple widgets. The children align vertically without taking up the full height of the screen. Each child widget can be embedded in an Expanded widget to fill the available space. CrossAxisAlignment, MainAxisAlignment, and MainAxisSize can be used to align and size how much space is occupied on the main axis.
• Row A Row widget displays its 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, not vertical.
• Buttons There are a variety of buttons to choose from for different situations such as RaisedButton, FloatingActionButton, FlatButton, IconButton, PopupMenuButton, and ButtonBar.