Flutter – Widget direccional de BorderRadius

BorderRadiusDirectional es un widget preconstruido en flutter. Su funcionalidad es similar al widget BorderRadius , que consiste en agregar una curva alrededor de las esquinas del borde. Pero hay una diferencia, en el widget BorderRadiusDirectional podemos especificar el radio de la esquina dependiendo de la dirección del texto. Es útil cuando la dirección del texto de nuestra aplicación flutter depende de algún tipo de entrada del usuario, como elegir el idioma de la aplicación. En cierto modo, va bien con el widget BorderDirectional .

Hay un total de cinco formas de implementar el widget BorderRadiusDirectional :

1. Constructor BorderRadiusDirectional.all :

const BorderRadiusDirectional.all(
Radius radius
)

  2. Constructor de BorderRadiusDirectional.circular:

BorderRadiusDirectional.circular(
double radius
)

 3. Constructor de BorderRadius. horizontales :

const BorderRadiusDirectional.horizontal(
{Radius start: Radius.zero,
Radius end: Radius.zero}
)

4. Constructor de BorderRadiusDirectional.only:

const BorderRadiusDirectional.only(
{Radius topStart: Radius.zero,
Radius topEnd: Radius.zero,
Radius bottomStart: Radius.zero,
Radius bottomEnd: Radius.zero}
)

5. Constructor de BorderRadiusDirectional.vertical:

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

Propiedades de BorderRadiusDirectional

• bottomEnd: la clase Radius es el objeto que toma esta propiedad para especificar el radio de la esquina de la esquina inferior izquierda o inferior derecha dependiendo de la dirección del texto.
• botttomStart:  la clase Radius es el objeto que toma esta propiedad para especificar el radio de la esquina de la esquina inferior izquierda o inferior derecha según la dirección del texto.
• topEnd:  la clase Radius es el objeto que toma esta propiedad para especificar el radio de la esquina de la esquina superior izquierda o superior derecha dependiendo de la dirección del texto. Para ltr sería arriba a la derecha y para rtl sería arriba a la derecha.
• topstart:  la clase Radius es el objeto que toma esta propiedad para especificar el radio de la esquina de la esquina superior izquierda o superior derecha dependiendo de la dirección del texto.

Ejemplo: En este ejemplo, BorderRadiusDirectional.only se usa para agregar curvas a las esquinas del borde.

Esta sería nuestra aplicación de partida. Aquí veremos cómo usar BorderRadiusDirectional, para agregar un radio a los bordes alrededor de la imagen.

Con la dirección del texto de izquierda a derecha.

import 'package:flutter/material.dart';
 
void main() {
  runApp(
    //Our app widget tree starts herwe
    MaterialApp(
      builder: (context, child) {
        return Directionality(
          //Here we can change the directionality of our app
          textDirection: TextDirection.ltr,
          child: child,
        ); //Directionality
      },
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Menu',
            onPressed: () {},
          ), //IcoButton
          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: 200,
              width: 250,
              child: Container(
                decoration: BoxDecoration(
                    image: const DecorationImage(
                      image: NetworkImage(
                          'https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo.png'),
                      scale: 3.0,
                    ),
                    border: Border.all(
                        color: Colors.green,
                        width: 4.0,
                        style: BorderStyle.solid), //Border.all
 
                    /* The BorderRadiusDirectional widget  is here */
 
                    borderRadius: BorderRadiusDirectional.only(
                      topStart: Radius.circular(5.0),
                      topEnd: Radius.circular(10.0),
                      bottomStart: Radius.circular(15.0),
                      bottomEnd: Radius.circular(20.0),
                    ) //BorderRadiusDirectional.only
                    ), //BoxDecoration
              ), //Container
            ), //SizedBox
          ), //Padding
        ), //Center
      ), //Scaffold
      debugShowCheckedModeBanner: false,
      //Debug banner is turned off
    ), //MaterialApp
  );
}

Producción:

Explicación: la dirección del texto o direccionalidad en esta aplicación se especifica en ltr, es decir, de izquierda a derecha (es lo mismo de forma predeterminada). En el widget BoxDecoration , hemos utilizado el parámetro borderRadius que contiene BorderRadiusDirectional.only como objeto. 

Dentro de la clase BorderRadiusDirectional.only tenemos la propiedad topStart que contiene Radius.circular (5.0) como el objeto, lo que simplemente significa que le da un radio de borde de 5 píxeles a la esquina, y en este caso su esquina superior izquierda ( ya que la dirección del texto es ltr ). Luego tenemos la propiedad topEnd que proporciona un radio de borde de 10 píxeles en la esquina superior derecha. La propiedad bottomStart especifica un radio de 15 píxeles en la esquina inferior izquierda y la propiedad bottomEnd especifica un radio de 20 píxeles en la esquina inferior derecha del borde. 

Con la dirección del texto de derecha a izquierda.

        // Code snippet of Directionality
        ...
          return Directionality(
                 //Here we can chande the directionality of our app
                 textDirection: TextDirection.ltr,
                  child: child,
              ); //Directionality
             },
        ...
        // Code snippet of the BorderRadiusDirectionality.only
        ...
                    borderRadius: BorderRadiusDirectional.only(
                      topStart: Radius.circular(5.0),
                      topEnd: Radius.circular(10.0),
                      bottomStart: Radius.circular(15.0),
                      bottomEnd: Radius.circular(20.0),
                    ) //BorderRadiusDirectional.only
        ...

Producción:

Explicación: la única diferencia en esta aplicación es la direccionalidad o la dirección del texto que se establece en rtl (de derecha a izquierda). Y si comparamos el resultado con la aplicación anterior, podemos ver que el radio de 5 píxeles se especifica en la esquina superior derecha, lo que significa que ahora es la esquina topStart . La esquina topEnd es la esquina superior izquierda con un radio de 10 px, la esquina bottomStart es la esquina inferior derecha con un radio de 15 px y la esquina bottomEnd es la esquina inferior izquierda con un radio de 20 px.

Entonces, este fue un ejemplo de cómo podemos usar el widget BorderRadiusDirectional .