How to use card widget in Flutter?

In this post, you will learn to use card widget in Flutter.

Let’s see the code first.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Card example';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Card(
        elevation: 80,
        child: SizedBox(
          width: 300,
          child: Padding(
            padding: const EdgeInsets.all(25.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: const <Widget>[
                CircleAvatar(
                  radius: 80,
                  backgroundImage: AssetImage('assets/images/avatar.png'),
                ),
                SizedBox(
                  height: 20,
                ),
                Text(
                  'John Doe',
                  style: TextStyle(fontWeight: FontWeight.w600, fontSize: 25),
                ),
                SizedBox(
                  height: 20,
                ),
                Text(
                  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis, ex a eleifend dapibus, eros leo aliquam mi, varius viverra elit justo eu tellus. Pellentesque congue turpis ligula, porttitor facilisis leo finibus mollis. Suspendisse condimentum et velit eleifend ultrices. Sed a velit risus. Cras ut magna ante.',
                  style: TextStyle(fontSize: 15),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Here, I wrapped the Card widget with the Center widget to keep the card at the center of the screen. We use the elevation property of the Card widget to set the size of the shadow below the card. To fix the width, I used the SizedBox widget. I used the Column widget to show an image, title, and description.

Output:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: