fluttercontainersbordercard

Flutter Card / Container / Border Problem


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

enter image description here

The problem im currently facing is this situation:

enter image description here

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?

enter image description here

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

} }


Solution

  • enter image description hereYou 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,
                    ),
                  ),
                ]),
              ),
            ),
          )
        );
      }
    }