Bienvenida e Introducción

1

¡Renovaremos este curso!

2

Desarrollando en Flutter

3

¿Qué es Flutter?

4

Dart y Flutter

5

Sintaxis de Dart

6

¡Renovaremos este curso!

7

Flutter para desarrolladores Android, iOS y Xamarin.forms

8

Flutter para desarrolladores React Native

9

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

10

Primer reto

Creando mi entorno de desarrollo

11

¡Renovaremos este curso!

12

Requerimientos de Hardware y Software

13

Instalando Flutter en Android Studio y Visual Studio Code

14

Composición de un proyecto en Flutter

Interfaces en Flutter

15

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

16

Programación Declarativa en Flutter

17

Estructura de un programa en Flutter

18

Hola Mundo en Flutter

19

Widgets básicos

20

Widgets con estado y sin estado

21

Análisis de Interfaces de Usuario en Flutter

22

Definiendo los layouts de nuestra interfaz

23

Segundo reto

Widgets sin estado en Flutter

24

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

25

Flutter Widgets: Container, Text, Icon, Row

26

Flutter Widgets: Column

27

Recursos en Flutter: Tipografías y Google Fonts

28

Widget Image

29

Widget Apilando Textos

30

Widgets Decorados

31

Widget Imagen Decorada

32

Widget Listview

33

Widget Button, InkWell

34

Tercer reto

Widgets con estado en Flutter

35

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

36

Botones en Flutter

37

Clase StatefulWidget: Cómo se compone

38

Widget Floating Action Button

39

Widgets BottomNavigationBar

40

Generando Navegación en BottomNavigationBar

41

Personalizando nuestro BottomNavigation Bar a Cupertino iOS BottomBar

42

Cuarto reto

Fin del Curso

43

¡Renovaremos este curso!

44

Conclusiones

45

¡Terminamos!

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Flutter

Curso de Flutter

Anahí Salgado Díaz de la Vega

Anahí Salgado Díaz de la Vega

Widgets Decorados

30/45
Recursos

Al hablar de widgets decorados nos referimos básicamente a un widget de tipo Container(), al que podemos darle características visuales extendidas, o de decoración. Esto lo podemos conseguir al asignar a la propiedad decoration de dicho Container(), otro widget especial llamado BoxDecoration().

Algunas de las propiedades de decoración disponibles con este widget son:

  • color: para asignar el color de relleno de fondo del contenedor.
  • gradient: para definir un gradiente de colores de relleno.
  • border: para asignar un borde.
  • borderRadius: para indicar que los bordes del contenedor serán redondeados.

Puedes consultar la documentación oficial de Flutter para ver la lista completa de propiedades disponibles.

Aportes 68

Preguntas 18

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

La función del FractionalOffset es indicar un fragmento de la pantalla en base a su dirección tomando en cuenta dos puntos de un plano cartesiano (dx,dy), de esta forma:

FractionalOffset(1.0, 0.0) representa la parte superior derecha de la pantalla.

FractionalOffset(0.0, 1.0) representa la parteinferior izquierda de la pantalla

FractionalOffset(0.5, 2.0) representa un fragmento/punto en la mitad de la pantalla con respecto al eje X, y por debajo de del contenedor padre.

Para añadir varios archicos de la misma carpeta al pubspec.yaml se puede hacer así también, en vez de declarar cada uno:

assets:
	- assets/img/

Siii por favor para poder conectar Una API porque si no que hacemos ? osea esta rebien aprender a maquetarla pero el chiste es aprender a crear una app asi full,

Esto es tan estresante y emocionante a la vez

Esto es simplemente increíble! es la primera ves que realizo algo para móvil, que emoción.

¿Cual es la diferencia entre usar child y children? Ambos te permiten instanciar widgets hijos, pero ¿En que se diferencian?

Seria genial que seguir con un curso en el que enseñes como llenar una lista de widgets con la información entregada en un JSON por medio de un servicio tipo API REST

