Flutter: "Todo es un widget", parte 1

Lo primero que todo desarrollador de Flutter/Dart debe comprender es que en este marco “TODO ES UN WIDGET”. Los widgets son básicamente componentes de la interfaz de usuario utilizados para crear la interfaz de usuario de la aplicación (valga la redondancia). Esta característica de componibilidad nos ayuda a crear una interfaz de usuario de cualquier complejidad. Es dos sencillos artículos quiero que comprendan bien los conceptos de que es un widget antes de seguir adelante.

Para empezar explicando la jerarquía de widgets vamos a retomar el código del artículo anterior (agregándole un pequeño cambio) a partir de un diagrama:

import 'package:flutter/material.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: 'Mi primera aplicacion en Flutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter'),
    );
  }
}
class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(this.title),
      ),
      body: Center(
          child:
              GestureDetector(
                  onTap: () => print("Esto es un toque"),
                  child: Text(
                     'Hola Mundo'
                  )
              )
      ),
    );
  }
}

Comentemos los siguientes puntos en este diagrama:

• MyApp: widget creado por el usuario, es lanzado por la función starter runApp(…) y crea el widget nativo de Flutter, MaterialApp.
• MaterialApp: widget para especificar la interfaz de usuario de la página de inicio, que nuevamente es un widget creado por el usuario, MyHomePage.
• MyHomePage: construye un widget nativo de flutter, Scaffold.
• Scaffold: entre las propiedades del ejemplo están body y appBar; body especifica la interfaz de usuario principal y appBar se usa para especifica el encabezado con un widget nativo (AppBar)
• Center: widget nativo para centrar otros widgets, es el que inicia en este caso el body.
• GestureDetector: widget nativo que permite capturar gestos, widget hijo de Center.
• Text: widget nativo para proporcionar un texto, en este caso es hijo de appBar y de GestureDetector.

StatelessWidget y StatefulWidget

Los widgets en Flutter extienden de dos widgets principales StatelessWidget y StatefulWidget, en el caso de StatelessWidget el método de compilación build(…) obtiene el entorno de contexto necesario para compilar los widgets a través del parámetro BuildContext y devuelve el widget que construye por lo que los widgets que hereden de este, nunca cambiarán. Por otra parte los widgets que quieran admitir el mantenimiento del estado deben heredar de StatefulWidget que lo hacen reactivos, esto es similar a reactjs por lo que StatefulWidget se autodevuelve cada vez que se cambia su estado interno. La nueva representación se optimiza al encontrar la diferencia entre la interfaz de usuario antigua y nueva y muestra solo los cambios necesarios.

Hasta este punto he brindado un ejemplo de jerarquía de widgets en Flutter y la diferencia entre los widgets StatelessWidget y StatefulWidget, en la segunda parte seré más específico y cometaré sobre los distintos grupos de Widgets.