ClipRRect and ClipPath in Flutter - Mini App: Build & Ship

Build: Clip Demo Screen

This screen shows how to use ClipRRect and ClipPath to clip widgets with rounded corners and custom shapes.

Target UI

-------------------------
| Clip Demo Screen       |
|-----------------------|
| [Rounded Image]        |
|                       |
| [Custom Shape Box]     |
|                       |
|                       |
-------------------------

Display an image clipped with ClipRRect with 20 radius corners.

Below the image, show a colored box clipped with ClipPath in a triangle shape.

Use a custom clipper class for the ClipPath.

Center both clipped widgets vertically with some spacing.

Starter Code

Flutter

import 'package:flutter/material.dart';

class ClipDemoScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Clip Demo Screen')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // TODO: Add ClipRRect with image here
            SizedBox(height: 40),
            // TODO: Add ClipPath with custom shape here
          ],
        ),
      ),
    );
  }
}

// TODO: Define custom clipper class here

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

class ClipDemoScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Clip Demo Screen')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(20),
              child: Image.network(
                'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
                width: 150,
                height: 150,
                fit: BoxFit.cover,
              ),
            ),
            SizedBox(height: 40),
            ClipPath(
              clipper: TriangleClipper(),
              child: Container(
                width: 150,
                height: 150,
                color: Colors.blueAccent,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class TriangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.moveTo(size.width / 2, 0); // Top center
    path.lineTo(0, size.height); // Bottom left
    path.lineTo(size.width, size.height); // Bottom right
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}

We use ClipRRect to clip the image with rounded corners by setting borderRadius to 20 pixels. This makes the image corners smooth and rounded.

Below it, we use ClipPath with a custom clipper TriangleClipper that clips a container into a triangle shape. The getClip method defines the triangle path by connecting the top center point to bottom left and bottom right corners.

Both clipped widgets are centered vertically with spacing using SizedBox.

Final Result

Completed Screen

-------------------------
| Clip Demo Screen       |
|-----------------------|
|   _______             |
|  /       \            |
| |  Image  |           |
|  \_______/            |
|                       |
|      /\               |
|     /  \              |
|    /____\             |
|                       |
-------------------------

User sees an image with rounded corners at top.

Below the image is a blue triangle-shaped box.

No interactive elements on this screen.

Stretch Goal

Add a button that toggles the triangle color between blue and green when tapped.

💡 Hint

Use a StatefulWidget and setState to change the color variable on button press.