arrow_back Volver
Inicio keyboard_arrow_right Artículos keyboard_arrow_right Artículo

Flutter que es y cómo funciona.

Marines Méndez

Software Developer

av_timer 3 Min. de lectura

remove_red_eye 21782 visitas

calendar_today 29 Octubre 2019

Google nos ha presentado la tecnología Flutter, esta tecnología puede ser la solución para construir aplicaciones de alto rendimiento y alta fidelidad para iOS y Android desde la base de código único pero que es flutter?

¿Que es Flutter?

Flutter es el kit de herramientas de interfaz de usuario de Google para crear hermosas aplicaciones compiladas de forma nativa para dispositivos móviles, web y de escritorio desde una única base de código, flutter usa el lenguaje de Dart. Todo dentro de una aplicación Flutter es un widget en Flutter, desde un simple Texto, Botones o cualquier diseños de pantalla. Estos widgets se organizan en un orden jerárquico para mostrarse en la pantalla. Los widgets que pueden contener widgets dentro se llaman Container Widget. La mayoría de los widgets de diseño son widgets de contenedor, excepto los widgets que hacen un trabajo mínimo como "Text Widget". Existen dos tipos Al escribir una aplicación, normalmente creará nuevos widgets que son subclases:

Stateless

Un widget sin estado es facil de entender ya que es un widget que no cambia por ejemplo un simple Button o un Text.

Stateful

Un widget con estado es dinámico: por ejemplo, puede cambiar su apariencia en respuesta a eventos desencadenados por las interacciones del usuario o cuando recibe datos. Checkbox , Radio , Slider , InkWell , Form y TextField son ejemplos de widgets con estado. Subclase de widgets con estado StatefulWidget .

Ciclo de vida de Stateful

1.- createState ()

Cuando se le ordena a Flutter que construya un StatefulWidget, llama inmediatamente createState(). Este método debe existir.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

2.-initState ()

Se llama cuando el objeto se inserta en el árbol, exactamente 1 vez por componente. Este método es muy útil, para los que han trabajado con android nativo este método es similar a onCreate(). Durante este ciclo de vida también podemos verificar algunos aspectos del widget como: ¿ se renderizo? ¿está montado actualmente?

@override
void initState() {
  // TODO: implement initState
  super.initState();
}

Mounted Cada widget creado tendrá este valor y se convierten en verdaderos cuando se asigna buildContext y se encuentra actualmente en un árbol. Mantendrá esos valores hasta que se llame a dispose.

addPostFrameCallback Se debe de llamar dentro de initState

@override
void initState () {
 super .initState ();
WidgetsBinding.instance.addPostFrameCallback((_)=>refreshIndicatorKey.currentState.show());
}

En este ejemplo uso el método addPostFrameCallback para poder mostrar el refreshIndicator solo una vez, así que si necesitas algún elemento que se muestre solo una vez al inicio puedes usar este método.

didChangeDependencies ()

Este método se llama inmediatamente después de initState () la primera vez que se crea el widget.

@override
void didChangeDependencies() {
  // TODO: implement didChangeDependencies
  super.didChangeDependencies();
}

build():

Podemos decir con certeza que este método es el más "importante". Aquí retransmite todo su árbol de Widgets para ser renderizado y se llama justo después de didChangeDependencies () . Aquí se procesa toda la GUI y se llamará cada vez que se necesite renderizar la UI porque dibujar nuevamente es una operación barata.

@override
Widget build(BuildContext context) {

}

didUpdateWidget(Widget oldWidget):

Tal vez este no sea un ciclo de vida que se encuentre muy a menudo, pero, como su nombre lo indica, se llamará una vez que el Widget principal haya realizado un cambio y necesite volver a dibujar la interfaz de usuario. Obtendrá el parámetro oldWidget y puede compararlo con el widget actual para hacer una lógica adicional allí mismo.


void didUpdateWidget(Home oldWidget) {
  // TODO: implement didUpdateWidget
  super.didUpdateWidget(oldWidget);
}

setState():

Este método se llama a menudo desde el propio framework y cuando estamos desarrollando. Se utiliza para notificar al framework que los datos han cambiado y podemos refrescar la vista. En este ejemplo vamos actualizar la variable isLoading y en mi vista se mostrar un progressbar, cuando se carguen mis datos ocultare el progress colocando false en mi variable isLoading


setState(() {
 isLoading = true;
});


deactivate():

Nuevamente, como didUpdateWidget , este no es un sitio común para ver. Estamos llegando al punto en que nuestro Widget comienza a "morir". El framework llama a este método siempre que elimina este objeto State del árbol. En algunos casos, el framework insertará el objeto State en otra parte del árbol.


@override
void deactivate() {
}

dispose():

Este es muy importante y se llama cuando este objeto y su estado se eliminan del árbol de forma permanente y nunca se volverán a construir. Este ciclo de vida es el que necesita para cancelar la suscripción de secuencias, eliminar animaciones, etc. Es el opuesto equivalente de initState.


@override
void dispose() {
 controller.removeListener(scrollListener);
 super.dispose();

}

Si te llamo la atendion flutter puedes empezar a crear tu primera aplicación con el siguente artiulo Configurar Flutter En Intellij IDEA

Bootcamp Ciencia de Datos

12 semanas de formación intensiva en los conocimientos, fundamentos, y herramientas que necesitas para ser científico de datos

Más información