Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

10
Building Layouts

WHAT YOU WILL LEARN IN THIS CHAPTER

How to create simple and complex layouts
How to combine and nest widgets
How to combine vertical and horizontal widgets to create a custom layout
How to build the UI layout by using widgets such as SingleChildScrollView, SafeArea, Padding, Column, Row, Image, Divider, Text, Icon, SizedBox, Wrap, Chip, and CircleAvatar

In this chapter, you'll learn how to take individual widgets and nest them to build a professional layout. This concept is known as composition and is a huge part of creating Flutter mobile apps. Most of the time you can build simple or complex layouts either using vertical or horizontal widgets or using a combination of both.

A HIGH‐LEVEL VIEW OF THE LAYOUT

This chapter's goal is to create a journal entry page displaying details from top to bottom. The journal page shows the header image, title, diary detail, weather, (journal location) address, tags, and footer images. The weather, tags, and footer images sections are built by nesting widgets to build a custom layout (Figure 10.1).

Screenshot of journal detail page layout. — **FIGURE 10.1**: Journal detail page layout

Starting with a high‐level view, let's break down the main parts of the layout that forms the foundation. A great way to start laying out the journal entry is to add layers from the bottom toward the top, the same way you stack paper. Figure 10.2 shows the journal page layout structure.

Screenshot of high-level view. — **FIGURE 10.2**: High‐level view

Since mobile devices are available in different sizes, the layout starts by adding a SingleChildScrollView to automatically handle scrolling for portions of the screen that are cut off by smaller devices.
Next a Column widget is used to align widgets vertically from the top toward the bottom of the screen.
For the wrapped gift image, the Image widget is added as the first child of the first Column, allowing the image to fill the full width of the device.
The first Column child is a SafeArea widget to handle the device notch for the journal entry content.
Add to the SafeArea child a second Column with children widgets composed of a Text widget for the journal entry title and a Text widget for the journal entry details.
Continue adding to the second Column children a Row widget that will contain the weather icon, the weather temperature, and the journal entry location address. In the “Weather Section Layout” section of this chapter, you will learn to add widgets to create the detailed layout.
Continue by adding to the second Column children a Wrap widget displaying the Chip widgets. You'll learn to add layout widgets in the “Tags Layout” section.
Lastly, you'll add to the second Column a Row widget to display images and icons, and you'll learn how to add layout widgets in the “Footer Images Layout” section of this chapter.

Weather Section Layout

Each journal entry records the weather, temperature, and location at the time of entry to recall the details at a later time. To provide that information, you're including a journal entry weather section. Using a Row, you add two Column widgets and one SizedBox widget. The first Column contains an Icon to show the weather symbol. The second Column contains two Row widgets. The first Row has a Text showing the weather temperature and description. The second Row has a Text showing the location address of the journal entry (Figure 10.3).

Screenshot of weather section. — **FIGURE 10.3**: Weather section

Tags Layout

To organize each journal entry and facilitate searching, you use tags to add categories to the entry. Tags are items such as movie, family, birthday, vacation, and so on. The tags section uses a Wrap widget with a children list of Chip widgets. When you have a list of items that can be of different lengths and an unknown number of items, nesting them in a Wrap widget lays out each child automatically according to available space (Figure 10.4).

Screenshot of tags section — **FIGURE 10.4**: Tags section

The Chip widget is a great way to group information and customize the presentation look and feel. Setting the label property is the only requirement but most of the time it's used by setting the avatar property with an Icon or an Image widget. By default the Chip widget is a gray stadium (rectangle with large semicircles on the ends at opposite sides) shape but you can customize it by using the shape property and the backgroundColor property. The following sample code shows a customized Chip widget that displays the label and avatar in a rectangular shape with small rounded corners. The RoundedRectangleBorder class returns the rectangular border with rounded corners.

Chip(
 label: Text('Vacation'),
 avatar: Icon(Icons.local_airport),
 shape: RoundedRectangleBorder(
  borderRadius: BorderRadius.circular(4.0),
  side: BorderSide(color: Colors.grey),
 ),
 backgroundColor: Colors.grey.shade100,);

Footer Images Layout

It is said that a picture is worth a thousand words, and the footer section allows you to add photos to each journal entry to bring back memories. The footer sections use a Row with a CircleAvatar widget showing different images. At the end of the Row, a SizedBox is used to space the child Column to the end. The Column shows vertically aligned Icons (Figure 10.5).

Screenshot of footer section. — **FIGURE 10.5**: Footer section

Final Layout

You looked at how to lay out each section of the journal detail page. By nesting widgets, you build custom or complex layouts known as composition. The power of nesting widgets to create beautiful UIs is limited only by your imagination. Figure 10.6 shows the journal detail page and the three main customized sections for the weather, tags, and footer images.

