Widgets básicos

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 ‘package: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:,
);

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.

vengo del futuro mayo del 2019 donde flutter ya empezó a darla batalla en la web
mirenlo en :
https://medium.com/comunidad-flutter/flutter-para-la-web-91d8b217ad35?fbclid=IwAR33k1_gCNWcR7UdfIdDxPGGWGrYbfBcv_uiPwyQls3bEFAaKARG12-V5g8

y

https://flutter.dev/web

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…etc, 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(‘Hola 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.

https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e
dejo esto por aqui…

Widgets básicos.
Texto
Row
Columna
Stack
Container

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 ❤️.

Enlace actualizado de la Doc en español:

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

https://docs.flutter.dev/

Las URL’s están desactualizadas, acá las nuevas:

https://api.flutter.dev/flutter/widgets/Text-class.html
https://api.flutter.dev/flutter/widgets/Row-class.html

Nuevos links:
Text Class
Documentación Flutter

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

Flutter
Flutter Widget of the Week

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

Documentación
https://esflutter.dev/docs

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

Super!!

Increíble explicación, ya me voy dando una idea de como va a funcionar😉

https://api.flutter.dev/

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, ‘package: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 ‘dart: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 ‘dart: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 ‘dart: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 ‘dart: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 ‘dart:ui’;
^
file:///D:/Software/SDKS/Movil/Flutter/flutter/packages/flutter/lib/src/material/input_border.dart:6:8: Error: Not found: 'dart:ui’
import ‘dart: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 ‘dart: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 ‘dart: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 ‘dart: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 ‘dart:ui’ show Path;
^

[Done] exited with code=254 in 15.399 seconds

Genial!

https://flutter.dev/docs
https://api.flutter.dev/
https://api.flutter.dev/flutter/widgets/widgets-library.html

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
- ‘texto’, 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',
              ),
            ),
          )

https://flutter-es.firebaseapp.com/docs

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

https://api.flutter.dev/flutter/widgets/Text-class.html

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