How To Create Rounded Corner Radius Image Using Flutter App

admin_img Posted By Bajarangi soft , Posted On 12-10-2020

In Flutter we would use ClipRRect widget to make rounded edges clip view. The ClipRRect widget converts the child widget with given changes and make the child Image view with rounded corners. ClipRRect widget has a property named as borderRadius with BorderRadius.circular(double value). This would make the corner rounded according to pass value.

How To Create Rounded Corner Radius Image Using Flutter App

 Rounded Corner Radius Image
Complete Code For Rounded Corner Radius Image In Flutter
main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: HomeScreen(),
  ));
}

class HomeScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black54,
        appBar: AppBar(
          backgroundColor: Color(0xFF4A148C),
          title: Text("Rounded Corner Image Widget"),
        ),
        body: Center(
            child: ClipRRect(
                borderRadius: BorderRadius.circular(10.0),
                child:
                Image.asset('assets/img1.jpg',
                  width: 250, height: 200, fit: BoxFit.cover,))),
    );
  }
}

Related Post