Flutter Card / Container / Border Problem

Question

I would like to create a card in shape of this:

The problem im currently facing is this situation:

If you watch closely u can see that the Container isnt rounded as the border. After outcommenting the border itself it seems like the Card itself is rounded but the overlying Container isnt, which is bigger than the card itself?

Do you have an idea how to fix this problem?

My Code:

@override
Widget build(BuildContext context) {
return Card(
  elevation: 6,
  // shape: RoundedRectangleBorder(
  //   borderRadius: BorderRadius.circular(15.0),
  // side: const BorderSide(
  //   color: Color.fromRGBO(255, 128, 0, 1),
  //   width: 2.0,
  // ),
  // ),
  child: GestureDetector(
    onTap: () => Navigator.of(context).push(
      MaterialPageRoute(builder: (context) => XxxView()),
    ),
    child: Container(
      width: 130,
      padding: const EdgeInsets.all(15.0),
      color: const Color.fromRGBO(86, 89, 94, 1),
      child: Column(children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              numberExample.toString(),
              style: Theme.of(context).textTheme.bodyLarge,
              //maxLines: 1,
              //overflow: TextOverflow.ellipsis,
            ),
            Icon(
              icon,
              color: Colors.white,
            ),
          ],
        ),
        Text(
          text,
          style: const TextStyle(
            fontSize: 20,
            color: Colors.white,
          ),
        ),
      ]),
    ),
  ),
);

} }

Answer 1

You need to add a border radius to the Container widget by specifying it inside the BoxDecoration using the borderRadius property. Here's the example code:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorSchemeSeed: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    super.key,
    required this.title,
  });

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Card(
        elevation: 6,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15.0),
          side: const BorderSide(
            color: Color.fromRGBO(255, 128, 0, 1),
            width: 2.0,
          ),
        ),
        child: GestureDetector(
          onTap: () {},
          child: Container(
            width: 130,
            height: 100,
            decoration: BoxDecoration(
              color: const Color.fromRGBO(86, 89, 94, 1),
              borderRadius: BorderRadius.circular(15.0)
            ),
            padding: const EdgeInsets.all(15.0),
            child: Column(children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    "2",
                    style: Theme.of(context).textTheme.bodyLarge,
                  ),
                  Icon(
                    Icons.abc,
                    color: Colors.white,
                  ),
                ],
              ),
              Text(
                "test",
                style: const TextStyle(
                  fontSize: 20,
                  color: Colors.white,
                ),
              ),
            ]),
          ),
        ),
      )
    );
  }
}