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(),
	),
);



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.

Scaffold(
	body: SafeArea(
		child: Container(),
	),
),
SafeArea(
		child: Container(
			child: RecentCourseCard(),
		),
),

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.

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.

class RecentCourseCard extends StatelessWidget {
  RecentCourseCard({this.course});
  Course course;
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}
RecentCourseCard(
	course: recentCourses[0],
),

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)
      ],
    ),
  ),
);

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,
      ),
    ),
  ],
),

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.

return Stack(
	children: [
		Padding(...),
	],
)
return Stack(
	alignment: Alignment.topRight,
	children: [
		Padding(...),
	],
)

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),
  ),
),

Refactor Code

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