Basic

sample.packages.flutter.lib.src.widgets.basic.781.

This example shows a [ClipRRect] that adds round corners to an image.

  
import 'package:flutter/material.dart';

void main() => runApp(const ClipRRectApp());

class ClipRRectApp extends StatelessWidget {
  const ClipRRectApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('ClipRRect Sample')),
        body: const ClipRRectExample(),
      ),
    );
  }
}

class ClipRRectExample extends StatelessWidget {
  const ClipRRectExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(40.0),
      constraints: const BoxConstraints.expand(),
      // Add a FittedBox to make ClipRRect sized accordingly to the image it contains
      child: FittedBox(
        child: ClipRRect(
          borderRadius: BorderRadius.circular(40.0),
          child: const _FakedImage(),
        ),
      ),
    );
  }
}

// A widget exposing the FlutterLogo as a 400x400 image.
//
// It can be replaced by a NetworkImage if internet connection is available, e.g. :
// const Image(
//   image: NetworkImage(
//       'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
// );
class _FakedImage extends StatelessWidget {
  const _FakedImage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      // Set constraints as if it were a 400x400 image
      constraints: BoxConstraints.tight(const Size(400, 400)),
      color: Colors.blueGrey,
      child: const FlutterLogo(),
    );
  }
}
  

SHARE: