Flutter – Trabajar con diseños

Antes de hablar de Layout en Flutter, solo hay que tener en cuenta una cosa: “Todo en Flutter es Widget”. Lo que significa que el núcleo del diseño en cualquier aplicación Flutter es el widget. En pocas palabras, todas las imágenes, íconos, etiquetas y texto, etc. son técnicamente widgets de diferentes tipos y diseños. En este artículo, exploraremos en detalle el concepto de diseños en flutter.

Para una mejor comprensión del concepto, tomemos un solo ejemplo y analicemos esos componentes para una mejor comprensión.

Figura 1

En la imagen de arriba, acaba de ver un diseño que no es más que una composición de algunos widgets básicos.

Figura 2

Ahora mire la imagen de arriba aquí, solo describimos los diseños, mire de cerca, puede ver que dentro de un widget sin formato hay widgets de 3 columnas y cada columna contiene un ícono y una etiqueta. Eche un vistazo al siguiente diagrama de árbol de widgets.

Fig. 3

Ahora mire de cerca la figura 2 y la figura 03 , el widget principal es un widget de fila, dentro de ese widget de la tercera columna y en cada columna, hay un ícono y dentro del contenedor, hay un widget de texto. 

Ahora hablemos de algunos widgets de diseño comunes. El widget de diseño común se puede dividir en dos categorías:

1. Widgets estándar
2. Widgets de materiales

Widgets estándar:

Algunos widgets básicos y útiles se utilizan en casi todas las aplicaciones de flutter. Los widgets estándar en flutter son Container, GridView, ListView, Stack.

Envase:

El contenedor es el widget más utilizado en flutter. Podemos agregar propiedades de relleno, margen, borde y color de fondo en este widget y podemos personalizarlo de acuerdo con nuestros requisitos. Contiene solo un único widget o elemento secundario.

Ejemplo:

Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SafeArea(
             // Container implementation
              child: Container(
               height: 100.0,
               width: 100.0,
              color: Colors.green,
        ),
      )
     
    );

Producción:

Aquí definiremos la función que devuelve un widget contenedor.

// function returning container widget
Widget _buildImageColumn() => Container(
        decoration: BoxDecoration(
          color: Colors.black12,
        ),
        child: Column(
          children: [
            Container(
              height: 100.0,
              width: 50.0,
              color: Colors.red,
            ),
            Container(
              height: 100.0,
              width: 50.0,
              color: Colors.yellow,
            ),
          ],
        ),
      );
 
 
@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green,
          title: Text(widget.title),
        ),
       
      // replace this section in your app
        body: Center(
          child:_buildImageColumn()
        ));
  }

Producción:

Este es un ejemplo un poco complejo, solo mire buildImage() allí, creamos un contenedor con una imagen de fondo negra que es un widget principal, luego creamos un widget de columna que es el elemento secundario del contenedor, dentro de la columna, creamos dos contenedores con diferentes colores, espero que lo consigas.

Vista en cuadrícula:

El widget de vista de cuadrícula es una lista desplazable bidimensional; de forma predeterminada, proporciona dos listas prefabricadas, pero puede personalizarlo y crear su cuadrícula personalizada.

• Puede cambiar la propiedad grid.count y especificar el número de columnas.
• gridView.extend permite el ancho máximo de píxeles de un mosaico.

Ejemplo:

// Method returning Grid Widget
Widget _buildGrid() => GridView.extent(
      maxCrossAxisExtent: 150,
      padding: const EdgeInsets.all(4),
      mainAxisSpacing: 4,
      crossAxisSpacing: 4,
      children: _buildGridTileList(10));
 
  List<Container> _buildGridTileList(int count) => List.generate(
      count,
      (i) => Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ));
 
 
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green,
          title: Text(widget.title),
        ),
       
      // Replace this section in your app
        body: Center(child: _buildGrid()));
  }

Producción:

Note: Just try to change the max maxCrossAxisExtent value you can figure out what is the use of maxCrossAxisExtent.

Vista de la lista:

La vista de lista es como un widget de columna, pero tiene la ventaja de que se puede desplazar . La vista de lista puede ser horizontal o vertical. Si los contenidos en la vista de lista no se ajustan, agrega una funcionalidad desplazable .

Ejemplo:

