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?

o inicia sesi贸n.

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 鈥榩ackage:flutter/material.dart鈥;
import 鈥榙escription_place.dart鈥;
// import 鈥榬eview_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: 鈥楨ste1鈥,
theme: ThemeData(
// primarySwatch: Colors.green,
),
home: Scaffold(
appBar: AppBar(
title: Text(鈥淗ola Mundo鈥) ,
),
body: DescriptionPlace(鈥淒epartamento de sistemas鈥,4,鈥渆sta 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 鈥渇inal鈥.

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 鈥渄ebug painting鈥 (press 鈥減鈥 in the console, choose the
// 鈥淭oggle Debug Paint鈥 action from the Flutter Inspector in Android
// Studio, or the 鈥淭oggle 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(
鈥榊ou have pushed the button this many times:鈥,
),
Text(
鈥$_counter鈥,
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 鈥業ncrement鈥,
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}

// archivo review.dart

import 鈥榩ackage:flutter/cupertino.dart鈥;
import 鈥榩ackage:flutter/material.dart鈥;

// ignore: must_be_immutable
class Review extends StatelessWidget{

String pathImage =鈥淪int铆tulo.png鈥;
String name = 鈥淓steban Eguiguren鈥;
String details = 鈥1 review 5 photos鈥;
String comment = 鈥渆xcelente鈥;

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 鈥榩ackage:flutter/material.dart鈥;
import 鈥榬eview.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 鈥榩ackage:flutter/material.dart鈥;
import 鈥榩ackage:flutter_app2/review.dart鈥;
import 鈥榩ackage: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 鈥渘ew鈥, 驴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 鈥渞eview.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 鈥渄esbordaba 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 馃槂