Flutter – Widget direccional de borde

BorderDirectional es un widget integrado en flutter SDK. Este widget es algo similar al widget de borde, con la principal diferencia de que incluye propiedades de inicio y fin que le permiten al usuario modificar el borde de acuerdo con la dirección del texto de derecha a izquierda (rtl) o de izquierda a derecha (ltr) . Si nuestros lados de borde inicial y final son iguales, se debe usar el widget de borde, ya que proporcionará una mejor optimización del rendimiento .

Constructor de la clase BorderDirectional:

const BorderDirectional(
{BorderSide top: BorderSide.none,
BorderSide start: BorderSide.none,
BorderSide end: BorderSide.none,
BorderSide bottom: BorderSide.none}
)

Propiedades del widget BorderDirectional:

• bottom: Esta propiedad toma BorderSide ( final ) como el objeto. Controla el lado inferior del borde.
• dimensiones: la propiedad de dimensión toma EdgeInsetsGeometry como el objeto para controlar los anchos del lado del borde.
• end: esta propiedad toma BorderSide como el objeto. Controla el lado final (derecho o izquierdo dependiendo de la dirección del texto) del borde.
• hashCode: esta propiedad toma un valor int (anulación) como objeto. Este es responsable de la representación de estado de un objeto.
• isUniform: esta propiedad toma un valor booleano (solo lectura, invalidación) como objeto para decidir si todos los lados del borde serán uniformes o no.
• start: esta propiedad toma BorderSide como el objeto. Controla el lado inicial (derecho o izquierdo dependiendo de la dirección del texto) del borde.
• top: Esta propiedad toma BorderSide (final) como el objeto. Controla el lado superior del borde.

Ejemplo 1: en esta aplicación, veremos cómo usar las propiedades de inicio y fin cuando la dirección del texto se establece de izquierda a derecha.

import 'package:flutter/material.dart';
 
void main() {
  runApp(
    MaterialApp(
      builder: (context, child) {
        return Directionality(
          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: () {},
          ), //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'), //NetworkImage
                  ), //DecorationImage
                  border: BorderDirectional(
                    start: BorderSide(
                        color: Colors.green,
                        width: 4,
                        style: BorderStyle.solid), //BorderSide
                    end: BorderSide(
                        color: Colors.blue,
                        width: 4,
                        style: BorderStyle.solid), //BorderSide
                  ), //Border
                ), //BoxDecoration
              ), //Container
            ), //SizedBox
          ), //Padding
        ), //Center
      ), //Scaffold
      debugShowCheckedModeBanner: false,
    ), //MaterialApp
  );
}

Producción:

La dirección del texto se establece de izquierda a derecha

Explicación: en esta aplicación flutter simple, dentro de la propiedad de construcción de MaterialApp , la dirección del texto se establece en TextDirection.ltr, lo que hará que la dirección del texto sea de izquierda a derecha (de manera predeterminada, se establece solo en ltr ). Y dentro del widget BorderDirectional, las propiedades de inicio y finalización utilizan el widget BorderSide como objeto. Y en el widget BorderSide de ambas propiedades, el color del borde se establece en verde y azul, respectivamente, el ancho es de 4 píxeles y el estilo se establece en sólido. Ahora, lo que hay que notar aquí es el borde de color verde que en realidad está asignado alLa propiedad de inicio se coloca en la parte izquierda de la pantalla. Y el lado del borde de color azul está en el lado derecho de la imagen. Esto se debe a que la dirección del texto es de izquierda a derecha, lo que significa que el texto comienza a imprimirse de izquierda a derecha y también los bordes.

Ejemplo 2: en esta aplicación, veremos cómo usar las propiedades de inicio y finalización cuando la dirección del texto se establece de derecha a izquierda.

import 'package:flutter/material.dart';
 
void main() {
  runApp(
    MaterialApp(
      builder: (context, child) {
        return Directionality(
          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: () {},
          ), //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'), //NetworkImage
                  ), //DecorationImage
                  border: BorderDirectional(
                    start: BorderSide(
                        color: Colors.green,
                        width: 4,
                        style: BorderStyle.solid), //BorderSide
                    end: BorderSide(
                        color: Colors.blue,
                        width: 4,
                        style: BorderStyle.solid), //BorderSide
                  ), //Border
                ), //BoxDecoration
              ), //Container
            ), //SizedBox
          ), //Padding
        ), //Center
      ), //Scaffold
      debugShowCheckedModeBanner: false,
    ), //MaterialApp
  );
}

Producción: 

propiedades de inicio y final 

Explicación: esta aplicación también es similar a la anterior, excepto por el hecho de que la dirección del texto se establece en rtl (de derecha a izquierda). Y mirando el código podemos ver que el widget BorderDirectional también es el mismo que el ejemplo anterior. Pero en la salida, podemos ver que esta vez el borde de color verde se imprime en el lado derecho y el borde azul en el lado izquierdo. Nuevamente, la razón es la dirección del texto que comienza desde la izquierda y va hacia la derecha.

Ejemplo 3: En este ejemplo, veremos cómo agregar un borde en todas las direcciones alrededor de la imagen usando el widget BorderDirectional .

        
                    // Code Snippet Border     
                   ...
                   border: BorderDirectional(
                    start: BorderSide(
                        color: Colors.green,
                        width: 4,
                        style: BorderStyle.solid), //BorderSide
                    end: BorderSide(
                        color: Colors.blue,
                        width: 8,
                        style: BorderStyle.solid), //BorderSide
                    top: BorderSide(
                        color: Colors.green,
                        width: 4,
                        style: BorderStyle.solid), //BorderSide
                    bottom: BorderSide(
                        color: Colors.blue,
                        width: 8,
                        style: BorderStyle.solid), //BorderSide
                  ), //Border
                  ...

Producción:

frontera en todas las direcciones

Explicaciones: en esta aplicación, la dirección del texto no se menciona y, de forma predeterminada, está configurada en ltr (de izquierda a derecha). Echando un vistazo al fragmento de código, podemos ver que las propiedades de inicio y superior son las mismas y las propiedades de final y de fondo son las mismas. En las propiedades superior e inicial , el color se establece en verde, el ancho es de 4 píxeles y el estilo del borde se establece en sólido. En el lado del borde final e inferior , el color se establece en azul, el ancho en 8 píxeles y el estilo se establece nuevamente en sólido.