Me salio igualito.

Una pregunta tengo dificultades en saber en que partes va cierto código, método, constructores, class, import. etc.
pero entiendo lo que significa las sintaxis de cada código…
alguien me recomienda un curso que deba tomar ? por favor seria de gran ayuda ya que veo personas en los comentarios que hacen sus retos de diferentes maneras o muestran códigos diferentes al de la clase y quiero aprender hacerlo sin ver vídeos o algo, entender el proceso, no se si me hago entender

En el caso del listView en la pagina principal, el uso de Stack no es necesario, se ve mucho mejor si usas Column, incluso te ahorras el calculo para descriptionPlace de top: 250

import 'package:flutter/material.dart';
import 'description_place.dart';
import './review_list.dart';
import './gradient_back.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final String textDescription = 'Lorem ipsum dolor sit amet'
      'consectetur adipiscing elit,'
      'sed do eiusmod tempor incididunt'
      'ut labore et dolore magna aliqua'
      'Ut enim ad minim veniam,'
      'quis nostrud exercitation ullamco'
      'laboris nisi ut aliquip ex ea'
      'commodo consequat. \n'
      '\n'
      'Lorem ipsum dolor sit amet'
      'consectetur adipiscing elit,'
      'sed do eiusmod tempor incididunt'
      'ut labore et dolore magna aliqua'
      'Ut enim ad minim veniam,'
      'quis nostrud exercitation ullamco'
      'laboris nisi ut aliquip ex ea'
      'commodo consequat.';
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
            // This is the theme of your application.
            //
            // Try running your application with "flutter run". You'll see the
            // application has a blue toolbar. Then, without quitting the app, try
            // changing the primarySwatch below to Colors.green and then invoke
            // "hot reload" (press "r" in the console where you ran "flutter run",
            // or simply save your changes to "hot reload" in a Flutter IDE).
            // Notice that the counter didn't reset back to zero; the application
            // is not restarted.
            primarySwatch: Colors.amber,
            // primaryColor: Color(0xFF3BBAC8),
            fontFamily: 'Lato'),
        home: Scaffold(
            body: Column(
          children: <Widget>[
            GradientBack(),
            Expanded(
              child: Container(
                padding: EdgeInsets.only(left: 20.0, right: 20.0),
                child: ListView(
                  children: <Widget>[
                    DescriptionPlace("Duwilli Ella", 5, textDescription),
                    ReviewList()
                  ],
                ),
              ),
            )
          ],
        )));
  }
}

Para los que tengan problemas al mostrar las imagenes, se agrega de esta forma los assets

<code>
flutter:
  uses-material-design: true
  assets:
    - assets/img/

Tengo un problema, en el momento que quiero añadir mas imagenes en el archivo pubspec.yaml, por un momento ya no me dejo modificar el archivo.

Alguien que me pueda apoyar
gracias

return Material(
debugShowCheckedModeBanner: false,

<code>

con esto quitan la etiqueta de banner


);

realmente me gustaria un nuevo curso de lo basico de flutter pues estoy siguiendo este curso pero hay muchas cosas que no entiendo y que solo las hago en automatico y con la ayuda de los comentarios, espero lo tomen en cuenta.

Si las imágenes que va a llevar una lista son dinámicas, es decir, vienen de una base de datos ¿Cómo deberían declararse en el pubspec.yaml?

No logro descargar los enlaces o los archivos en ZIP. alguien le paso lo mismo?

Tengo error en la estrellas no me salen salen unas rayas amarillas ya verifique y esta bien codificado cual seria

Para colocar las estrellas de usario
Declaramos la estrella

<final star = Container(
    margin: EdgeInsets.only(
      top: 5.0,
      left: 2.0,

    ),
    child: Icon(
        Icons.star,
        color: Color(0xFFf2C611),
      size: 17,
    ),

);> 

Luego la quintuplicamos

<final fiveStars = Row(
  children: <Widget>[
    star, star, star, star, star
  ],
);> 

