flutter – Card rounded image padding

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
      MaterialApp(
          theme: ThemeData(primarySwatch: Colors.indigo),
          home: Scaffold(
              appBar: AppBar(
                  title: const Text("Card Rounded Image Padding")
              ),
              body: bodyContent()
          )
      )
  );
}

bodyContent(){
  return SizedBox(
      width: double.infinity,
      height: 250,
      child: Card(
          elevation: 8,
          margin: const EdgeInsets.all(16),
          shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(24))
          ),
          clipBehavior: Clip.antiAliasWithSaveLayer,
          child: Padding(
              padding: const EdgeInsets.all(12),
              child: Container(
                  decoration: BoxDecoration(
                      shape: BoxShape.rectangle,
                      borderRadius: BorderRadius.circular(24),
                      image: const DecorationImage(
                          image: NetworkImage(
                            "https://picsum.photos/600",
                          ),
                          fit: BoxFit.cover
                      )
                  )
              )
          )
      )
  );
}

More flutter tutorials

• flutter – How to create horizontal GridView
• flutter – GridView horizontal scroll
• flutter – GridView in column
• flutter – GridView extent
• flutter – GridView child aspect ratio
• flutter – Card elevation
• flutter – Card shadow
• flutter – How to make a Card clickable
• flutter – Card circle shape
• flutter – Card clip behavior
• flutter – Container decoration image
• flutter – Container clip behavior
• flutter – How to use InkResponse
• flutter – Row space around
• flutter – Row space evenly