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 b谩sicos

19/45
Recursos

鈥溾淓n Flutter, casi todo es un widget鈥濃. Son los componentes elementales de la interfaz de usuario de la aplicaci贸n.

Los widgets b谩sicos son el punto de partida con los que puedes comenzar a crear tus propios widgets (compuestos o m谩s complejos) en Flutter.

  • Text: representa un texto o cadena de caracteres. Admite diversos par谩metros o propiedades, adem谩s del texto literal que ser谩 mostrado. Podemos definirle estilos y caracter铆sticas de apariencia particulares.

  • Row: permite organizar y posicionar otros widgets hijos en forma de fila o rengl贸n.

  • Column: permite organizar y posicionar otros widgets hijos en forma de columna.

  • Stack: permite apilar widgets hijos con respecto al eje Z (elevaci贸n) en la interfaz.

  • Container: es uno de los widgets m谩s vers谩tiles de Flutter y permite organizar otros widgets como si fuera una caja o contenedor. Este widget es equivalente a los divs de html y admiten atributos similares de apariencia.

Aportes 73

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Documentaci贸n de Flutter en espa帽ol
https://flutter-es.io

Resumen de las clases anteriores:
Flutter funciona con programaci贸n declarativa (declara de forma m谩s humana en su c贸digo}
Dart combina los dos tipos de programaci贸n: declarativa e imperativa.
import 鈥榩ackage:flutter/material.dart鈥 -> Importa todos los elementos de Material Design
void main() => runApp(MyApp()); -> Es donde se le da vida a la aplicaci贸n
En Flutter absolutamente todo es un Widget
return MaterialApp nos retorna todo lo de Material importado de la librer铆a.
Scaffold contiene toda la estructura b谩sica de nuestra aplicaci贸n. Cada elemento est谩 posicionado en el lugar que le corresponde gracias al Scaffold.

Estructura b谩sica de un scaffold:

return Scaffold(
appBar:,
body:,
bottomNavigationBar:,
floatingActionButton:,
floatingActionButtonLocation:,
);

Widgets imprescindibles que debes conocer antes de construir tu primera aplicaci贸n con Flutter.
https://esflutter.dev/docs/development/ui/widgets/basics

Text: es como un objeto que contiene una cadena de texto.

Row: es un objeto dentro del cual sus hijos se ordenan uno al lado del otro, en una fila.
Ej: obj1 obj2 obj3

Column: es un objeto dentro del cual sus hijos se ordenan uno sobre el otro, en una columna.
Ej: obj1
obj2
obj3

Stack: ordena a sus hijos en capas, dentro de un objeto Stack, sus hijos se superponen unos a otros.

Comparando sus funcionamienos con ejes x, y, z
Row ser铆a x
Column ser铆a y
Stack ser铆a z

Los containers son objetos que pueden tener un solo hijo, pero este hijo tambi茅n puede ser Row o Column

Ese es mi resumen. Se agradece cualquier correcci贸n.

Veo que el widget Stack es como usar un Z-index en CSS

Si quieren ver un cat谩logo de Widgets disponibles en Flutter les recomiendo este proyecto:
https://github.com/X-Wei/flutter_catalog

La nueva pagina de la Documentaci贸n en espa帽ol de Flutter
https://esflutter.dev/

Widgets b谩sicos.

  1. Text
  2. Row
  3. Column
  4. Stack
  5. Container

Lento pero seguro, alli vamos鈥 muy emocionado鈥

Este video sent铆 que Flutter maneja la interfaz como estar maquetando una p谩gina con HTML5

Parece HTML, CSS y JS todo en dart y flutter.

Que super!! Estoy muy emocionado!

Hay alg煤n lugar, pagina鈥tc, en donde se pueda ver en acci贸n los widgets que provee Futter ?
Me es dificil ves mi app y darme cuenta que widget es el mas indicado, o al rev茅s, al ver el widget funcionando me podr铆a dar ideas.

Interesante, bien similar a xamarinforms y bootstrap en general

Por ac谩 est谩 la documentaci贸n en espa帽ol
https://esflutter.dev/docs
Est茅 es el cat谩logo de Widgets
https://esflutter.dev/docs/development/ui/widgets

