Este artículo está escrito para desarrolladores de Android que desean aplicar sus conocimientos existentes para crear aplicaciones móviles con Flutter. En este artículo, veremos el equivalente de Actividad en Flutter.
Prerrequisitos
Se supone que ya ha configurado Flutter en su PC y puede ejecutar la aplicación Hello World. Si no, entonces hazlo .
Dart se basa en el concepto de OOP, por lo que no es difícil para un desarrollador de Android comenzar a usarlo.
Propósito
Al final del artículo, podremos crear una interfaz de usuario para Actividad usando widgets Flutter, que se verá así:
En general, si mira dentro del proyecto de Android generado usando Flutter y abre el archivo AndroidManifest.xml , encontrará que solo hay una Actividad allí, por ejemplo, FlutterActivity . Pero en este artículo, nos centraremos en el diseño de la interfaz de usuario para Activity in Flutter. Como? Uso de andamios (ing. Andamios ).
Andamio
Scaffold es una colección de widgets que representan visualmente la interfaz de usuario para una Actividad. Por lo general, una actividad se usa para mostrar una sola pantalla, que consta de muchos componentes de vista, como una barra de herramientas, menú, menú lateral, snack bar, FAB, etc. Y FrameLayout usa como contenedor de fragmentos en Activity. En el andamio, todo esto se representa como widgets.
Recuerde, cualquier componente en Flutter es un widget .
La imagen de arriba muestra los componentes del andamio, que proporciona una API para mostrar los menús laterales, el panel inferior, la barra de herramientas y el área de contenido.
Dado que los andamios son widgets materiales, deben heredarse de otros componentes materiales, pero lo discutiremos con más detalle en otros artículos. Ahora nos centraremos en crear un widget de andamio.
import 'package:flutter/material.dart'; void main() => runApp(new MaterialApp( home: new Scaffold( ), ));
Cuando ejecute este código, verá una pantalla en blanco en blanco porque todavía no ha agregado nada al andamio. Por lo tanto, definamos el color de fondo usando la propiedad backgroundColor y configuremos el color en amarillo:
void main() => runApp(new MaterialApp( home: new Scaffold( backgroundColor: Colors.yellowAccent, ), ));
Ahora verá una pantalla completamente amarilla de su aplicación. Puede jugar con otras propiedades de andamio, cuya lista completa se puede encontrar en la documentación oficial .
Ahora sabemos cómo crear un andamio. Exploremos sus propiedades básicas una por una.
AppBar es esencialmente la misma Toolbar que usamos en nuestra actividad. La imagen muestra dónde se muestran las propiedades de la barra de aplicaciones .
Leading : widget que aparece antes del título. Puede ser un ícono de menú de hamburguesa o un botón de retroceso.
título : un título de barra de herramientas envuelto en un widget de Text .
acciones : este es el equivalente de menu.xml en el que creamos un conjunto de <item/> para mostrar elementos del menú. La propiedad de acciones acepta una lista de widgets para mostrar en el menú. Por lo general, estos widgets se representan como IconButtons , que son equivalentes a <item/> .
abajo : comúnmente usado para una TabBar ubicada debajo de la AppBar.
flexibleSpace : este widget se utiliza para crear el efecto CollapsingToolbarLayout (barra de herramientas plegable).
Por lo tanto, puede crear una barra de aplicaciones simple con un icono, título y menú:
import 'package:flutter/material.dart'; void main() => runApp(new MaterialApp( home: new Scaffold( backgroundColor: Colors.yellowAccent, appBar: new AppBar( leading: new Icon(Icons.menu), title: new Text("My Title"), actions: <Widget>[ new IconButton( icon: new Icon(Icons.shopping_cart), onPressed: () {}, ), new IconButton( icon: new Icon(Icons.monetization_on), onPressed: () {}, ) ], ), ), ));
Este es el resultado. Se ve exactamente como la barra de herramientas habitual que solemos utilizar. Puede experimentar agregando o quitando widgets, agregando estilo o color a un widget específico.
Como ejercicio práctico, puede estudiar el resto de las propiedades de AppBar y trabajar con ellas.
2. Cuerpo (contenedor para cualquier componente de visualización)
Este es el componente principal del andamio. Funciona igual que el Fragment Container en Android. Se requiere un widget para mostrar en el área del contenedor. Esta es el área donde mostramos el contenido principal al usuario. En nuestro ejemplo, por simplicidad, agregaremos rojo al cuerpo. En la vida real, además del color de fondo, se utilizan muchos otros widgets, por ejemplo, ListView, Row, Column, Stack, etc.
import 'package:flutter/material.dart'; void main() => runApp(new MaterialApp( home: new Scaffold( backgroundColor: Colors.yellowAccent, appBar: new AppBar( leading: new Icon(Icons.menu), title: new Text("My Title"), actions: <Widget>[ new IconButton( icon: new Icon(Icons.shopping_cart), onPressed: () {}, ), new IconButton( icon: new Icon(Icons.monetization_on), onPressed: () {}, ) ], ), body: new Container( color: Colors.red, ), ), ));
El cuerpo se muestra detrás de la barra de aplicaciones, FAB y la barra lateral. Aunque aplicamos un fondo amarillo al andamio, se muestra un color de cuerpo rojo en la pantalla, superponiendo el fondo del andamio.
3. Cajón (DrawerLayout)
Este widget es un DrawerLayout en Android que DrawerLayout desde el lado izquierdo de la Actividad para mostrar los enlaces de navegación de la aplicación.
El cajón se usa comúnmente con la propiedad Scaffold.drawer . Al igual que Android, usamos NavigationView dentro de DrawerLayout . La siguiente tabla muestra los componentes de Vista equivalentes en Android y Flutter.
El componente secundario de un widget Drawer suele ser ListView , cuyo primer elemento es DrawerHeader , que muestra información sobre el usuario actual. El resto de los elementos de la lista generalmente se crean usando ListTiles . El siguiente código muestra cómo se crea Drawer:
import 'package:flutter/material.dart'; void main() => runApp(new MaterialApp( home: new Scaffold( backgroundColor: Colors.yellowAccent, appBar: new AppBar( title: new Text("My Title"), actions: <Widget>[ new IconButton( icon: new Icon(Icons.shopping_cart), onPressed: () {}, ), new IconButton( icon: new Icon(Icons.monetization_on), onPressed: () {}, ) ], ), drawer: new Drawer( child: new ListView( children: <Widget>[ new DrawerHeader( child: new Text("Drawer Header"), decoration: new BoxDecoration( color: Colors.blue, ), ), new Text("Item 1"), new Text("Item 2"), new Text("Item 3"), new Text("Item 4"), new Text("Item 5"), new Text("Item 6"), ], ), ), ), ));
Este es el resultado que debes obtener. Vale la pena señalar que cuando se agrega un widget de cajón al andamio en la barra de aplicaciones, el ícono del menú de hamburguesas se agrega automáticamente, por lo que todos los demás íconos deben eliminarse.
Para obtener más información sobre este widget, puede familiarizarse con un ejemplo práctico de la documentación o un artículo separado sobre este tema.
4. BottomNavigationBar (BottomNavigationView)
El widget de material que se muestra en la parte inferior de la aplicación, BottomNavigationBar, consta de varios elementos en forma de texto e iconos.
La BottomNavigationBar generalmente se aplica utilizando la propiedad Scaffold.bottomNavigationBar.
En Android, define elementos de menú en BottomNavigationView utilizando la propiedad de la app:menu="@menu/my_navigation_items" , donde my_navigation_items es una lista de todos los elementos de menú en la <item/> . Flutter utiliza la propiedad de items , que toma como argumento una lista de BottomNavigationBarItem , cada uno de los cuales consta de un icono, título y color de fondo en el menú.
import 'package:flutter/material.dart'; void main() => runApp(new MaterialApp( home: new Scaffold( backgroundColor: Colors.yellowAccent, appBar: ..., body:..., drawer: ..., bottomNavigationBar: new BottomNavigationBar(items: [ new BottomNavigationBarItem( icon: new Icon(Icons.home), title: new Text("Home"), ), new BottomNavigationBarItem( icon: new Icon(Icons.search), title: new Text("Search"), ) ]), ), ));
Ahora tenemos una barra de navegación inferior con dos elementos de menú.
Para procesar un clic y cambiar el contenido en el andamio, necesita un widget que admita el estado de guardado y algo de trabajo manual. Este tema está más allá del alcance de este artículo, pero puede leerlo en la documentación oficial .
Además, agreguemos un FAB al andamio. A continuación se muestra el código completo para crear nuestra interfaz de usuario de Actividad usando scaffold.
import 'package:flutter/material.dart'; void main() => runApp(new MaterialApp( home: new Scaffold( backgroundColor: Colors.yellowAccent, appBar: new AppBar( title: new Text("My Title"), actions: <Widget>[ new IconButton( icon: new Icon(Icons.shopping_cart), onPressed: () {}, ), new IconButton( icon: new Icon(Icons.monetization_on), onPressed: () {}, ) ], ), body: new Container( color: Colors.red, ), drawer: new Drawer( child: new ListView( children: <Widget>[ new DrawerHeader( child: new Text("Drawer Header"), decoration: new BoxDecoration( color: Colors.blue, ), ), new Text("Item 1"), new Text("Item 2"), new Text("Item 3"), new Text("Item 4"), new Text("Item 5"), new Text("Item 6"), ], ), ), bottomNavigationBar: new BottomNavigationBar(items: [ new BottomNavigationBarItem( icon: new Icon(Icons.home), title: new Text("Home"), ), new BottomNavigationBarItem( icon: new Icon(Icons.search), title: new Text("Search"), ) ]), floatingActionButton: new FloatingActionButton( onPressed: (){}, child: new Icon(Icons.add), ), ), ));
Ahora en FAB el método onPressed no onPressed definido. Por lo tanto, el botón no responderá al tacto. Si es necesario, puede agregar procesamiento para este evento.
Finalmente, obtuvimos el resultado que se discutió al comienzo de este artículo.
Conclusión
Flutter es una herramienta poderosa para desarrollar rápidamente una interfaz de usuario hermosa y de alta calidad. Proporciona muchos widgets para crear una interfaz flexible con animaciones atractivas. El andamio es uno de ellos, y esto es solo la punta del iceberg. Los siguientes artículos cubrirán otros temas.