Un widget que recorta a su hijo utilizando un rectángulo redondeado.
De forma predeterminada, ClipRRect utiliza sus propios límites como el rectángulo base para el clip, pero el tamaño y la ubicación del clip se pueden personalizar mediante un recortador personalizado.
Supongamos que tenemos la siguiente App:
Es un widget Image.network que agrega la imagen de la url: «https://flutter-es.com/wp-content/uploads/2019/05/portada-flutter.png»
Image.network("https://flutter-es.com/wp-content/uploads/2019/05/portada-flutter.png")
Entonces si queremos quitar esas esquinas y agregar bordes redondeados utilizamos el siguiente código
ClipRRect( borderRadius: BorderRadius.circular(15), child: Image.network("https://flutter-es.com/wp-content/uploads/2019/05/portada-flutter.png"), )
import 'package:flutter/material.dart'; import 'package:flutter/widgets.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', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), debugShowCheckedModeBanner: false, ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key}) : super(key: key); @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { TabController tabController; @override void initState() { tabController = TabController(length: 2, initialIndex: 0, vsync: this); super.initState(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Ejemplo IconButton'), ), body: Padding( padding: const EdgeInsets.all(8.0), child: ClipRRect( borderRadius: BorderRadius.circular(15), child: Image.network("https://flutter-es.com/wp-content/uploads/2019/05/portada-flutter.png"), ), )); } }
Como podemos observar, podemos modificar la forma de los widgets, en este caso una imagen, sin necesidad de editar el archivo.
Eso es todo por ahora, Saludos! 😀