y finalmente acomodamos en userDetails

<final userDetails = Column(
   crossAxisAlignment: CrossAxisAlignment.start,
   children: <Widget>[
     userName,
     Row(
       children: <Widget>[
         userInfo, fiveStars
       ]


     ),
     userComment,

   ],
);> 

Correr este comando en terminal si estas desde Visual Studio Code, y no te cargan las imagenes

flutter packages get

Una cosa que veo que hace Anahí y está, quizá no mal, pero si es algo que no es optimo, es que por cada imagen que utiliza como asset, la agrega en el pubspec.yaml, eso no es necesario, con solo dejar la ruta como assets/img/ ya flutter sabe que todas las imágenes que estén en esa ruta están listas para usarse

2022 Border Circular

con el list.Generate podemos agregar tantos necesitemos y hace varias pruyebas sin tener que agregarlos manualmente.

class ReviewList extends StatelessWidget {
  ReviewList(this.length,{ Key? key }) : super(key: key);

  int length = 5;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: List.generate(length,
       (index) => Review("Andres Gomez", "1 review 5 fotos", "")),
    );
  }
}

Si desean que la barra de notificaciones sea transparente importen primero el siguiente paquete

import 'package:flutter/services.dart';

Luego agreguen la siguiente linea al void main

void main() {
  // Esta linea vuelve la barra de notificaciones transparente
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    statusBarBrightness: Brightness.light,
  ));

  runApp(MyApp());
}

y listo barra de notificaciones transparente.

Hola, estoy corriendo la app pero me pasa que el texto no se esconde debajo del gradiente, como si el Stack no estuviera funcionando, alguien me podría ayudar por favor…

Cuando corro la app en un dispositivo físico, al hacer el scroll las imagenes de los reviews se demoran en cargar. Cuando lo corro en el emulador, esas imagenes ya aparecen cargadas. Que podrá ser?

Tuve un error con crossAxisAlignment, al parecer se debe también usar textBaseline,

mas información en este link

https://stackoverflow.com/questions/56629733/how-to-position-two-widget-in-a-same-row

Hola!! no me aparecen los textos de las imágenes, es decir, el nombre del usuario, los detalles y el comentario.

Adjunto el código por si hay alguna sugerencia.

Muchas gracias.

import 'package:flutter/material.dart';

class Revisiones extends StatelessWidget{

  String rutaImagen;
  String nombre;
  String detalle;
  String comentario;


  // Creación del constructor que recibe las variables
  Revisiones(this.rutaImagen, this.nombre, this.detalle, this.comentario);

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

  
    //COMENTARIO
    final comentarioUsuario = Container(
      margin: EdgeInsets.only(
          left:20.0
      ),

      child: Text(
        comentario,
        textAlign: TextAlign.left,
        style: TextStyle(
            fontFamily: "Lato",
            fontSize: 13.0,
            fontWeight: FontWeight.w900
        ),
      ),
    );

    //INFORMACIÓN DEL USUARIO
    final informacionUsuario = Container(
      margin: EdgeInsets.only(
          left:20.0
      ),

      child: Text(
        detalle,
        textAlign: TextAlign.left,
        style: TextStyle(
            fontFamily: "Lato",
            fontSize: 12.0,
            color: Color(0xFFa3a5a7)
        ),
      ),
    );

    //NOMBRE DEL USUARIO
    final nombreUsuario = Container(
      margin: EdgeInsets.only(
        left:20.0
      ),

      child: Text(
        nombre,
        textAlign: TextAlign.left,
        style: TextStyle(
          fontFamily: "Lato",
          fontSize: 17.0
        ),
      ),
    );

    final detalleUsuario = Column(
     crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        nombreUsuario,
        informacionUsuario,
        comentarioUsuario
      ],
    );

    final foto = Container(
      // Margenes del contenedor
      margin: EdgeInsets.only(
        top:20.0,
        left: 20.0
      ),
      //Dimesiones de las fotos
      width:80.0,
      height: 80.0,

      decoration: BoxDecoration(
        shape: BoxShape.circle,
        // Widget para darle la posición a la imagen dentro del contenedor
        image:DecorationImage(
          // Encuadrar la imagen en el centro
            fit: BoxFit.cover,
            image: AssetImage(rutaImagen))
      ),
    );

    return Row(
      children: <Widget>[
        foto, Expanded(child: detalleUsuario,)

      ],
    );
  }

}```

A mi no me sale gradiente :x quien sabe por qué.

Gracias, toda esta super bien explicado.

Stack

Alguien sabe como hacer las estrellas más chicas?

muy bueno

Tengo este error al correr el desarrollo en el emulador, si alguien por favor me puede ayudar le estaré agradecido.

Detalle:
E/emuglGLESv2_enc( 9100): device/generic/goldfish-opengl/system/GLESv2_enc/GL2Encoder.cpp:s_glGetStringi:3762 GL error 0x501
E/emuglGLESv2_enc( 9100): device/generic/goldfish-opengl/system/GLESv2_enc/GL2Encoder.cpp:s_glGetStringi:3762 GL error 0x501
E/eglCodecCommon( 9100): glUtilsParamSize: unknow param 0x000087fe
I/Choreographer( 9100): Skipped 98 frames! The application may be doing too much work on its main thread.
Syncing files to device Android SDK built for x86…
E/flutter ( 9100): [ERROR:flutter/third_party/txt/src/minikin/FontFamily.cpp(184)] Could not get cmap table size!
E/flutter ( 9100):
F/flutter ( 9100): [FATAL:flutter/third_party/txt/src/minikin/FontCollection.cpp(95)] nTypefaces == 0
**
F/libc ( 9100): Fatal signal 6 (SIGABRT), code -6 in tid 9119 (1.ui)

Alguien sabe si tengo que hacer algun for para mi lista? solo me aparece un elemento en la lista.
review_list.dart

import 'package:flutter/material.dart';
import 'review.dart';
class ReviewList extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Review('assets/img/img.jpg','Carlos Ramírez',"4 reviews 5 Photos", "Este es mi primer comentario");
        Review('assets/img/img2.jpg','Carlos Flores',"3 reviews 2 Photos", "Este es mi segundo comentario");
        Review('assets/img/img3.jpg','Carlos Ramírez',"5 reviews 6 Photos", "Este es mi tercer comentario");
      ],
    );
  }
}

review.dart

import 'package:flutter/material.dart';

class Review extends StatelessWidget{
  String pathImages = "assets/img/img.jpg";
  String userName = "Carlos Ramírez";
  String userDetails = "1 review 5 Photos";
  String userComment = "Esta chido este curso de Flutter";
  Review(this.pathImages, this.userName,this.userDetails,this.userComment);
  @override
  Widget build (BuildContext context){
    final userCommentWidget = Container(
      margin: EdgeInsets.only(
        left: 20.0
      ),
      child: Text(
        userComment,
        textAlign: TextAlign.left,
        style: TextStyle(
          fontFamily: "Loto",
          fontSize: 13.0,
          fontWeight: FontWeight.w900
        ),
      ),
    );
    final userDetailsWidget = Container(
      margin: EdgeInsets.only(
        left: 20.0
      ),
      child: Text(
        userDetails,
        textAlign: TextAlign.left,
        style: TextStyle(
          fontFamily: "Loto",
          fontSize: 13.0,
          color: Color(0xFFa3a5a7)
        ),
      ),
    );
    final userNameWidget = Container(
      margin: EdgeInsets.only(
        left: 20.0
      ),
      child: Text(
        userName,
        textAlign: TextAlign.left,
        style: TextStyle(
          fontFamily: "Loto",
          fontSize: 17.0
        ),
      ),
    );
    final containerUser =  Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        userNameWidget,
        userDetailsWidget,
        userCommentWidget
      ],
    );

    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(pathImages)
        )
      ),
    );
    return Row(
      children: <Widget>[
        photo,
        containerUser
      ],
    );   
  }
}

y main.dart

import 'package:flutter/material.dart';
import 'description_place.dart';
import 'gradient_back.dart';
import 'review_list.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  String description = "Hoy 09/02/2019 estoy haciendo mis primeros pininos 'pasos' con FLUTTER y PLATZI. Estamos agregando nuestros primerosn widgets con Titulo, Icons y Descriptcion.\n\nProbe Ionic 4 y veo que la documentación esta muy mal ordenada. Espero que pronto lo solucionen ya que es complicado migrar del ionic 3 al 4.";

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ), 
      home: Scaffold(
        appBar: AppBar(
          leading: Icon(Icons.arrow_back),
          title: Text("Microsoft"),
        ),
        //body: new DescriptionPlace('Carlos Ramírez',4,description),
        body: ReviewList(),
      )
      
      /*home:  Scaffold(
        appBar: AppBar(
          leading: Icon(Icons.arrow_back),
          title: Text("Microsoft"),
        ),
        body: Center(
          child: Stack(
            children: <Widget>[
              Image.network(
                'http://images6.fanpop.com/image/photos/39400000/Windows-98-wallpaper-random-39415638-1024-768.jpg',
                fit: BoxFit.cover,
                height: double.infinity
              ),
              Center(
                child: Container(
                  height: 100.0,
                  color: Colors.black26,
                  child: Center(
                    child: Text('Windows 98',
                    style: TextStyle(color: Colors.white, fontSize: 60),),
                  ),
                ),
              )
            ],
          ),
        )
      )//MyHomePage(title: 'Flutter Demo Home Page'),
      **/
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug painting" (press "p" in the console, choose the
          // "Toggle Debug Paint" action from the Flutter Inspector in Android
          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
          // to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}


Cada vez me emociono mas ajajajaj

Stack

Importe el cuadro azul al main, pero no me lo muestra en el emulador

// archivo main.dart

import ‘package:flutter/material.dart’;
import ‘description_place.dart’;
// import ‘review_list.dart’;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Este1’,
theme: ThemeData(
// primarySwatch: Colors.green,
),
home: Scaffold(
appBar: AppBar(
title: Text(“Hola Mundo”) ,
),
body: DescriptionPlace(“Departamento de sistemas”,4,“esta es una prueba de texto enviado desde parametros” ),
// body: ReviewList(),
),

);

}
}

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);

// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.

// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked “final”.

final String title;

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;

void _incrementCounter() {
setState(() {
// This call to setState tells the Flutter framework that something has
// changed in this State, which causes it to rerun the build method below
// so that the display can reflect the updated values. If we changed
// _counter without calling setState(), then the build method would not be
// called again, and so nothing would appear to happen.
_counter++;
});
}

@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
// Column is also a layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Invoke “debug painting” (press “p” in the console, choose the
// “Toggle Debug Paint” action from the Flutter Inspector in Android
// Studio, or the “Toggle Debug Paint” command in Visual Studio Code)
// to see the wireframe for each widget.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
‘You have pushed the button this many times:’,
),
Text(
’$_counter’,
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: ‘Increment’,
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}

// archivo review.dart

import ‘package:flutter/cupertino.dart’;
import ‘package:flutter/material.dart’;

// ignore: must_be_immutable
class Review extends StatelessWidget{

String pathImage =“Sintítulo.png”;
String name = “Esteban Eguiguren”;
String details = “1 review 5 photos”;
String comment = “excelente”;

Review(this.pathImage, this.name,this.details,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(
        fontSize: 13.0,
        fontFamily: "Lato",
        fontWeight: FontWeight.w900
    ),
  ),
);

final userInfo= Container(
  margin: EdgeInsets.only(
      left: 20.0
  ),
  child: Text(
    details,
    textAlign: TextAlign.left,
    style: TextStyle(
        fontSize: 13.0,
        fontFamily: "Lato",
      color: Color(0xFFa3a5a7)
    ),
  ),
);

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


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:NetworkImage("https://ile.com.ec/CursoFlutter/" + pathImage)),
          //AssetImage(pathImage))
  )
);

final star=Container(
  margin: EdgeInsets.only(
    left: 15.0,
    right: 1.0
  ),
  child: Icon(
    Icons.star,
    color: Color(0xFFF2C611),
  ),
  width: 1.0,
);

  final userDetails = Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    userName,
    Row(
      children: <Widget>[
        userInfo,
        star,
        star,
        star,
        star,
        star
      ],
    ),

    userComment,
  ],
);

return Row(
  children: <Widget>[
    photo,
    userDetails

  ],
);

}

}

// archivo review_list.dart

import ‘package:flutter/material.dart’;
import ‘review.dart’;
class ReviewList extends StatelessWidget{
@override
Widget build(BuildContext context) {

// TODO: implement build
return Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Review("Peru-Bolivia2018_592.jpg","Esteban E.","9 reviews","Excelente"),
    Review("ana lucia.png","Ana Lucia","6 reviews","Excelente"),
    Review("maria rosa.png","Maria Rosa","3 reviews","Muy bueno"),
    Review("kilminster.png","Kilminster","1 review","Ninguno"),
  ],
);

}

}

// archivo description_place.dart

import ‘package:flutter/material.dart’;
import ‘package:flutter_app2/review.dart’;
import ‘package:flutter_app2/review_list.dart’;

class DescriptionPlace extends StatelessWidget{

String namePlace;
int stars;
String Description;

DescriptionPlace(this.namePlace,this.stars,this.Description);

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

final star_border = Container(
    margin: EdgeInsets.only(
        top:23.0,
        right: 3.0
    ),
    child: Icon(
      Icons.star_border,
      color: Color(0xFFF2C611),
    ),
);

final star_half = Container(
    margin: EdgeInsets.only(
        top:23.0,
        right: 3.0
    ),
    child: Icon(
      Icons.star_half,
      color: Color(0xFFF2C611),
    ),
);

final star=Container(
  margin: EdgeInsets.only(
    top:23.0,
    right: 3.0
  ),
  child: Icon(
      Icons.star,
      color: Color(0xFFF2C611),
  )

);

final title_stars =Row(
  children: <Widget>[
    Container(
      margin: EdgeInsets.only(
        top: 10.0,
        left:20.0,
        right: 20.0

      ),
      child:  Text(
        namePlace,
        style: TextStyle(
          fontFamily: "DancingBold" ,
          fontSize: 20.0,
          fontWeight: FontWeight.w900
        ),
        textAlign: TextAlign.left ,
      ),
   ),
    Row(
      children: <Widget>[
        star,
        star,
        star,
        star_half,
        star_border


      ],
    )
  ],
);

final descripcion = Container(
      margin: EdgeInsets.only(
        top: 2.0,
        left: 20.0,
        right: 20.0,
      ),
      child:
        Text(
        Description
        , style: const TextStyle(
          fontFamily: "Lato",
          fontSize: 15.0, letterSpacing: 0.5
        ),
      ),
);


final descripcionFinal= Column(
  children: <Widget>[
    title_stars,
    descripcion,
    //Review("Peru-Bolivia2018_592.jpg","Esteban E.","1 review", "commentario" ),
    ReviewList(),

  ],
);

return descripcionFinal;

}

}

Hola… cree un boton personalizado extendiendo de la clase StatelessWidget. Mi pregunta es si debo extender de StatefulWidget para que este tenga las animaciones de un boton y funcione correctamente. Les dejo el codigo de como cree el boton

class BotonConIcono extends StatelessWidget{
  String titulo;
  IconData icono;
  BotonConIcono(this.titulo,this.icono);
  @override
  Widget build(BuildContext context) {
    return new Container(
      height: 100,
      width: 110,
      margin: EdgeInsets.only(top: 15.0,right: 5.0,left: 5.0),
      padding: EdgeInsets.all(10.0),
      child: Material(
        borderRadius: BorderRadius.circular(15.0),
        shadowColor: Colors.greenAccent,
        color: Colors.black,
        elevation: 10.0,
        child: GestureDetector(
            onTap: () {
            },
            child: Column(
              children: <Widget>[
                new Padding(padding: EdgeInsets.only(top: 5.0)),
                new Icon(
                  icono,
                  size:40.0,
                  color: Colors.white,
                ),
                new Padding(padding: EdgeInsets.only(top: 5.0)),
                new Text(
                  titulo,
                  style: const TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.w700

                  ),
                ),
              ],
            )

        ),
      ),
    );
  }
}```

