Share
Flutter se está convirtiendo rápidamente en uno de los marcos más populares para desarrollar aplicaciones móviles multiplataforma. La mayoría de los desarrolladores de Android y iOS de hoy están empezando a aceptar que es una alternativa más rápida y mejor preparada para el futuro que otras plataformas multiplataforma como React Native y NativeScript..
Google no deja ninguna piedra sin mover para atraer a más desarrolladores. Por ejemplo, Google I / O este año tuvo varias sesiones en profundidad que se centraron en desarrollar aplicaciones compatibles con Material Design. Durante una de las sesiones, Google también anunció que Flutter será una plataforma de primera clase para Material Design..
En esta serie de tutoriales, te ayudaré a dominar los conceptos básicos del desarrollo de aplicaciones de Android con Flutter. En este tutorial, que comienza con la serie, me centraré en los widgets de Flutter, los componentes básicos de todas las aplicaciones de Flutter..
Para aprovechar al máximo esta serie, necesitarás:
Después de instalar algunos complementos ligeros, puede usar Android Studio, que los desarrolladores de aplicaciones nativas de IDE para Android están más acostumbrados a desarrollar aplicaciones Flutter..
Comience lanzando Android Studio y seleccionando Configurar> Complementos Opción en la pantalla de bienvenida..
En el cuadro de diálogo que aparece, pulse la tecla Navegar por los repositorios botón y buscar el plugin Flutter.
Una vez que encuentre el plugin, presione su Instalar botón. En este punto, se le preguntará si desea instalar también el complemento Dart. prensa Sí para proceder.
Después de que ambos complementos estén instalados, presione Reiniciar Android Studio botón para completar la configuración.
Después del reinicio, podrás ver un Iniciar un nuevo proyecto de Flutter Botón en la pantalla de bienvenida de Android Studio. Presiona para comenzar a crear tu primer proyecto Flutter..
En la siguiente pantalla, elige la Aplicación Flutter opción y presione Siguiente.
Ahora verá un formulario solicitando varios detalles sobre su aplicación Flutter, como su nombre y ubicación. Asegúrese de que escribe valores válidos en todos los campos.
El complemento Flutter no viene incluido con el SDK de Flutter. Por lo tanto, debe instalar el SDK por separado. Puedes hacerlo presionando el Instalar SDK botón ahora.
Dependiendo de la velocidad de su conexión a Internet, la instalación puede tardar bastante tiempo en completarse. Después de que tenga éxito, podrás presionar el Siguiente Botón para completar la configuración del proyecto..
A lo largo de este tutorial, escribirás un código dentro de lib / main.dart expediente. De manera predeterminada, contendrá algún código de muestra, que no necesitará. Así que borra todo su contenido antes de continuar..
El marco de Flutter utiliza el lenguaje de programación Dart, un lenguaje fácil de aprender cuya sintaxis es muy similar a la de Java y C. En consecuencia, como la mayoría de los programas Java y C independientes, una aplicación de Flutter también necesita una principal() función, una función especial que sirve como punto de entrada a la aplicación.
En consecuencia, agregue el siguiente código a la main.dart expediente:
void main () // TO DO
En este punto, puede pulsar Shift-F10 para construir y ejecutar la aplicación. Si no encontró ningún error en los pasos anteriores, debería ver que la aplicación muestra un lienzo blanco en blanco en su dispositivo.
Todas las aplicaciones de Flutter están compuestas por uno o más widgets, instancias de clases que le permiten dibujar texto e imágenes en la pantalla. Por lo general, no tendrá que programar ningún widget de bajo nivel desde cero, ya que el marco viene con una amplia variedad de widgets precompuestos y hermosos que se adhieren a los lenguajes de diseño de las plataformas Android e iOS..
Para poder utilizar widgets básicos en su aplicación, importe el widgets biblioteca agregando el siguiente código al comienzo de la main.dart expediente:
importar 'paquete: flutter / widgets.dart';
Los widgets más simples que puedes crear son widgets sin estado. Como habrás adivinado, no tienen un estado asociado con ellos y, por lo tanto, son estáticos. Son ideales para mostrar etiquetas, títulos y otros elementos de la interfaz de usuario cuyo contenido es poco probable que cambie mientras se ejecuta la aplicación. Para crear un widget sin estado, debe ampliar el Marcha sin Estado clase y anular su construir() método. El siguiente código de ejemplo le muestra cómo:
la clase MyFirstWidget extiende StatelessWidget @override Widget build (contexto de BuildContext) // Más código aquí
Como se puede ver en el código anterior, el construir() método debe devolver un Widget objeto. Usted es libre de elegir y devolver cualquiera de las docenas de widgets prefabricados que ofrece Flutter. Por ejemplo, si desea mostrar una línea de texto, puede crear y devolver un Texto widget como se muestra a continuación:
Accentsconagua
Texto de retorno ("¡Esto es bueno!", textDirection: TextDirection.ltr);Tenga en cuenta que siempre debe recordar especificar la dirección de su texto mientras usa una Texto widget.
Sin embargo, si ejecuta la aplicación de inmediato, no podrá ver el texto. Eso es porque todavía no has instanciado tu widget sin estado. Así que ve a la principal() método, ejemplificar el widget en su interior, y pasarlo a la runApp () método. Así es cómo:
runApp (nuevo MyFirstWidget ());
En el momento en que agregue el código anterior y guarde su proyecto, Android Studio debería recargar automáticamente la aplicación en su dispositivo, permitiéndole ver el texto..
Si desea mostrar una imagen en lugar de texto, puede simplemente reemplazar la Texto widget con un Imagen widget dentro de tu clase construir() método. El siguiente código le muestra cómo crear un Imagen Widget que descarga y muestra una imagen remota:
volver Image.network ("https://images.pexels.com/photos/1168940/pexels-photo-1168940.jpeg");Al guardar su proyecto nuevamente, debería ver algo como esto en su dispositivo:
Todas las aplicaciones de Flutter se pueden considerar como árboles de widgets. La aplicación que creó en el paso anterior es un árbol de widgets con un solo widget. Utilizando Texto o Imagen Sin embargo, los widgets como los elementos principales del árbol de widgets no son una buena idea porque no podrá agregarles widgets secundarios..
Flutter ofrece varios widgets que pueden actuar como contenedores para otros widgets. Los más utilizados son los Fila y Columna widgets Como sus nombres sugieren, el Fila widget le permite colocar varios widgets uno al lado del otro, y el Columna El widget te ayuda a colocar los widgets uno debajo del otro. Son indispensables a la hora de crear arboles de widgets más profundos..
El siguiente código le muestra cómo usar el Columna Widget para crear un árbol de widgets que tiene dos hijos: un Texto widget y un Imagen widget.
Text myText = Text ("¡Esta es una foto bonita!", TextDirection: TextDirection.ltr); Image myImage = Image.network ("https://images.pexels.com/photos/1168940/pexels-photo-1168940.jpeg"); Columna de retorno (niños: [myText, myImage]); La aplicación ahora debería verse así:
Además, hay widgets que te ayudan a posicionar mejor un solo widget. Por ejemplo, el Centrar El widget te ayuda a centrar un widget. Del mismo modo, un Envase El widget te permite agregar relleno y márgenes a tus widgets.
El siguiente código le muestra cómo centrar la Columna widget que acaba de crear insertándolo dentro de una Centrar widget:
Centro de retorno (niño: Columna (niños:[myText, myImage], mainAxisSize: MainAxisSize.min));
En el código anterior, tenga en cuenta que el Columna Widget utiliza una propiedad adicional llamada mainAxisSize, cuyo valor se establece en min. Es necesario porque, antes de centrar una columna, debe hacer que su altura sea igual a la suma de las alturas de todos sus hijos. Sin la propiedad, el Columna El widget será tan grande como la pantalla del dispositivo, y el Centrar widget no tendrá ningún efecto en él.
Todo este tiempo, has estado usando widgets básicos que son parte de la widgets biblioteca. Flutter tiene una biblioteca alternativa llamada material, que ofrece materiales de diseño de widgets. Para usarlo en su aplicación, reemplace la declaración que importa el widgets biblioteca con lo siguiente:
importar 'paquete: flutter / material.dart';
A continuación, para aplicar el diseño de Material Design a sus widgets, debe tener un MaterialApp Widget en la parte superior de su árbol de widgets. También debe insertar todos los widgets que creó anteriormente dentro de un Andamio widget, que puede servir como la pantalla de inicio de la MaterialApp widget.
Además, como la mayoría de las aplicaciones de Diseño de materiales tienen una barra de aplicaciones, también puede configurar Andamio widgets appBar propiedad a un nuevo AppBar widget.
El siguiente código le muestra cómo hacer todo eso de manera concisa:
volver MaterialApp (home: Scaffold (appBar: AppBar (title: Text ("My App")), body: Center (child: Column (children: [myText, myImage], mainAxisSize: MainAxisSize.min),))); La aplicación debería verse mucho mejor ahora.
Los widgets sin estado son inmutables. Con el código que escribió en los pasos anteriores, no hay una manera fácil de modificar el contenido de Texto widget o el Imagen widget ¿Por qué? Porque el marco Flutter prefiere la programación reactiva a la programación imperativa. En consecuencia, la mayoría de sus widgets no tienen métodos de establecimiento que puedan actualizar sus contenidos en tiempo de ejecución. Por ejemplo, el Texto widget no tiene setText () Método que te permitirá cambiar el texto que está mostrando..
Los widgets con estado, por otro lado, son mutables, aunque no directamente. Ellos confian en Estado objetos para decidir lo que deben mostrar en cualquier instancia dada. Como tal, siempre que un Estado cambios en los objetos, el marco actualizará automáticamente el contenido de cualquier widget con estado conectado a él.
Para crear un widget con estado, debe extender el Stateful Widget clase y anular su createState () método.
la clase MySecondWidget extiende StatefulWidget @override StatecreateState () // TO DO
A continuación, debe crear una nueva costumbre. Estado Clase que contiene variables que forman el estado del widget con estado. Además, dentro de la clase, debe anular el construir() Método para devolver su árbol de widgets.
El siguiente código le muestra cómo crear un Estado clase que contiene una sola variable llamada url:
clase MyState extiende el estadoString url = "https://source.unsplash.com/random/800x600"; // Una imagen aleatoria de Unsplash @override Widget build (contexto BuildContext) // Más código aquí
En aras de un ejemplo concreto, ahora creamos un árbol de widgets de Material Design que contiene un Imagen widget, que muestra una imagen al azar, y una Botón levantado Widget, que el usuario puede presionar para cargar una nueva imagen aleatoria. El siguiente código le muestra cómo:
volver MaterialApp (inicio: Scaffold (cuerpo: Centro (niño: Columna (mainAxisSize: MainAxisSize.min, niños:[RaisedButton (niño: texto ("Press Me"), onPressed: changeURL,), Image.network (url)])))));
Tenga en cuenta que el Imagen El constructor del widget ahora toma el url variable como su entrada, en lugar de una cadena literal. Esto permite al marco utilizar el último valor de la variable siempre que el Imagen el widget está dibujado.
También tenga en cuenta que la Botón levantado widget tiene un onPressed atributo que apunta a un oyente de eventos llamado changeURL (). El método aún no existe, así que créalo..
void changeURL () // Más código aquí
Dentro del método, debe, por supuesto, cambiar el valor de la url variable. Sin embargo, no debes cambiarlo directamente. Si lo hace, el marco de Flutter no será notificado del cambio. Para actualizar correctamente el estado de un widget con estado, siempre debe hacer todos los cambios dentro de la setState () método.
Por ahora, para mostrar imágenes al azar, le sugiero que use el servicio Unsplash Source. Todo lo que necesita hacer para descargar una imagen al azar es hacer una solicitud HTTP a su URL y pasarle una cadena de consulta única..
El siguiente código le muestra cómo hacerlo usando una marca de tiempo para construir la cadena de consulta única:
setState (() url = "https://source.unsplash.com/random/800x600/?" + "q = $ new DateTime.now (). millisecondsSinceEpoch";);
En este punto, su costumbre. Estado la clase esta lista Todo lo que necesita hacer a continuación es crear una instancia y devolverlo desde el createState () método de su widget con estado.
return MyState ();
Si pasa una instancia de su widget con estado a la runApp () Método, vuelva a cargar la aplicación y presione el botón varias veces, debería ver que muestra una nueva foto cada vez.
Ahora sabe cómo trabajar con widgets sin estado y con estado en sus aplicaciones de Flutter. También aprendió cómo aplicarles un tema de Diseño de materiales, cambiar sus contenidos de forma dinámica y hacerlos interactivos..
Vale la pena señalar que Flutter no utiliza los widgets nativos de ninguna plataforma móvil. Dibuja todos los widgets en sí, utilizando un motor de gráficos 2D de alto rendimiento llamado Skia, que utiliza la GPU ampliamente. Como resultado, las aplicaciones de Flutter a menudo se ejecutan a cerca de 60 fps y se sienten muy fluidas y receptivas.
Para obtener más información sobre los widgets en Flutter, consulte la documentación oficial..
