Flutter – Cortapelos personalizado

En flutter, tenemos widgets y propiedades que ayudan a crear formas personalizadas. En este artículo, aprenderemos sobre una propiedad llamada Custom Clipper y también la implementaremos para crear una forma de curva en nuestro diseño de interfaz de usuario.

¿Qué es una cortadora personalizada?

Custom Clipper es una propiedad que ayuda a recortar el widget en cualquier forma que queramos. Recorta las áreas no utilizadas del contenedor para obtener la forma deseada.

Ahora crearemos una barra de aplicaciones con forma de fondo curvo usando un clipper personalizado.

Paso 1: archivo custom_shape.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
  
class Customshape extends CustomClipper<Path>{
  @override
  Path getClip(Size size) {
    double height = size.height;
    double width = size.width;
  
    var path = Path();
    path.lineTo(0, height-50);
    path.quadraticBezierTo(width/2, height, width, height-50);
    path.lineTo(width, 0);
    path.close();
    return path;
  }
  
  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return true;
  }
  
}

Explicación: en este archivo, nuestra clase de forma personalizada se extiende a un clipper personalizado . El recortador personalizado utiliza dos métodos de anulación : 

1. getclip() : Definimos aquí cómo queremos recortar la ruta.
2. shouldReclip() : Devuelve el valor bool tanto si queremos volver a recortar el widget como si no.

El método getClip() se usa para personalizar la forma. Para dar forma a una curva, hemos utilizado la característica path.quadraticBezierTo y también hemos pasado path.lineTo con cierta altura y anchura . No queremos volver a recortar, por lo que hemos devuelto verdadero en el método shouldReclip().

Paso 2: archivo main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
  
import 'custom_shape.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: MyHomePage(),
    );
  }
}
  
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
  
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:  AppBar(
        toolbarHeight: 130,
        backgroundColor: Colors.transparent,
        elevation: 0.0,
        flexibleSpace: ClipPath(
          clipper: Customshape(),
          child: Container(
            height: 250,
            width: MediaQuery.of(context).size.width,
            color: Colors.green,
            child: Center(child: Text("GeeksforGeeks",
                                      style: TextStyle(fontSize: 40,
                                                                       color: Colors.white),)),
          ),
        ),
      ),
       body: Container(),
    );
  }
}

Explicación: En este archivo main.dart, primero hemos creado un widget con estado. Posteriormente, hemos utilizado la propiedad de una barra de aplicaciones denominada espacio flexible . En esta propiedad de espacio flexible, tenemos un contenedor con alto, ancho, color y texto. Hemos envuelto este contenedor con clip path . Clip path tiene una propiedad llamada clipper. En la propiedad Clipper, hemos pasado la clase de forma personalizada para que pueda acceder al archivo custom_shape.dart y darnos la forma deseada.

Producción: