Building a Full Screen Widget

In this section, we will create the rest of our sidebar. We'll take a look at a couple of new layout widgets and how to use the images and fonts we imported.


Downloads

To follow thiscourse, you can download thesource file, which will help you compare your progress.

Source Code

You can also view the source code for each section in the course in my GitHub repository.

Getting Started

Start by going to the sidebar_row.dart file. We'll need to change the text style here.
Flutter_S05_01

Using a Text Style

At the bottom of the SidebarRow stateless widget, we'll change the style of our Text widget.

  • Remove the style argument
Text(
  item.title,
)

  • Replace it with a predefined text style
Text(
  item.title,
  style: kCalloutLabelStyle,
)

Flutter_S05_02

Creating the SidebarScreen

Go to main.dart and extract the Center widget. Name this new widget SidebarScreen and remove the predefined initialization. It should now look like this.

class SidebarScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: SidebarRow(

item: sidebarItem[3],
),
);
}
}

Flutter_S05_03

Designing the SidebarScreen

To make our sidebar item button more visible, we'll need to change the Center widget to a Container widget and decorate our container. This includes setting the background color, border radius, height, width, and padding.

class SidebarScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: kSidebarBackgroundColor,
borderRadius: BorderRadius.only(
topRight: Radius.circular(34.0),
),

),
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width * 0.85,
padding: EdgeInsets.symmetric(
vertical: 35.0,
horizontal: 20.0,
),
child: SafeArea(
child: SidebarRow(
item: sidebarItem[3],
),
),
);
}
}

Flutter_S05_04

Sidebar Header

The sidebar header will contain our profile picture, two labels containing our name and when our license expires. Then we will add adequate spacing in between the header and our sidebar item button.

First, I'll wrap the SidebarRow widget inside a Column widget. Then, I can add the following code.

Column(
children: [
Row(
children: [
CircleAvatar(
backgroundImage: AssetImage('asset/images/profile.jpg'),
radius: 21.0,
),
SizedBox(
width: 15.0,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Sai Kambampati",
style: kHeadlineLabelStyle,
),
SizedBox(height: 4),
Text(
"License ends on 21 Jan, 2021",
style: kSearchPlaceholderStyle,
)
],
),
],

),
SizedBox(
height: MediaQuery.of(context).size.height * 0.08,
),
SidebarRow(
item: sidebarItem[3],
),
],
)

Flutter_S05_05

Remaining sidebar items

Next, we need to add the remaining sidebar items. Lucky for us, because of refactoring, we are able to add the remaining items quite easily.

  • Change the index value from 3 to 0

SidebarRow(
item: sidebarItem[0],
),


  • Add a SizedBox widget with a height of 32.0 pixels underneath the above SidebarRow widget. This will create the spacing between all the SidebarRow widgets.
SizedBox(
height: 32.0,
),


  • Select both the SidebarRow and SizedBox widgets and press CMD+D 3 more times. This will duplicate the selected code. Now change the indices of SidebarRow for the second, third, and fourth SidebarRow widgets.
SidebarRow(
item: sidebarItem[1],
),
SizedBox(
height: 32.0,
),
SidebarRow(
item: sidebarItem[2],
),
SizedBox(
height: 32.0,
),
SidebarRow(
item: sidebarItem[3],
),
SizedBox(
height: 32.0,
),

Flutter_S05_06

Logout Button

After the sidebar items, we want the logout button to be place at the very bottom of our SidebarScreen. So after the last SizedBox widget, we'll have to add two widgets.

  • The first widget is a Spacer widget. This will push all the content after to the bottom.
Spacer(),
  • The next widget is a Row widget that will contain an Image widget, a SizedBox widget for spacing, and a Text widget.

Row(
children: [
Image.asset(
'asset/icons/icon-logout.png',
width: 17.0,
),
SizedBox(
width: 12.0,

),
Text(
"Log out",
style: kSecondaryCalloutLabelStyle,
),
],
)

Flutter_S05_07

Refactoring

Now that we have our SidebarScreen widget complete, let's move it out of the main.dart file. Cut the entire code for SidebarScreen out of main.dart. Create a new folder inside of the lib folder titled screens. Inside this folder, create a new file called sidebar_screen.dart.

At the top of this file, import the Material package.

import 'package:flutter/material.dart';


Then, paste the code below. You may have to import the extra libraries by hovering over the keywords with the error lines, clicking on the red lightbulb, and selecting the first item in the popup menu that shows up. You may need to do the same in main.dart for the SidebarScreen widget.
Flutter_S05_08