alguna idea de porque no me muestra las fotos

http://prntscr.com/m2qbsj ( pd no se como cargar las imagenes a platzi )

Genial!! Estoy muy emocionado por como esta saliendo todo

quede muy bien, solo tengo el problema de que solo se muestra un review, alguien sabe porque? si lo mando llamar 3 veces en el review_list.dart. abajo puse todo el codigo.

me tiene aburrido esto, deje de trabajar el proyecto de ejemplo 2 semanas y ya no sirve nada, todo estaba funcionando perfecto y ahora no.

en main.dart me dice que la linea
GradientBack() le falta recibir parametros y se rompe toda la compilacion

Eto eta muy fazi
yung beef sucia

Aún no me queda claro cuándo usar la palabra reservada “new”, ¿alguien podría explicarme?

Amigos por favor su ayuda al realizar los pasos del curso me salio este error me podrian ayudar gracias
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
A RenderFlex overflowed by 1184 pixels on the bottom.

![](

demasiado bueno flutter,

Tengo este problema al compilar

![](

me sale este error cuando compilo :
C:\Users\Flutter\flutter_app\build\app\intermediates\signing_config\debug\out\signing-config.json (Acceso denegado)

Tengo un problema cuando hago scroll me aparece de yapa una columna de color negro o amarillo ¿A alguien le ha pasado?

excelente cursoooo

No puedo mostrar las imagenes en la aplicación,
¿Alguien sabe por que sucede esto?

Aww! no quiero dejar este curso ahora! jejeje

Cuando empezaba a programar encontrar el “;” que me faltaba era la odisea ahora con flutter me pasa con la “,”

Genial como esto va tomando forma!

Porque el wiget “review.dart” pide argumentos Si ya tiene uno definidos antes del contructor ?

hola alguno sabe porq mi archivo ReviewList no es independiente del review? A esto me refiero que no se me cambian los pathImage introduceindo desde el review_list sino que tengo que ir al review. Saludos.

good video!!

Gracias por la aportación

Tenía un problema que se “desbordaba el contenido” y salían las típicas franjas con líneas amarillas y negras a un lado de la pantalla.
Lo solucioné estableciendo el height de los respectivos containers

Hola
De casualidad alguien sabe acerca de este error?






Lo estuve leyendo y analizando y al parecer el problema está con el return de la clase DescriptionPlace, el cual es un widget tipo columna. Lo que pude entender es que no tiene definido un tamaño, no obstante revisando el código de la clase, veo que no es necesario.
Dejo por acá mi repositorio de github: link
En letras sería Pirris-Salas/LearningFlutter
Agradezco de antemano toda la ayuda que me puedan brindar, ya que no podré continuar con el curso hasta no resolver este error.

cosa rara el final

Tengo un problema y es que me repite la lista 2 veces, me imagino que la estoy llamando en otra parte del código. Pero así me quedó

llevo el curso trabajando en Android Studio y ahora me acabo de pasar a VS code y sinceramente es 1000 veces mejor, quizas solamente mas minimalista pero para mi es mejor 😃