How to Create Rounded Images in Flutter?

Flutter Rounded Images

In Flutter, rounded images within cards or dialog boxes can greatly enhance the visual appeal and user experience of your application. Whether you’re designing a profile display, product showcase, or any other UI component, rounded images can add a touch of elegance.

To implement rounded images in Flutter, we utilize the Card widget for containing the image and apply the RoundedRectangleBorder shape to give it rounded corners. Additionally, we use the Container widget to wrap the image, applying a circular border radius within its decoration.

This approach not only ensures the images conform to the desired shape but also maintains consistency across different screen sizes and resolutions. By following this method, you can seamlessly integrate rounded images into your Flutter application, enhancing its visual appeal and user engagement.

import 'package:flutter/material.dart';
//
// import 'color_dynamic.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: RoundedImagePage()
  }
}


class RoundedImagePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rounded Images by RT Example'),
      ),
      body: Center(
        child: Card(
          elevation: 5,//You can set this value according to your requirement
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),//You can set this value according to your requirement
          ),
          child: Container(
            width: 200,//Here you can also use mediaQuery
            height: 200,//Here you can also use mediaQuery
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10.0),
              image: DecorationImage(
                image: Image.network('https://picsum.photos/250?image=9').image,
                //AssetImage('assets/image.jpg'),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Conclusion: In this way you can implement rounded images in Flutter