Classes in Dart

In this section, you will learn how to create classes in Dart. Classes are important to any object oriented programming language. With the help of classes, we will build the SidebarItem class that can be used to dynamically change our sidebar item. We'll also learn about refactoring our code for easier readability and how to import and use the assets inside our Project Files folder.


Downloads

To follow this course, you can download the source 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

Select the lib folder and press CMD+N on your keyboard. Create a new Dart file and name it model/sidebar. This will create a new sidebar.dart file inside a newly created model folder. We will use this file to create the sidebar class.

Creating the SidebarItem class

At the top of the file, we will need to import the Material library. This will give us access to all the widgets and data types, most notably the LinearGradient widget.
Taking a look at our current sidebar item, we have 3 customizable properties: the title, the icon, and the background gradient. So we'll create a class to take those three properties as input.

import 'package:flutter/material.dart';
class SidebarItem {
SidebarItem({this.title, this.background, this.icon});
String title;
LinearGradient background;
Icon icon;
}

Flutter_S04_01

Adding the Sample Data

Now before we go and use this class, we'll need to actually create some sample data to use. You can copy the sample data I have below and paste it right under where we defined the SidebarItem class.

var sidebarItem = [
SidebarItem(
title: "Home",
background: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xFF00AEFF),
Color(0xFF0076FF),
],
),
icon: Icon(
Icons.home,
color: Colors.white,
),
),
SidebarItem(
title: "Courses",
background: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Color(0xFFFA7d75), Color(0xFFC23D61)]),
icon: Icon(
Icons.library_books,
color: Colors.white,
),
),
SidebarItem(
title: "Billing",
background: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Color(0xFFFAD64A), Color(0xFFEA880F)]),
icon: Icon(
Icons.credit_card,
color: Colors.white,
),
),

SidebarItem(
title: "Settings",
background: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Color(0xFF4E62CC), Color(0xFF202A78)],
),
icon: Icon(
Icons.settings,
color: Colors.white,
),
),
];


Extracting a Widget

Go back to main.dart. We now need to create four instances of the Row widget. However, if we copied and pasted that code four times, it wouldn't be good design practice. So what we need to do is extract the Row widget and all its sub-children to name it something else. The follow steps should be followed to extract a widget.

  • Place your cursor on the Row widget
  • Select Flutter Outline from the right hand side pane
  • CNTRL+Select the Row widget in the hierarchy tree and select Extract Widget
  • Name this new widget. We'll call this SidebarRow


A new stateless widget is created called SidebarRow that returns the Row widget. and our whole code containing the Row widget is replaced with just SidebarRow.
Note: If your Flutter Outline menu is empty, CMD+Click on any keyword inside your code. This will force Flutter Outline to refresh its menu. Then, go back and you should see the hierarchy tree inside Flutter Outline
Flutter_S04_02

Passing the SidebarItem to the SidebarRow

While our SidebarRow is created, it is using static values like the blue gradient background or the home icon. To pass a SidebarItem, we need to change SidebarRow to the following.

class SidebarRow extends StatelessWidget {
SidebarRow({@required this.item}); final SidebarItem item; @override
Widget build(BuildContext context) {
return Row(
children: [
Container(
width: 42.0,
height: 42.0,
padding: EdgeInsets.all(10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(14.0),
gradient: item.background,
),
child: item.icon,
),
SizedBox(width: 12),
Container(
child: Text(

item.title,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w800,
color: Color(0xFF242629),
),
),
),
],
);
}
}

Flutter_S04_03

Passing the Data


Inside our MyApp widget, we need to add the item argument to our SidebarRow. This is a simple fix and requires us to change SidebarRow to:

SidebarRow(item: sidebarItem[3])


Here we are using the fourth item from the sample data we created earlier.
Note: Although Android Studio should do this automatically, if you get an error saying sidebarItem is not defined, then the sidebar.dart file has not been imported at the top. Make sure this is imported to access the SidebarItem class and sample data.
Flutter_S04_04

Refactor Code

Inside the lib folder, create a new folder called components, and inside this folder, create a new Dart file called sidebar_row.dart. At the top of the file, import the Material library by typing:

import 'package:flutter/material.dart';


Go back to main.dart and cut the entire code defining our SidebarRow widget. Paste it into this new file right under where we imported the Material package.
You may get an red squiggly line right underneath the SidebarItem keyword. This indicates that Flutter does not know what this keyword is since we have not imported the file referencing this. To fix this:

  • Hover over the error keyword
  • Select the red lightbulb
  • From the menu that shows up, select the option that begins with Import library

Flutter_S04_05

Remove Debug Banner

If you notice in our simulator, we have an unpleasant looking banner in the top right corner. While this banner is useful for letting developers know they are running a debugging version of the app, it's probably better to remove this so it won't interfere with our design.
Inside main.dart and the MyApp class, add the following argument.

return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: SidebarRow(

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


By setting the debugShowCheckedModeBanner to False, we can remove the banner from our preview.
Flutter_S04_06

YAML File

The pubspec.yaml can be used to declare what dependencies and packages our project needs. We'll modify this to add our assets and fonts. At the bottom of the file, where we have the flutter section, change it to look like the following.

# The following section is specific to Flutter.
flutter:
uses-material-design: true
assets:
- asset/badges/
- asset/certificates/
- asset/icons/

- asset/illustrations/
- asset/images/
- asset/logos/
fonts:
- family: SF Pro Text
fonts:
- asset: asset/fonts/SFProText-Regular.ttf
- asset: asset/fonts/SFProText-Bold.ttf
weight: 800


This will import the assets and define the font and font families needed to use within the app. Finally, at the top, select pub get and this will begin adding all the dependencies and assets in our YAML file.
Flutter_S04_07