flutter – Card circle image padding

main.dart

import 'package:flutter/material.dart';

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

bodyContent(){
  return Center(
      child: SizedBox.square(
          dimension: 325,
          child: Card(
              elevation: 8,
              shape: const CircleBorder(),
              clipBehavior: Clip.antiAliasWithSaveLayer,
              child: Padding(
                  padding: const EdgeInsets.all(12),
                  child: Container(
                      clipBehavior: Clip.antiAliasWithSaveLayer,
                      decoration: const BoxDecoration(
                          shape: BoxShape.circle,
                          image: DecorationImage(
                              image: NetworkImage(
                                  "https://picsum.photos/600"
                              ),
                              fit: BoxFit.contain
                          )
                      )
                  )
              )
          )
      )
  );
}

More flutter tutorials

• flutter – Card elevation
• flutter – Card shadow
• flutter – How to make a Card clickable
• flutter – Card circle shape
• flutter – Card circle image
• flutter – Card rounded corners image
• flutter – Container decoration image
• flutter – Container clip behavior
• flutter – How to use InkResponse
• flutter – Column items equal height
• flutter – Column items stretch horizontally
• flutter – Column height wrap content
• flutter – Row alignment
• flutter – Row center
• flutter – Row width