¿Qué es un widget?
Para asegurarnos de que estamos en la misma ola, comencemos con el concepto de widget. Debes haber escuchado la frase: “Todo en Flutter es un widget”. Sin embargo, esto no es del todo correcto.
Es más correcto decir que los widgets son todo lo que se muestra en la pantalla. El diseño general de la página, la posición y el tamaño del botón, el color y el tamaño del texto, todo esto se crea mediante widgets que a la final son clases con propiedades y métodos que el framework de Flutter renderiza en la pantalla se manera visual, inclusive existen widgets con mecánicas particulares que no renderizan un contenido directamente en la pantalla; por ejemplo los FutureBuilder o los StreamBuilder que permite comunicaciones asíncronas u con esta data, reenderizar un contenido, por lo tanto, ayudan a renderizar un contenido pero NO renderizan un contenido directamente o perse.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}El widget Scaffold es un widget principal para Center y Center, a su vez, es un widget principal para Column. En consecuencia, Column es un widget secundario para Center.
Cómo crear un widget
Para crear cualquier widget, se utiliza el método build, que acepta BuildContext como argumento.BuildContext es una descripción de la posición del widget en el árbol de widgets y además trae muchisima mas informacion sobre el elemento que estamos renderizando, como el estado, tipo de widget, etc. Es esta clase la que describe la relación padre-hijos y permite implementar funciones como showDialog, Theme.of y algunas otras funciones que permiten utilizar el contexto del widget padre, como su tamaño y ubicación.BuildContext se utiliza para evitar la manipulación directa del widget principal y para obtener la información necesaria que está contenida en el contexto principal.
¿Qué necesitas saber sobre el contexto?
- El contexto es un enlace a la ubicación de un widget en la estructura de un árbol de los widgets.
- El contexto puede pertenecer a un solo widget.
- Si un widget tiene widgets secundarios, el contexto del widget principal se convierte en el contexto principal para los contextos de los elementos secundarios directos.
- Un widget es visible solo en su propio contexto o en el contexto de su contexto principal.
Por lo tanto, queda claro que al conocer el contexto de los hijos, se puede encontrar fácilmente el widget principal. Por el contrario, utilizando el contexto principal, puede encontrar el widget secundario.
El método "of()"
Como ya sabemos, los widgets en Flutter tienen una estructura de árbol y pueden comunicarse con otros widgets ubicados tanto debajo como encima del árbol de widgets. La "comunicación" de los widgets entre sí se proporciona mediante el método Of (). Consideremos un pequeño ejemplo:
@override Widget build(context) { return Text('Subscribe to the AppVesto Instagram!', style: TextStyle(color: Theme.of(context).primaryColor), ); }El método of() busca en el árbol de widgets un widget padre que sea del tipo Theme y usa su propiedad primaryColor para el widget actual. Esto es posible porque Flutter conoce la posición del objeto Theme en el árbol en relación con el buildContext actual.
El método of() puede ser útil para muchas tareas, como obtener el tamaño de la pantalla con MediaQuery.of(contexto) o navegar con Navigator.of(contexto). Para crear algunos widgets, como snackBar, necesitas usar el contexto de Scaffold más cercano para que Flutter pueda dibujarlo correctamente en la pantalla.
Cuando ejecute el siguiente código obtendrá un error: "Scaffold.of() llamado con un contexto que no contiene un Scaffold".
Un ejemplo muy particular sobre el funcionamiento del contexto y su importancia para construir ciertos widgets como el de SnackBar; el mismo necesita estar contenido dentro de un Scaffold para poder visualizarse; si no hay Scaffold NO hay vida para el SnackBar.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter