Building a Card Widget

In this section, we will create our very first card widget. We'll create a new Course class and then use a new layout widget called the Stack widget to overlay multiple widgets on top one another to create beautiful looking UI components.


Getting Started

Inside main.dart, we'll replace the SidebarScreen widget with the Container widget as a child for the Scaffold widget.

return MaterialApp(
	debugShowCheckedModeBanner: false,
	home: Scaffold(
		child: Container(),
	),
);


Flutter_06_01


Creating the RecentCourseCard widget

At the bottom of main.dart, type the shortcut stless to create a new stateless widget. Set the name to RecentCourseCard. It should look like this.

class RecentCourseCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

We'll also make a few modification to the Scaffold widget inside the MyApp widget.

  • Wrap the Container widget in a SafeArea widget
Scaffold(
	body: SafeArea(
		child: Container(),
	),
),
  • Set the child of the Container widget to RecentCourseCard
SafeArea(
		child: Container(
			child: RecentCourseCard(),
		),
),
Flutter_06_02

Importing the Course class

Inside our project files, we have a file called course.dart. This file contains the Course class and sample data. Drag and drop it into the model folder.

Flutter_06_03

Pass the Course Data to RecentCourseCard

Just like with all class initializations, we'll need to pass the course argument to RecentCourseCard in order to pass data.

  • Inside main.dart, add the course argument of class type Course to RecentCourseCard
class RecentCourseCard extends StatelessWidget {
  RecentCourseCard({this.course});

  Course course;

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}
  • Pass the sample data to our initialization of RecentCourseCard in MyApp.
RecentCourseCard(
	course: recentCourses[0],
),

Flutter_06_04

Set the Card Background

First we'll create the background of our card. This will involve wrapping our Container widget in a Padding widget, setting the decoration property of our container, and setting some of the constraints.

return Padding(
  padding: EdgeInsets.only(top: 20.0),
  child: Container(
    width: 240,
    height: 240,
    decoration: BoxDecoration(
      gradient: course.background,
      borderRadius: BorderRadius.circular(41.0),
      boxShadow: [
        BoxShadow(
            color: course.background.colors[0].withOpacity(0.3),
            offset: Offset(0, 20),
            blurRadius: 30.0),
        BoxShadow(
            color: course.background.colors[1].withOpacity(0.3),
            offset: Offset(0, 20),
            blurRadius: 30.0)
      ],
    ),
  ),
);
Flutter_06_05

Add the Card Content

Next we need to set the content of our card. This will be the course title, course subtitle, and course illustration. We will use a Column widget to vertically align our content and be the parent widget as a child for our container. So add the child argument to our Container and add the following Column widget.

Column(
  children: [
    Padding(
      padding: EdgeInsets.only(
        top: 32.0,
        left: 32.0,
        right: 32.0,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            course.courseSubtitle,
            style: kCardSubtitleStyle,
          ),
					SizedBox(
            height: 6.0,
          ),
          Text(
            course.courseTitle,
            style: kCardTitleStyle,
          ),
        ],
      ),
    ),
    Expanded(
      child: Image.asset(
        'asset/illustrations/${course.illustration}',
        fit: BoxFit.cover,
      ),
    ),
  ],
),
Flutter_06_06

Using the Stack Widget

Our logo widget will be placed over the card. To place widgets on top of one another, I need to use the Stack widget. This will help with aligning our widgets so they can be one on top of each other.

  • Place your cursor over the parent Padding widget and select OPTION+Return on your keyboard. Select Wrap with widget and set the widget to Stack. You will then need to add the children argument and wrap the Padding widgets in square brackets
return Stack(
	children: [
		Padding(...),
	],
)
  • Set the alignment for the Stack widget
return Stack(
	alignment: Alignment.topRight,
	children: [
		Padding(...),
	],
)
Flutter_06_07

Create the Logo Widget

Right underneath the first Padding widget inside our Stack widget, we need to create a new Padding widget that will house the logo of the course.

Padding(
  padding: EdgeInsets.only(right: 42.0),
  child: Container(
    child: Image.asset('asset/logos/${course.logo}'),
    width: 60.0,
    height: 60.0,
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(18.0),
      boxShadow: [
        BoxShadow(
          color: kShadowColor,
          offset: Offset(0, 4),
          blurRadius: 16.0,
        ),
      ],
    ),
    padding: EdgeInsets.all(12.0),
  ),
),
Flutter_06_08

Refactor Code

Now that we're done creating our code, let's arrange our code a little better.

  • First, I will remove all the unused packages at the top of main.dart. They will be greyed out
  • Next, I'll create a new folder in our components folder called cards
  • Inside the cards folder, I'll create a new Dart file called recentcoursecard.dart
  • I'll cut the entire code which created our RecentCourseCard widget and paste it inside this new file
Flutter_06_09