How To Create Rounded Corners Image in Flutter

September 17, 2021October 1, 2020 by Milan Dhameliya

Hello Guys, How are you all ? hope you all are fine. In this tutorial we are going to learn How To Create Rounded Corners Image in Flutter.

There is As Simple As You can think to make image round corner. in this Tutorial we will use ClipRreact Class to give image to rounded corner, so without wasting your valuable time lets start this tutorial.

How To Create Rounded Corners Image in Flutter

Table of Contents

How To Create Rounded Corners Image in Flutter

First of all Import material.dart package in your app’s main.dart file.

import 'package:flutter/material.dart';

Create Stateless widget and Define in runApp.

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

Then we would make Scaffold widget and put a Center Widget in it. and use ClipRReact in your body.

        home: Scaffold(
        appBar: AppBar(
          title: Text("Round Corner Image - FlutterCorner"),
        ),
        body: ClipRRect()

Now in body’s ClipRRect add child to ClipRRect and define Image in your child.

            ClipRRect(
              child: Image(),
            ),

And After That Just borderRadius to give round corner image And Add Image that you want to use as round corner in Image class. For Demo Purpose i am using Network Image in Image Class.

           ClipRRect(
              borderRadius: BorderRadius.circular(30.0),
              child: Image(
                image: NetworkImage(
                    "https://cdn.pixabay.com/photo/2017/10/12/20/15/photoshop-2845779_960_720.jpg"),
              ),
            ),

Here is My Full Source Code of my main.dart file that you will give more understanding.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.black),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Round Corner Image - FlutterCorner"),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(10),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(30.0),
              child: Image(
                image: NetworkImage(
                    "https://cdn.pixabay.com/photo/2017/10/12/20/15/photoshop-2845779_960_720.jpg"),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Summery

So, It’s All About This tutorial. I hope this tutorial helps you lot. Please Comment Below if You stucks anywhere with my code. Thank You.

Also Check Out Below Tutorials

Leave a Comment Cancel reply