Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

flutter
cliprrect
communitycreator

What is ClipRRect in Flutter?

Hammad Qayyum

The ClipRRect class in Flutter provides us with a widget that clips its child using a rounded rectangle. The extra R in clipRRect stands for rounded.

By default, this class uses its own boundaries for the clip as the base rectangle. We can also customize the size and location of the bounded clip using the custom clipper.

Properties

The ClipRRect class has the following properties, which are widely used in Flutter application development:

  1. Border Radius: This feature specifies the border radius of the rounded corners of rectangle.
  2. child: In child, we specify the widget to be placed inside the ClipRRect widget.
  3. clipBehavior: It specifies how to control the clip. It must not be set to null.
  4. clipper: It specifies which clip to use.

Now, let’s create a new Flutter application named cliprrect_flutter. We will make the changes inside the main.dart file. The code for the main.dart file is given below:

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ClipRRect Flutter'),
        backgroundColor: Colors.red,
      ),
      body: Center(
          child: ClipRRect(
            borderRadius:
            BorderRadius.circular(20),
              child: Image.network('https://picsum.photos/250?image=1'),
            ),
          )
      );
  }
}

class MyClip extends CustomClipper<Rect> {
  Rect getClip(Size size) {
    return Rect.fromLTWH(0, 0, 100, 100);
  }
 
  bool shouldReclip(oldClipper) {
    return false;
  }
}

The output of the above code is as follows:

You can find the complete code here.

RELATED TAGS

flutter
cliprrect
communitycreator
RELATED COURSES

View all Courses

Keep Exploring