Widget Apilando Textos

Resumen

Cuando hablamos de apilar textos nos referimos a organizarlos de tal forma que queden unos arriba de otros formando items compuestos que luego serán parte de una lista. Para esto nos apoyaremos en los widgets: Container(), Text() y Column(), dispuestos convenientemente en un widget tree que en próximas clases completaremos con la funcionalidad de scrolling como ya veremos.

Siguiendo el análisis de la interfaz de nuestro proyecto, que hicimos en clases anteriores, haremos la composición de nuestro widget review, y luego del widget reviewList.

Presta especial atención al uso de los widgets Text y TextStyle, ya que son claves para definir la apariencia de los textos en la lista de reviews.

Progresivamente iremos apilante los textos que vamos definiendo de forma individual, usando el widget Column(), que como ya hemos visto en clases anteriores, nos permite organizar los widgets hijos unos arriba de los otros en el eje Y.

Francisco Peñalo Feliz

student•

Cree la Rating para generar las estrellas y reutilizarla en la descripción y en los reviews.

rating.dart

import 'package:flutter/material.dart';

class Rating extends StatelessWidget {
  double stars;
  double marginLeft;
  double fontSize;

  Rating(this.stars, this.marginLeft, this.fontSize);

  Widget getStar(double star) {
    var icon = Icons.star;

    if (star == 0.5) {
      icon = Icons.star_half;
    } else if (star &lt; 0.5) {
      icon = Icons.star_border;
    }
    return Container(
      margin: EdgeInsets.only(right: 3.0),
      child: Icon(
        icon,
        color: Color(0xFFf2C611),
        size: fontSize,
      ),
    );
  }

  Widget getRating(double stars) {
    var list = new List&lt;Widget&gt;();

    for (var n = 0; n &lt; 5; n++) {
      list.add(getStar(stars));
      stars--;
    }
    return Container(
      margin: EdgeInsets.only(left: marginLeft),
      child: Row(
        children: list,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return getRating(stars);
  }
}

Utilicé la clase Rating en la clase de Review para generar las estrellas.

review.dart

import 'package:flutter/material.dart';
import 'rating.dart';

class Review extends StatelessWidget {
  String pathImage = 'assets/img/frank.jpeg';
  String name = 'Francisco Peñalo';
  String details = '1 review 5 photos';
  double stars = 5;
  String comment = 'There is an amazing place in ';

  Review(this.pathImage, this.name, this.details, this.stars, this.comment);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    final userComment = Container(
      margin: EdgeInsets.only(left: 20.0),
      child: Text(comment,
          textAlign: TextAlign.left,
          style: TextStyle(
            fontFamily: 'Lato',
            fontSize: 13.0,
            fontWeight: FontWeight.w900,
          )),
    );

    final userInfo = Row(
      children: &lt;Widget&gt;[
        Container(
          margin: EdgeInsets.only(left: 20.0),
          child: Text(details,
              textAlign: TextAlign.left,
              style: TextStyle(
                fontFamily: 'Lato',
                fontSize: 13.0,
                color: Color(0xFFa3a5a7),
              )),
        ),
        Rating(stars, 5.0, 14.0)
      ],
    );

    final userName = Container(
      margin: EdgeInsets.only(
        left: 20.0,
      ),
      child: Text(name,
          textAlign: TextAlign.left,
          style: TextStyle(
            fontFamily: 'Lato',
            fontSize: 17.0,
          )),
    );

    final userDetails = Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: &lt;Widget&gt;[
        userName,
        userInfo,
        userComment,
      ],
    );

    final photo = Container(
      margin: EdgeInsets.only(top: 20.0, left: 20.0),
      width: 80.0,
      height: 80.0,
      decoration: BoxDecoration(
          shape: BoxShape.circle,
          image: DecorationImage(
            fit: BoxFit.cover,
            image: AssetImage(pathImage),
          )),
    );

    return Row(
      children: &lt;Widget&gt;[
        photo,
        userDetails,
      ],
    );
  }
}

Diego Alfonso Najera Ortiz

student•

Muy buen aporte frank, modifiqué tu clase para que el color de la estrella cambie cuando es medio punto en el rating.

import 'package:flutter/material.dart';

class Rating extends StatelessWidget {
  double stars;
  double marginLeft;
  double fontSize;

  Rating(this.stars, this.marginLeft, this.fontSize);

  Widget getStar(double star) {
    var icon = Icon(
      Icons.star,
      color: Color(0xFFf2C611),
      size: fontSize,
    );

    if (star == 0.5) {
      icon = Icon(
        Icons.star_half,
        color: Color(0xFFf2C611),
        size: fontSize,
      );
    }
    else {
      if (star &lt; 0.5) {
        icon = Icon(
          Icons.star_border,
          color: Color(0xFFa3a5a7),
          size: fontSize,
        );
      }
    }

    return Container(
      margin: EdgeInsets.only(
          right: 1.0
      ),
      child: icon
    );
  }

  Widget getRating(double stars) {
    var list = new List&lt;Widget&gt;();

    for (var n = 0; n &lt; 5; n++) {
      list.add(getStar(stars));
      stars--;
    }
    return Container(
      margin: EdgeInsets.only(left: marginLeft),
      child: Row(
        children: list,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return getRating(stars);
  }
}

Gracias!!

Chris Pérez

student•

Buen aporte Frank modifique un poco la clase rating.

import 'package:flutter/material.dart';

class Rating extends StatelessWidget {
  const Rating({
    Key? key,
    required this.stars,
    required this.marginLeft,
    required this.fontSize,
    required this.marginRight,
    required this.marginTop,
  }) : super(key: key);
  final double stars;
  final double marginLeft;
  final double marginRight;
  final double fontSize;
  final double marginTop;

  Widget getStar(double stars) {
    var icon = Icons.star;
    stars == 0.5 ? icon = Icons.star_half : icon;
    stars < 0.5 ? icon = Icons.star_border : icon;

    return Container(
      margin: const EdgeInsets.only(right: 3.0),
      child: Icon(
        icon,
        color: const Color(0xFFff9100),
        size: fontSize,
      ),
    );
  }

  Widget getRating(double stars) {
    final list = List<Widget>.generate(5, (index) => getStar(stars - index));
    return Container(
      margin:
          EdgeInsets.only(left: marginLeft, right: marginRight, top: marginTop),
      child: Row(
        children: list,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return getRating(stars);
  }
}

Cristian Leon

José Eduardo Guevara Soria

Euge Oller

Tomas Cichero

José Mauricio Chavarría González

Juan Franco Segnana

Helard Flores

Kenyo Joel Pecho Ñaupari

Emmanuel Guerra Sánchez

Julio J Yépez

Manuel Lopez Lara

David Andres Carrera Pineda

Kevin Nick Pascual Tuesta

Juan Sebastian Avila

Kevin Meléndez Hernández

Fernando Florez

Isaac David Berdugo Alvarez

Jhonn Sebastian Quiroz Pirazan

Jesús Alberto Martínez Mendoza

Juan Luis Sánchez Cardoza

Usuario anónimo

user•

Sol Naranjo Alarcon

Nahuel Carlomagno

Tomás Antonio Díaz Montilla

Giovanni Rincon Jimenez

Norberto Aguilar Ramírez

Francisco Javier Vázquez Paredes

Rodrigo Guerra Castilla

Way Solutions

Widget Apilando Textos

Bienvenida e Introducción

¡Renovaremos este curso!

Desarrollando en Flutter

¿Qué es Flutter?

Dart y Flutter

Sintaxis de Dart

¡Renovaremos este curso!

Flutter para desarrolladores Android, iOS y Xamarin.forms

Flutter para desarrolladores React Native

¿Cómo luce una app construída en Flutter?

Primer reto

Creando mi entorno de desarrollo

¡Renovaremos este curso!

Requerimientos de Hardware y Software

Instalando Flutter en Android Studio y Visual Studio Code

Composición de un proyecto en Flutter

Interfaces en Flutter

¡Renovaremos este curso! Te quedan unos días para concluirlo.

Programación Declarativa en Flutter

Estructura de un programa en Flutter

Hola Mundo en Flutter

Widgets básicos

Widgets con estado y sin estado

Análisis de Interfaces de Usuario en Flutter

Definiendo los layouts de nuestra interfaz

Segundo reto

Widgets sin estado en Flutter

¡Renovaremos este curso! Te quedan unos días para concluirlo.

Flutter Widgets: Container, Text, Icon, Row

Flutter Widgets: Column

Recursos en Flutter: Tipografías y Google Fonts

Widget Image