Introduction to the
In this article, you will learn about all the parts and card classes in Flutter and combine the two to create a card-like part. By the end of this article, you’ll have a reusable card widget that can be customized to your needs.
Components in Flutter
Building fully functional applications with Flutter can be exciting because it involves bringing various components together and combining them again and again to build a complete application. No matter how complex or large Flutter applications are, they all use basic building blocks called “widgets”.
Widgets form the basis of the view and screen in the Flutter application, and the right combination of the various widgets available will give you a beautifully designed screen.
There are two types of Flutter widgets.
- Stateless widgets are immutable widgets, meaning they do not change. Whatever information they carry remains constant throughout the life of the widget.
- Stateful widgets are widgets whose information and properties can change during the widget’s runtime. Its properties can be updated, changed, or deleted while it is still running
Examples of subitems are center subitems (which align their children or items to the center), row subitems (which align their children in horizontal format), and column subitems (which align their children vertically). Incorporating these off-the-shelf widgets makes development easier and faster.
However, sometimes some of the built-in widgets don’t meet the immediate needs in your application, and you need to combine one or two. For example, the card parts built into Flutter did not fully meet our needs, so we had to combine them with other parts to build our own reusable and fully customizable card parts.
Build a card widget
In this tutorial, we will build a card widget that functions as a business card with a picture, job description, and company name.
This helps build up your understanding of the Flutter parts and also helps you see the various techniques you can apply to create a single part from a combination of other parts.
Begin to use
Let’s get started. The first step is to create a new project.
flutter create card_widget
Copy the codeThis command creates files, folders, and everything needed to start a new Flutter project.
Next, we need to create a default MaterialApp. The MaterialApp class of Flutter is a predefined class in the application of Flutter. It is the main or core component.
All other components and gadgets provided by the Flutter SDK can be accessed in the following ways.
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Material App', home: Scaffold( body: Text('Material App'), ), ); }}Copy the codeIn the code above, a stateless widget called MyApp is the foundation of the application we will create. It returns to the MaterialApp, which gives us access to various properties and components in the material design.
We pass in the title, which is the name we want to give our application (in our case, “business card”). We also pass a Scaffold widget to the MaterialApp home property.
The Scaffold widget fills every available space on your mobile device display; It provides access to various other widgets, such as application bars, floating action buttons, drawers, and more.
In the Scaffold Widget we have the body property, which is the space where everything else can be put except the application bar. In this default Material application, we can only use text widgets with text (‘Material App’). We’ll change it as we go further through the tutorial.
Determine the behavior of the card widget
The next step is to create a new stateless widget. Why would we want to use a stateless widget? Because none of the attributes of the card widget should change during its run. Once the colors, shapes, and details are set in the application, they should not change.
We will call this stateless part “BusinessCard”. Now we pass in an empty Container widget with the following code.
class BusinessCard extends StatelessWidget { @override Widget build(BuildContext context) { return Container(); }}Copy the codeNow pass the name of the stateless widget in the Body parameter of the MaterialApp.
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Material App', home: Scaffold( body: BusinessCard(), // <= the name goes here ), ); }}Copy the codeIn a BusinessCard Widget, return the Card class constructor.
class BusinessCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Card(); // <== The Card class constructor
}
}
Copy the codeDetermine the attributes of the card widget
The Card class provides several properties that you can use to modify the visual effects of the Card, such as color, shape, boundaries, and position. For example, we can decide to decorate our cards with either colors.green or red.
The same goes for other attributes. If we want the card to have a circular rectangle, we can pass in the shape parameter RoundedRectangularBorder() and it will be set up this way.
In this article, we will use only color and elevation attributes.
Elevation is used to control the card’s Z coordinate and the size of the shadow under the card. Paste the code below to make the card grey with an altitude of 8.0.
@override Widget build(BuildContext context) {return Card(color: color.grey [300], elevation: 8.0,Copy the codeSince the card part has no height and width parameters, we can use the Container part by passing in the height and width attributes.
child: Container(
padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 16),
height: 200,
width: 350,
child: Column(
children: [],
),
Copy the codeAt this point, the basic layout of the card is set up. We can pass the components of the BusinessCard Widget into a sub-block of the Column Widget (as shown in the code block above).
Determine the layout of the card widgets
In this article, we use a basic business card layout. More adjustments and styling can be added to your satisfaction.
We start by creating the components for the Column Widget. First, we set the mainAxisAlignment and crossAxisAlignment.
These two parameters of the Row and Column widget set the vertical and horizontal arrangement of child components.
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [],
Copy the codeMainAxisAlignment. SpaceBetween ensure child components interval as far away as possible, and CrossAxisAlignment. Start starts from the top is to ensure that the components in the vertical direction.
Next, we need to pass in the circular head. This is a widget provided by Flutter to display images from assets or the Internet.
We’re going to use a random avatar from the Internet. Pass the link to the image to the NetworkImage Widget.
children: [
const CircleAvatar(
radius: 50, //we give the image a radius of 50
backgroundImage: NetworkImage(
'https://webstockreview.net/images/male-clipart-professional-man-3.jpg'),
),
Copy the codeThe next step is to create the Column, where the other details we need will be passed in. We used the Text widget to display the phone number, city, and organization.
SizedBox is a widget for introducing spacing in applications. We’ll use it to add Spaces between the text.
Column(
crossAxisAlignment: CrossAxisAlignment.end,
//CrossAxisAlignment.end ensures the components are aligned from the right to left.
children: [
Container(
margin: const EdgeInsets.only(top: 8),
width: 150,
color: Colors.black54,
height: 2,
),
const SizedBox(height: 4),
const Text('+2348012345678'),
const Text('Chelsea City'),
const Text('Flutteria'),
],
),
],
),
const SizedBox(height: 20),
Copy the codeNext, we create another Row to handle names, job titles, and companies. They are all Text, so we pass each Text into a Text widget.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'John Doe',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 4),
const Text('JohnDee'),
],
),
Copy the codeWhat we have done in the above code block is to create a Row widget that aligns its children in a horizontal format. Because our card is split into two parts, we use two Column widgets that do the opposite of the Row widgets by vertically align their children.
In the first column, we pass in the Text widget that we use to display the person’s name and nickname (just a small addition).
const SizedBox(width: 32),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
const Text(
'Mobile App Developer',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 4),
const Text('FlutterStars Inc'),
],
)
],
),
],
),
Copy the codeWe use a SizedBox to separate the two Text widgets. A SizedBox is a widget that creates a space of a specific size. It may or may not have a child or component. Once its height and width have been declared, it is ready to use.
We set it to a height of 4 to create a bit of space between our Text widgets and make it look cleaner and more expressive.
In the second column, we repeat the same thing, passing the job description and company name to the Text widgets. We then use a SizedBox of 32 width to separate the two columns.
Very good! We have completed the basic layout for creating the BusinessCard Widget. Run the command in the following code block from your terminal to start the application.
By combining built-in card parts, containers, text, row, and column parts, we built a card part from scratch that can be used anywhere in the application by calling its constructor.
flutter run
Copy the codeBelow is a screenshot of a fully built and working card widget.
conclusion
The built-in card widget can do a lot of things. When used in combination with other widgets, it results in beautifully designed, fully reusable widgets ready to be used in your application. Remember, widgets are building materials, and the right combination can bring out the best in your application.
The postBuilding a card widget in Flutterappeared first onLogRocket Blog.