The ClipRRect widget in flutter is used to clips its child using a rounded rectangle. It associates with the Clippers family. The main use of clippers is to clip out any portion of the widget as required. It behaves similar to that of ClipRect and is used to Clip a Rectangle portion of the child widget but with rounded corners.
Constructor
ClipRRect ClipRRect({
Key? key,
BorderRadiusGeometry borderRadius = BorderRadius.zero,
CustomClipper<RRect>? clipper,
Clip clipBehavior = Clip.antiAlias,
Widget? child,
})Properties:
Property | Description |
|---|---|
child | The widget below this widget in the tree |
hashCode | The hash code for this object |
key | Controls how one widget replaces another widget in the tree |
runtimeType | A representation of the runtime type of the object |
clipBehavior | This property takes Clip Enum as a value and Controls how to clip |
clipper | If non-null, determines which clip to use. |
borderRadius | The border radius of the rounded corners |
Example:
Here we will clip the below image with a rounded corner rectangle:
Refer to this article to Display Network Image in Flutter.
main.dart:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp()); // Entry point of the application
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ClipOval', // Title of the application
theme: ThemeData(
primarySwatch: Colors.blue, // Theme color of the application
),
home: MyHomePAGE(), // Home page of the application
debugShowCheckedModeBanner: false, // Disable debug banner
);
}
}
class MyHomePAGE extends StatefulWidget {
@override
_MyHomePAGEState createState() => _MyHomePAGEState(); // Create state for the home page
}
class _MyHomePAGEState extends State<MyHomePAGE> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'GeeksforGeeks', // Title of the app bar
style: TextStyle(
color: Colors.white, // Text color of the app bar title
),
),
backgroundColor: Colors.green, // Background color of the app bar
),
body: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(10), // Rounded corners with radius 10
child: Image.network('https://picsum.photos/250?image=9'), // Image from the network
),
),
);
}
}
Output:
Explanation of the above application
- First initialize the main app as a stateless widget.
- Second design the main widget as you desire.
- Build the Appbar with the scaffold widget.
- Now use the ClipRRect widget inside the body of the scaffold widget and place it in the middle using the center widget.