// function returning List view widget
Widget _buildList() => ListView(
   
        // name is a listTile widget which is defined below
      children: [
        name('james', 'thomas'),
        name('Ajay', 'kumar'),
        name('Arun', 'das'),
        name('Roxie', 'St'),
        name('Stanlee', 'jr'),
        name('AMC', 'hales'),
        Divider(),
        name('Monty',"Chopra"),
        name('Emmy', 'Ave'),
        name(
            'Chaitanya', ' kumar'),
        name('Rio', 'St'),
      ],
    );
 
 
 
// name is a function returning ListTile widget
ListTile name(String firstName, String lastName) => ListTile(
      title: Text(firstName,
          style: TextStyle(
            fontWeight: FontWeight.w500,
            fontSize: 20,
          )),
      subtitle: Text(lastName),
      leading: Icon(
        Icons.arrow_back_ios,
        color: Colors.blue[500],
      ),
    );
 
 
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green,
          title: Text(widget.title),
        ),
       
      // replace this section in your app
        body: Center(child: _buildList()));
  }

Producción:

Pila:

Todo el mundo conoce el significado de apilar, es decir encima de otro. Exactamente este widget sirve para que podamos poner un widget encima de otro.

Note: This is not similar to column widget, in column widget the children are in a column fashion
      that is one after another not overlapping to each other, but in the stack widget case we can
      see the widgets can be overlapped to each other.

• El primer widget en la lista de hijos es el widget base; los elementos secundarios subsiguientes se superponen en la parte superior de ese widget base.
• La pila no puede ser desplazable.

Ejemplo:

// this function returns a stack widget
Widget _buildStack() => Stack(
        alignment: const Alignment(0.6, 0.6),
        children: [
          Container(
            width: 150,
            height: 150,
            decoration: BoxDecoration(
              color: Colors.black45,
              shape: BoxShape.circle
            ),
            child: Center(
              child: Text(
                'Mia B',
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                  color: Colors.black,
                ),
              ),
            ),
          ),
        ],
      );
 
@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green,
          title: Text(widget.title),
        ),
       
      // replace this section in your app
        body: Center(child: _buildStack()));
  }

Producción:

Tarjeta :

Una tarjeta es de la biblioteca Material, puede contener un solo niño, todas las tarjetas de uso de aplicaciones modernas en su aplicación. En Flutter, una tarjeta presenta esquinas ligeramente redondeadas y una sombra paralela, lo que le da un efecto 3D. Al cambiar la propiedad de elevación de la tarjeta, puede controlar el efecto 3D como una sombra paralela.

Ejemplo:

// Function returns the SizeBox Widget inside that Card widget is present
 
Widget _buildCard() => SizedBox(
    height: 210,
    child: Card(
      elevation: 20,
      child: Column(
        children: [
          ListTile(
            title: Text('Geeks For Geeks',
                style: TextStyle(fontWeight: FontWeight.w500)),
            subtitle: Text('log writting'),
            leading: Icon(
              Icons.restaurant_menu,
              color: Colors.blue[500],
            ),
          ),
          Divider(),
          ListTile(
            title: Text('Noida, India',
                style: TextStyle(fontWeight: FontWeight.w500)),
            leading: Icon(
              Icons.contact_phone,
              color: Colors.blue[500],
            ),
          ),
          ListTile(
            title: Text('gfg@contribute.com'),
            leading: Icon(
              Icons.contact_mail,
              color: Colors.blue[500],
            ),
          ),
        ],
      ),
    ),
  );
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green,
          title: Text(widget.title),
        ),
       
      // Replace this section in your app
        body: Center(child: _buildCard()));
  }

Producción:

Aquí, en este ejemplo, le damos la elevación 20, puede cambiar eso y ver el resultado.

ListTile:

ListTile también es de la biblioteca de materiales. Para una manera fácil de crear una fila que contenga hasta 3 líneas de texto e iconos opcionales al principio y al final. ListTile se usa más comúnmente en Card o ListView, pero se puede usar en otros lugares.

Ejemplo: 

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green,
          title: Text(widget.title),
        ),
        body: Container(
          child: ListTile(
            title: Text('Geeks For Geeks',
                style: TextStyle(fontWeight: FontWeight.w500)),
            subtitle: Text('log writting'),
            leading: Icon(
              Icons.restaurant_menu,
              color: Colors.blue[500],
            ),
          ),
        ));
  }

Producción: