ClipRRect


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! 😀


Sobre Gustavo Zimbrón 131 Artículos
Apasionado por la programación y la tecnología, me gustan los retos y aprender siempre cosas nuevas.

Sé el primero en comentar

Dejar una contestacion

Tu dirección de correo electrónico no será publicada.


*