Widgets B谩sicos

Texto: Text(鈥楬ola Mundo鈥)

Widgets para posicionar elementos:

Row: (filas)
Column: (columna)
Stack: (sobrepone)
Container: (contenedor)

Enlace de ejemplos de Widgets: https://docs.flutter.dev/development/ui/widgets

Widget Text

Por lo que entiendo de su descripci贸n, el widget stack es semejante a las layers de Photoshop o Illustrator.
Y el atributo overflow es un wrapper.

He vuelto a ver est谩 clase mas de 3 veces para poder entender en detalle como funcionan los widgets, ya que me estaba confundiendo y la explicaci贸n es bastante buena.

Sin embargo comparto el link de la documentaci贸n https://flutter.dev/docs/reference/widgets

Simplemente incre铆ble! Flutter y Dart son el futuro.

隆las posibilidades son infinitas!

Felicitaciones a la tutora, es muy buena ense帽ando

Me encanta Flutter, es funcional, y divertido.

Widgets b谩sicos.
Texto
Row
Columna
Stack
Container

Estuve haciendo pruebas con los widgets "Texto" y "Columna" pero nunca funcionaron, quiz谩 te refieres a Text o Column? No se supone que ustedes nos tratan de ense帽ar? O al contrario? En todo caso ser铆a "Fila, Pila, Contenedor, etc..." y bueno traduzcan a su respectivo idioma porque la idea es desinformar. Muchas gracias por enredo.

Disculpen, no vi la documentaci贸n al momento de hacer este comentario, pero:

si tengo:

const Text.rich(...);

rich no vendr铆a a hacer una propiedad como lo mencionan, seg煤n lo que aprendi en la clase de Dart , esto seria un constructor nombrado o no?

Widgets basicos: Text, Row, Column, Stack y Container.

eres muy buena en como lo explicas.

Concuerdo con Anah铆:

Container y Stack son sencillamente hermosos 鉂わ笍.

wow flutter es muy parecido a swift ui, me siento super c贸modo tenia miedo que ser铆a mas complejo pero es muy f谩cil

Enlace actualizado de la Doc en espa帽ol:

https://esflutter.dev/docs/development/ui/widgets-intro

Voy a entendiendo que los widgets son como un sistema de bloques o ladrillos que pueden ser utilizados en conjunto, pero que nos permiten construir la aplicaci贸n de una manera m谩s sencilla. No hab铆a entendido a lo que se refer铆a Anah铆 con Widgets hasta esta clase 馃槄

Muy interesante el curso, me encantando flutter gracias por la explicaci贸n muy buena

Como funcionan widgets flutter

Maravillosa informacion por hoy

Es incre铆ble el nivel did谩ctico de esta chica. Es incre铆ble lo bien que explica. Quisiera poder hacer todos sus cursos!!

Probe con flutter-es y no me dejo les dejo el enlace actualizado https://esflutter.dev/ documentacion de flutter en espa帽ol

documentacion fluttter espa帽ol 2020 https://esflutter.dev/

Super!!

Incre铆ble explicaci贸n, ya me voy dando una idea de como va a funcionar馃槈

Sin estado StatelessWidget
Con estado StatefulWidget

Que buena Explicacion

Estoy tratando de ejecutar la aplicaci贸n pero me genera un error. El siguiente es el error:

[Running] dart "c:\Users\pesi\platzi_trips_app\lib\main.dart"
lib/main.dart:1: Warning: Interpreting this as package URI, 鈥榩ackage:platzi_trips_app/main.dart鈥.
file:///D:/Software/SDKS/Movil/Flutter/flutter/packages/flutter/lib/src/material/animated_icons.dart:9:8: Error: Not found: 'dart:ui鈥
import 鈥榙art:ui鈥 as ui show Paint, Path, Canvas;
^
file:///D:/Software/SDKS/Movil/Flutter/flutter/packages/flutter/lib/src/material/animated_icons.dart:10:8: Error: Not found: 'dart:ui鈥
import 鈥榙art:ui鈥 show lerpDouble;
^
file:///D:/Software/SDKS/Movil/Flutter/flutter/packages/flutter/lib/src/material/arc.dart:6:8: Error: Not found: 'dart:ui鈥
import 鈥榙art:ui鈥 show lerpDouble;
^
file:///D:/Software/SDKS/Movil/Flutter/flutter/packages/flutter/lib/src/material/colors.dart:5:8: Error: Not found: 'dart:ui鈥
import 鈥榙art:ui鈥 show Color;
^
file:///D:/Software/SDKS/Movil/Flutter/flutter/packages/flutter/lib/src/material/dialog.dart:6:8: Error: Not found: 'dart:ui鈥
import 鈥榙art:ui鈥;
^
file:///D:/Software/SDKS/Movil/Flutter/flutter/packages/flutter/lib/src/material/input_border.dart:6:8: Error: Not found: 'dart:ui鈥
import 鈥榙art:ui鈥 show lerpDouble;
^
file:///D:/Software/SDKS/Movil/Flutter/flutter/packages/flutter/lib/src/material/input_decorator.dart:6:8: Error: Not found: 'dart:ui鈥
import 鈥榙art:ui鈥 show lerpDouble;
^
file:///D:/Software/SDKS/Movil/Flutter/flutter/packages/flutter/lib/src/material/mergeable_material.dart:5:8: Error: Not found: 'dart:ui鈥
import 鈥榙art:ui鈥 show lerpDouble;
^
file:///D:/Software/SDKS/Movil/Flutter/flutter/packages/flutter/lib/src/material/shadows.dart:5:8: Error: Not found: 'dart:ui鈥
import 鈥榙art:ui鈥 show Color, Offset;
^
file:///D:/Software/SDKS/Movil/Flutter/flutter/packages/flutter/lib/src/material/slider_theme.dart:6:8: Error: Not found: 'dart:ui鈥
import 鈥榙art:ui鈥 show Path;
^

[Done] exited with code=254 in 15.399 seconds

Genial!

genial

Buena explicaci贸n , ya tenemos un punto de partida de los elementos que usaremos

Esto es muy parecido a los componentes web: div y tablas.

Entrando al mundo de los Widgets de Flutter

Widgets B谩sicos:

  • texto
  • row
  • columna
  • stack
  • container

Entonces si entendendi bien el widget de Row tendra hijos que contendran mas widgets acomodados uno encima de otro correcto ??

Excelente explicaci贸n.

Esto es lo que no me est谩 gustando de flutter. Tener que asignarle estilos a cada cosa.
Bueno espero que tenga una forma de asignar como clases para grupos de estilo y as铆 evitar repetir los mismos estilos para cada widget.

Se pude generar estilos genrales y llamarlos luego, como seria?.

Widgets y m谩s widgets! 馃槂 馃槈

Widgets B谩sicos:
- Texto ---------------------- Mostrar texto
- 鈥榯exto鈥, textAling, overflow, style: TextStyle
- Row ------------------------ Acomoda witget en una fila
- Columna -------------------- Acomoda en una columna
- Stack ---------------------- Acomodar un elemento encima de otro
- Container ------------------ Generar una caja de elementos (como un div)

En el curso de Dart no pude cambiar el color de un texto ; (
Pero hoy, ya pude darle un dise帽o b谩sico a un texto:

  title: Center(
            child: Text(
              'Hola Luis Salas',
              textAlign: TextAlign.center,
              overflow: TextOverflow.fade,
              style: TextStyle(fontWeight: FontWeight.bold,
              color: Colors.amberAccent,
                fontFamily: 'Roboto',
              ),
            ),
          )

Para los que vienen del desarrollo Android Nativo, los widgets vistos en esta clase (excepto el de Text) son los Layouts que manejamos, Row y Column son un LinearLayout, el Stack no es mas que un RelativeLayout, y el container creo que podr铆a ser el ConstraintLayout (un todo terreno)

10/10

Se me figura mucho como programar para web, me gusta!

La documentacion en espa帽ol correctaa es: https://esflutter.dev/docs

Continuando el aporte de @Brayan Mamani

Esta es la documentaci贸n actualizada en Espa帽ol(est谩 dentro de todos los comentarios)

https://esflutter.dev/

Hola gente una consulta 驴Cu谩l de los siguientes Widgets acomoda los elementos de forma horizontal, uno en seguida de otro? que dicen. saludos