Can I add a title decoration to a Material Card in Flutter?

Question

Is there a way to add a title box to a card in the Flutter Material design? So far I've got to:

Card(
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(20)),
    side: BorderSide(color: Colors.black)
  ),
  child: ...
)

But I can't figure out how to add the title decoration. Is there a way? The picture below is roughly what I'm trying to achieve.

Answer 1

try something like this; the following code creates a custom widget which add a decoration label to the container box.

    import 'package:flutter/material.dart';

    class CardHeaderOutline extends StatefulWidget {
      const CardHeaderOutline({
        super.key,
        required this.title,
        this.smallText,
        this.subTitle,
        this.widthPercentage = 1,
      });

      final String? smallText, subTitle;
      final String title;
      final double widthPercentage;

      @override
      State<CardHeaderOutline> createState() => _CardCardHeaderOutlineState();
    }

    class _CardCardHeaderOutlineState extends State<CardHeaderOutline> {
      @override
      Widget build(BuildContext context) {
        return Stack(
          children: [
            // Container with black border (bottom container)
            Padding(
              padding: EdgeInsets.only(top: 8),
              child: Container(
                padding: EdgeInsets.all(40),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10.0),
                  border: Border.all(
                    color: Colors.black,
                  ),
                ),
                // Other properties for the bottom container...
              ),
            ),

            // Container on top, positioned top right with slight overlap (top container)
            Positioned(
              top: 0, // Adjust top position for overlap
              left: 8, // Adjust right position for overlap
              child: Container(
                padding: EdgeInsets.all(4),
                decoration: BoxDecoration(
                  color: Colors.red, // Example color (customize as needed)
                  borderRadius: BorderRadius.circular(10.0),
                  border: Border.all(
                    color: Colors.black,
                  ),
                ),
                // Your content for the top container

                child: Text('Top Right'), // Example content
              ),
            ),
          ],
        );
      }
    }

Answer 2

In material design the title of a card wouldn't float over the border, as your picture - although it is possible to make, as we see in textFormField decoration.

Below a code of Material 2 for building a card. You can find other examples and how to theme your card in the link: https://material.io/components/cards/flutter#card

          Card(
            clipBehavior: Clip.antiAlias,
            child: Column(
              children: [
                ListTile(
                  leading: Icon(Icons.arrow_drop_down_circle),
                  title: const Text('Card title 1'),
                  subtitle: Text(
                    'Secondary Text',
                    style: TextStyle(color: Colors.black.withOpacity(0.6)),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Text(
                    'Greyhound divisively hello coldly wonderfully marginally far upon excluding.',
                    style: TextStyle(color: Colors.black.withOpacity(0.6)),
                  ),
                ),
                ButtonBar(
                  alignment: MainAxisAlignment.start,
                  children: [
                    FlatButton(
                      textColor: const Color(0xFF6200EE),
                      onPressed: () {
                        // Perform some action
                      },
                      child: const Text('ACTION 1'),
                    ),
                    FlatButton(
                      textColor: const Color(0xFF6200EE),
                      onPressed: () {
                        // Perform some action
                      },
                      child: const Text('ACTION 2'),
                    ),
                  ],
                ),
                Image.asset('assets/card-sample-image.jpg'),
                Image.asset('assets/card-sample-image-2.jpg'),
              ],
            ),
          ),