CREATING THE LAYOUT

When creating the layout, it's good to start from a high‐level view and then work your way down to each detailed section. By taking each section of the page, you start to analyze the requirements and format as needed. For example, if a particular section lays out the items horizontally, you start with a Row; if the section's layout is vertical, you start with a Column. Then you look at the display requirements and start breaking down data into its own sections by nesting widgets.

TRY IT OUT Creating the Layout App

In our example, the main body contains a SingleChildScrollView with the child as a Column. The Column list of widgets contains a header Image followed by a SafeArea with Padding as a child. The Image fits the entire width of the device, but the journal entries are contained in the SafeArea with a Padding to format the entry.

The Padding child is a Column with a list of widgets breaking down each section of the journal entry separated by a Divider widget. Each separate section is called by the _buildJournalHeaderImage(), _buildJournalEntry(), _buildJournalWeather(), _buildJournalTags(), and _buildJournalFooterImages() methods.

You are creating a journal entry page displaying details from top to bottom. The journal page shows the header image, title, diary detail, weather, address, tags, and footer images. The weather, tags, and footer images sections are built by nesting widgets to build a custom layout.

In this example, to keep the widget tree shallow, you'll use methods instead of widget classes. This is a great example of using the appropriate technique for each situation. The purpose of the journal entry is to view the details, and it does not require changes, which is why you use methods to keep the widget tree shallow. But if this page requires refreshing portions of the screen based on outside data changes, then using widget classes could be the better solution, because only the portion of the screen that changes is rebuilt.

Create a new Flutter project and name it ch10_layouts. You can follow the instructions in Chapter 4, “Creating a Starter Project Template.” For this project, you need to create only the pages and assets/images folders. Create the Home Class as a StatelessWidget since the data does not require changes.

Open the pubspec.yaml file to add resources. In the assets section, add the assets/images/ folder.

  # To add assets to your application, add an assets section, like this:
  assets:
   - assets/images/

Click the Save button, and depending on the Editor you are using, it automatically runs flutter packages get, and once finished, it will show a message of Process finished with exit code 0. If it does not automatically run the command for you, open the Terminal window (located at the bottom of your editor) and type flutter packages get.
Add the folder assets and subfolder images at the project's root, and then copy the present.jpg, salmon.jpg, asparagus.jpg, and strawberries.jpg files to the images folder. Since this example focuses on how to lay out a screen, the images are included in the assets/images folder, but in an actual application, the user would choose the images and they would be saved to the device instead.

Open the home.dart file and add to the body the _buildBody() method. For this project, customize the AppBar widget by changing the backgroundColor, iconTheme, brightness, leading, and actions properties, as shown in the following code. Making the AppBar changes is purely cosmetic to make the app look great. In Chapter 6, “Using Common Widgets,” you learned that the Icon widget is drawn with a glyph from a font described in the IconData. You have available a full list of icons from the MaterialIcons font.

  Widget build(BuildContext context) {
   return Scaffold(
    appBar: AppBar(
     title: Text(
      'Layouts',
      style: TextStyle(color: Colors.black87),
     ),
     backgroundColor: Colors.white,
     iconTheme: IconThemeData(color: Colors.black54),
     brightness: Brightness.light,
     leading: IconButton(icon: Icon(Icons.menu), onPressed: () {}),
     actions: <Widget>[
      IconButton(icon: Icon(Icons.cloud_queue), onPressed: () {})
     ],
    ),
    body: _buildBody(),
   );
  }

Add the _buildBody() widget method after Widget build(BuildContext context) {…}.
Return a SingleChildScrollView with the child as a Column. The Column children list of widgets is calling all the methods to create each section of the page. Note that the first method, _buildJournalHeaderImage(), is positioned before the SafeArea and Padding, allowing the Image to fill the full width of the device.

Add a Column as a child of the Padding and then call the _buildJournalEntry(), _buildJournalWeather(), _buildJournalTags(), and _buildJournalFooterImages() methods.

  Widget _buildBody() {
   return SingleChildScrollView(
    child: Column(
     children: <Widget>[
      _buildJournalHeaderImage(),
      SafeArea(
       child: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(         crossAxisAlignment: CrossAxisAlignment.start,
         children: <Widget>[
          _buildJournalEntry(),
          Divider(),
          _buildJournalWeather(),
          Divider(),
          _buildJournalTags(),
          Divider(),
          _buildJournalFooterImages(),
         ],
        ),
       ),
      ),
     ],
    ),
   );
  }

Create the _buildJournalHeaderImage() method, which returns an Image. The image property uses AssetImage present.jpg with fit set to BoxFit.cover, allowing the Image to fill the full width of the device.
```
  Image _buildJournalHeaderImage() {
   return Image(
    image: AssetImage('assets/images/present.jpg'),
    fit: BoxFit.cover,
   );
  }
```

Create the _buildJournalEntry() method, which returns a Column. The Column children list of widgets contains two Text widgets and one Divider() widget.

  Column _buildJournalEntry() {
   return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
     Text(
      'My Birthday',
      style: TextStyle(
       fontSize: 32.0,
       fontWeight: FontWeight.bold,
      ),
     ),
     Divider(),
     Text(
      'It’s going to be a great birthday. We are going out for dinner at my favorite place, then watch a movie after we go to the gelateria for ice cream and espresso.',
      style: TextStyle(color: Colors.black54),
     ),
    ],
   );
  }

Create the _buildJournalWeather() method, which returns a Row. The Row children list of widgets contains a Column, a SizedBox, and another Column. The second Column list of widgets contains two Row widgets.

  Row _buildJournalWeather() {
   return Row(
     crossAxisAlignment: CrossAxisAlignment.start,
     children: <Widget>[
      Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: <Widget>[
        Icon(
         Icons.wb_sunny,
         color: Colors.orange,
        ),
       ],
      ),
      SizedBox(width: 16.0,),
      Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: <Widget>[
        Row(
         children: <Widget>[
          Text(
           '81º Clear',
           style: TextStyle(color: Colors.deepOrange),
          ),
         ],
        ),
        Row(
         children: <Widget>[
          Text(
           '4500 San Alpho Drive, Dallas, TX United States',
           style: TextStyle(color: Colors.grey),
          ),
         ],
        ),
       ],
      ),
     ],
    );
  }

Create the _buildJournalTags() method, which returns a Wrap. The Wrap children use the List.generate constructor to build the sample data list to show seven sample tag values. The constructor takes two arguments, the length of the list and the index.

  Wrap _buildJournalTags() {
   return Wrap(
    spacing: 8.0,
    children: List.generate(7, (int index) {
     return Chip(
      label: Text(
       'Gift ${index + 1}',
       style: TextStyle(fontSize: 10.0),
      ),
      avatar: Icon(
       Icons.card_giftcard,
       color: Colors.blue.shade300,
      ),
      shape: RoundedRectangleBorder(
       borderRadius: BorderRadius.circular(4.0),
       side: BorderSide(color: Colors.grey),
      ),
      backgroundColor: Colors.grey.shade100,
     );
    }),
   );
  }

Create the _buildJournalFooterImages() method, which returns a Row. The Row children list of widgets contains three CircleAvatars and a SizedBox. The SizedBox child is a Column with a children list of Widget of three Icons. The main purpose of the SizedBox is adding extra spacing between the CircleAvatar and the vertically placed Icons.

  Row _buildJournalFooterImages() {
   return Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
     CircleAvatar(
      backgroundImage: AssetImage('assets/images/salmon.jpg'),
      radius: 40.0,
     ),
     CircleAvatar(
      backgroundImage: AssetImage('assets/images/asparagus.jpg'),
      radius: 40.0,
     ),
     CircleAvatar(
      backgroundImage: AssetImage('assets/images/strawberries.jpg'),
      radius: 40.0,
     ),
     SizedBox(
      width: 100.0,
      child: Column(
       crossAxisAlignment: CrossAxisAlignment.end,
       children: <Widget>[
        Icon(Icons.cake),
        Icon(Icons.star_border),
        Icon(Icons.music_note),
        //Icon(Icons.movie),
       ],
      ),
     ),
    ],
   );
  }

HOW IT WORKS

You first created a high‐level view by breaking down the main sections of the page. At the base you used a SingleChildScrollView and consecutively built on top a Column, header Image, SafeArea, Padding, and a Column with a children list of Widget that build each section separately. You broke them down to four separate sections and built them by calling the _buildJournalEntry(), _buildJournalWeather(), _buildJournalTags(), and _buildJournalFooterImages() methods. Each of these methods creates a custom layout by nesting widgets.

SUMMARY

In this chapter, you learned how to envision a high‐level custom layout and break it down into its main sections. Then you took each main section and built the layout needed by nesting widgets.

In the next chapter, you'll learn to add interactivity by using the GestureDetector, Draggable, DragTarget, InkWell, and Dismissable widgets.

WHAT YOU LEARNED IN THIS CHAPTER

TOPIC	KEY CONCEPTS
Getting a high‐level view	Break down the page into main sections.
Creating simple and complex layouts	Separate and nest widgets.
Creating a custom layout	Lay out and use widgets such as `SingleChildScrollView`, `SafeArea`, `Padding`, `Column`, `Row`, `Image`, `Divider`, `Text`, `Icon`, `SizedBox`, `Wrap`, `Chip`, and `CircleAvatar`.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.

Table of Contents for 10 Building Layouts

Create new playlist

Sign In

Sign Up