Hola Habr! Presentando su atención la traducción del artículo "
Diseños de construcción ".
Hoy descubrimos:
- Cómo funcionan los constructores de interfaz de usuario de Flutter
- Cómo diseñar pantallas horizontal y verticalmente
- Cómo hacer la pantalla usando Flutter
El resultado de la lección de hoy será el siguiente diseño de pantalla
Paso 0: configuración del proyecto
Primero, cree un nuevo archivo de proyecto -> Nuevo proyecto Flutter -> siguiente, siguiente, siguiente ...
A continuación, cree el directorio de imágenes en la raíz del proyecto y coloque un archivo llamado lake.jpg allí. Puede descargar el archivo desde aquí.
También es necesario arreglar el archivo de configuración pubspec.yaml (algo así como Gradle para Android y Cocoa Pods en iOS, podemos agregarle dependencias externas). El texto del archivo en sí se puede descargar
aquí.La fuente del proyecto se puede descargar
aquí ; debe colocarse en el archivo main.dart
Paso 1: Gráfico de pantalla
Primero, divida el diseño en elementos simples
- Definir filas y columnas.
- Determinar si el diseño incluye una cuadrícula?
- ¿Hay elementos superpuestos?
- ¿Necesito pestañas para la interfaz de usuario?
- Presta atención a las áreas que requieren alineación o sangrado
Primero, identificamos los principales elementos grandes. En este ejemplo, 4 elementos están ordenados en una columna: una imagen, dos filas y un bloque de prueba.
A continuación, analizaremos cada línea. La primera línea, llamada "Título", tiene 3 hijos: una columna de texto, un ícono de estrella y un número. La primera columna contiene 2 filas. La primera columna ocupa mucho espacio, por lo que debe envolverla en un widget extensible.
La siguiente fila, llamada sección de botones, también tiene 3 hijos. Cada uno de ellos contiene una imagen y texto.
Finalmente, presentamos el diseño en elementos simples. La forma más fácil de utilizar el enfoque "de abajo hacia arriba" para el diseño de la pantalla. Para evitar una estructura compleja, divida la IU en variables y funciones.
Paso 2: crear una fila de encabezados
Primero, necesitamos construir la columna izquierda de la sección del encabezado. Insertar una columna dentro de un widget extensible expande la columna para usar todo el espacio restante en la fila. Establezca la propiedad crossAxisAlignment en CrossAxisAlignment.start para alinear la columna al comienzo de la fila.
Colocar una línea de texto dentro de un contenedor le permite activar el relleno. El segundo elemento secundario de la columna también es texto, está atenuado. Los dos últimos elementos están marcados con un icono de "estrella" en rojo y un texto con un valor de "41". Coloque la línea completa en el contenedor y agregue una sangría de 32 píxeles en cada lado. El código para completar estos pasos se presenta a continuación.
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { Widget titleSection = Container( padding: const EdgeInsets.all(32.0), child: Row( children: [ Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( padding: const EdgeInsets.only(bottom: 8.0), child: Text( 'Oeschinen Lake Campground', style: TextStyle( fontWeight: FontWeight.bold, ), ), ), Text( 'Kandersteg, Switzerland', style: TextStyle( color: Colors.grey[500], ), ), ], ), ), Icon( Icons.star, color: Colors.red[500], ), Text('41'), ], ), ); //... }
Paso 3: crea una serie de botones
La sección del botón consta de 3 columnas, que se construyen de acuerdo con un principio similar: un icono sobre una línea de texto. La columna en esta fila se llena de manera uniforme y el texto y los iconos se dibujan en el color principal, que se selecciona como azul en nuestro proyecto en el método build ().
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { //... return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), //... }
Dado que el código de construcción de cada fila será casi idéntico, será más eficiente usar una función anidada como buildButtonColumn (), que incluye un icono y texto y devuelve una columna con este widget.
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { //... Column buildButtonColumn(IconData icon, String label) { Color color = Theme.of(context).primaryColor; return Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, children: [ Icon(icon, color: color), Container( margin: const EdgeInsets.only(top: 8.0), child: Text( label, style: TextStyle( fontSize: 12.0, fontWeight: FontWeight.w400, color: color, ), ), ), ], ); } //... }
La función de compilación agrega un icono directamente a la columna. Coloque el texto en el contenedor para agregar relleno y sepárelo del icono. Construimos cada fila de estas columnas llamando a una función y pasando el icono y el texto dentro de la columna. Alinee la columna a lo largo del eje principal utilizando MainAxisAlignment.spaceEvenly, organizando el espacio libre antes, entre y después de cada columna.
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { //... Widget buttonSection = Container( child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ buildButtonColumn(Icons.call, 'CALL'), buildButtonColumn(Icons.near_me, 'ROUTE'), buildButtonColumn(Icons.share, 'SHARE'), ], ), ); //... }
Paso 4: construir la sección de descripción
Defina una sección de descripción que sea bastante larga. Coloque el texto en el contenedor y agregue sangría de 32 píxeles desde cada borde.
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { //... Widget textSection = Container( padding: const EdgeInsets.all(32.0), child: Text( ''' Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese Alps. Situated 1,578 meters above sea level, it is one of the larger Alpine Lakes. A gondola ride from Kandersteg, followed by a half-hour walk through pastures and pine forest, leads you to the lake, which warms to 20 degrees Celsius in the summer. Activities enjoyed here include rowing, and riding the summer toboggan run. ''', softWrap: true, ), ); //... }
Paso 5: construye la sección de imagen
Ya se han construido tres de las cuatro columnas, solo queda hacer la columna de la imagen. La imagen utilizada en este proyecto está disponible en línea bajo la licencia Creative Commons. Pero es grande y se cargará lentamente. En el paso 0, agregamos una imagen a nuestro proyecto y actualizamos el archivo de configuración, ahora agregaremos un enlace en nuestro código.
return MaterialApp( //... body: ListView( children: [ Image.asset( 'images/lake.jpg', height: 240.0, fit: BoxFit.cover, ), // ... ], ), //... );
BoxFit.cover le dice al marco de Flutter que la imagen debe ser lo más pequeña posible mientras cubre toda el área de renderizado.
Paso 6: poner todo junto
En el paso final, recopilaremos todas las piezas de nuestro código juntas. El widget está organizado en un ListView, no en una Columna porque el ListView se desplazará automáticamente mientras se desplaza en un dispositivo pequeño.
//... return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( appBar: AppBar( title: Text('Top Lakes'), ), body: ListView( children: [ Image.asset( 'images/lake.jpg', width: 600.0, height: 240.0, fit: BoxFit.cover, ), titleSection, buttonSection, textSection, ], ), ), ); //...