Flutter – Widget de BorderRadius

BorderRadius es un widget incorporado en flutter. Su funcionalidad principal es agregar una curva alrededor de la esquina del borde de un widget. Hay un total de cinco formas en las que podemos usar este widget, la primera es usando BorderRadius.all, el radio de todas las esquinas es el mismo aquí. La segunda forma es usando BorderRadius.Circle, aquí necesitamos especificar el radio solo una vez, lo que sería un valor doble . La tercera forma es usando BorderRadius.horizontal, aquí podemos especificar un radio de borde diferente para el lado izquierdo y derecho. La cuarta forma es usando BorderRadius.only, puede tomar un radio diferente para las cuatro esquinas del borde. Y la última forma es usando BorderRadius.vertical, que puede dar un radio diferente a la parte superior e inferior del borde. La implementación de todas estas formas se muestra a continuación con la ayuda de ejemplos.

Constructor de BordeRadius.all :

const BorderRadius.all(
Radius radius
)

Constructor de BorderRadius.Circle :

BorderRadius.circular(
double radius
)

Constructor de BorderRadius.horizontal :

const BorderRadius.horizontal(
{Radius left: Radius.zero,
Radius right: Radius.zero}
)

Constructor de BorderRadius.only :

const BorderRadius.only(
{Radius topLeft: Radius.zero,
Radius topRight: Radius.zero,
Radius bottomLeft: Radius.zero,
Radius bottomRight: Radius.zero}
)

Constructor de BorderRadius.vertical :

const BorderRadius.vertical(
{Radius top: Radius.zero,
Radius bottom: Radius.zero}
)

Propiedades de BorderRadius:

• bottomLeft: la propiedad bottomLeft toma la clase Radius como objeto. Controla el radio de la esquina inferior izquierda del borde.

    // Implementation
    final Radius bottomLeft

• bottomRight: esta propiedad también mantiene Radius como el objeto para decidir el radio de la esquina inferior derecha del borde.
• topLeft: esta propiedad también contiene la clase Radius como el objeto para decidir el radio de la esquina superior izquierda del borde.
• topRight: esta propiedad también contiene la clase Radius como el objeto para decidir el radio de la esquina superior derecha del borde.

Ahora, vamos a ver cómo podemos agregar border-radius al borde usando todos los métodos. El borde en la aplicación a continuación se crea usando el widget Border.all , alrededor de una imagen de red que se coloca dentro del widget BoxDecoration .

Widget de radio de borde

Así es como se ve nuestra frontera ahora. Veamos cómo agregar una curva a las esquinas.

Ejemplo 1: BorderRadius.all

import 'package:flutter/material.dart';
 
void main() {
  runApp(
    //Our app widget tree starts here
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Menu',
            onPressed: () {},
          ), //IconButton
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.comment),
              tooltip: 'Comment',
              onPressed: () {},
            ), //IconButton
          ], //<Widget>[]
        ), //AppBar
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(12.0),
            child: SizedBox(
              height: 250,
              child: Container(
                decoration: BoxDecoration(
                  image: const DecorationImage(
                    image: NetworkImage(
                        'https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo.png'),
                  ),
                  border: Border.all(
                      color: const Color(0xFF000000),
                      width: 4.0,
                      style: BorderStyle.solid), //Border.all
                  /*** The BorderRadius widget  is here ***/
                  borderRadius: BorderRadius.all(
                    Radius.circular(10),
                  ), //BorderRadius.all
                ), //BoxDecoration
              ),
            ),
          ),
        ), //Center
      ), //Scaffold
      debugShowCheckedModeBanner: false, //Debug banner is turned off
    ), //MaterialApp
  );
}

Producción:

BorderRadius.todo

Explicación: la curva alrededor de las esquinas de los bordes en la aplicación anterior se agregó mediante BorderRadius.all.  B orderRadius.all está tomando Radius.circular como el objeto y 10 es el parámetro asignado a eso. Y podemos ver que se ha agregado una curva de radio 10 píxeles a todas las esquinas.

Ejemplo 2: BorderRadius.circle

        // Code snippet of the BorderRadius.Circular
        ...
         borderRadius: BorderRadius.circular(50.0),
         ...

Producción:

BorderRadius.circular

Explicación: el fragmento de código anterior es de BorderRadius.circular. Solo toma un valor doble como el objeto para dar una curva igual a todas las esquinas del borde. En la aplicación anterior, el radio se establece en 50 píxeles.

Ejemplo 3: BorderRadous.horizontal:

        // Code sippet of BorderRadius.horizontal
        ...
                  borderRadius: BorderRadius.horizontal(
                    left: Radius.circular(15),
                    right: Radius.circular(30),
                  ), //BorderRadius.horizontal
                 ...

Producción:

 BorderRadius.horizontal

Explicación: aquí se ha utilizado BorderRadius.horizontal para agregar un borde alrededor de las esquinas. Dentro del   widget BorderRadius.horizontal, la propiedad de la izquierda contiene Radius.circular (15), lo que le da al lado izquierdo del borde (es decir, la parte superior izquierda y la parte inferior izquierda) un radio de 15 píxeles y la propiedad de la derecha contiene Radius . .circular(30), que a su vez otorga a la parte derecha del borde un radio de 30 píxeles.

Ejemplo 4: BorderRadus.only

        // Code sippet of BorderRadius.only
        ...
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(5),
                    topRight: Radius.circular(10),
                    bottomLeft: Radius.circular(15),
                    bottomRight: Radius.circular(20),
                  ),//BorderRadius.Only
        ...

Producción: 

BorderRadius.solo

Explicación: en la aplicación anterior, BorderRadius.only se usa para agregar diferentes curvas alrededor de las diferentes esquinas de los bordes. BorderRadius.only toma cuatro propiedades que son topLeft , topRight , bottomLeft y bottomRight para agregar una cantidad específica de radio a las esquinas del borde. En la esquina superior izquierda el radio es de 5 px, en la esquina superior derecha el radio es de 10 px, en la esquina inferior izquierda el radio del borde es de 15 px y en la esquina inferior derecha el radio es de 20 px.

Ejemplo 5: BorderRadius.vertical 

        // Code sippet of BorderRadius.vertical
        ...
                  borderRadius: BorderRadius.vertical(
                    top: Radius.circular(10),
                    bottom: Radius.circular(30),
                  ),//BorderRadius.vertical
        ...

Producción:

 BorderRadius.vertical 

Explicación: BorderRadius.vertical es el widget que se usa aquí para agregar radio de borde a las esquinas. Toma el radio superior e inferior para especificar border-radius a la parte superior e inferior del borde. Aquí, el radio del borde agregado a la parte superior es de 10 px y el radio del borde agregado a la parte inferior es de 30 px.

Para ver el código completo de todos los ejemplos utilizados en este artículo, haga clic aquí .