ClipRRect Demo

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ClipRRectDemo(),
    );
  }
}

class ClipRRectDemo extends StatefulWidget {
  @override
  _ClipRRectDemoState createState() => _ClipRRectDemoState();
}

class _ClipRRectDemoState extends State<ClipRRectDemo> {
  bool isClip = false;

  @override
  Widget build(BuildContext context) {
    double borderRadiusValue = isClip ? 25.0 : 0.0;
    // Example 1
    BorderRadius borderRadius = BorderRadius.circular(borderRadiusValue);

    // Example 2
    // BorderRadius borderRadius = BorderRadius.all(
    //   Radius.elliptical(borderRadiusValue, borderRadiusValue * 4),
    // );

    // Example 3
    // BorderRadius borderRadius = BorderRadius.only(
    //   topLeft: Radius.circular(borderRadiusValue),
    //   bottomRight: Radius.circular(borderRadiusValue),
    // );

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.purple,
        title: Text('ClipRRect Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GestureDetector(
              onTap: () => setState(() => isClip = !isClip),
              child: AnimatedContainer(
                curve: Curves.decelerate,
                duration: Duration(seconds: 1),
                decoration: BoxDecoration(
                  borderRadius: borderRadius,
                  color: Colors.red,
                ),
                height: 200.0,
                width: 200.0,
              ),
            ),
            const SizedBox(
              height: 30.0,
            ),
            GestureDetector(
              onTap: () => setState(() => isClip = !isClip),
              child: ClipRRect(
                borderRadius: borderRadius,
                child: Image(
                  height: 200.0,
                  width: 200.0,
                  image: NetworkImage(
                      'https://upload.wikimedia.org/wikipedia/en/0/00/The_Child_aka_Baby_Yoda_%28Star_Wars%29.jpg'),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}