Documentación de Flutter en español
https://flutter-es.io
Bienvenida e Introducción
¡Renovaremos este curso!
Desarrollando en Flutter
¿Qué es Flutter?
Dart y Flutter
Sintaxis de Dart
¡Renovaremos este curso!
Flutter para desarrolladores Android, iOS y Xamarin.forms
Flutter para desarrolladores React Native
¿Cómo luce una app construída en Flutter?
Primer reto
Creando mi entorno de desarrollo
¡Renovaremos este curso!
Requerimientos de Hardware y Software
Instalando Flutter en Android Studio y Visual Studio Code
Composición de un proyecto en Flutter
Interfaces en Flutter
¡Renovaremos este curso! Te quedan unos días para concluirlo.
Programación Declarativa en Flutter
Estructura de un programa en Flutter
Hola Mundo en Flutter
Widgets básicos
Widgets con estado y sin estado
Análisis de Interfaces de Usuario en Flutter
Definiendo los layouts de nuestra interfaz
Segundo reto
Widgets sin estado en Flutter
¡Renovaremos este curso! Te quedan unos días para concluirlo.
Flutter Widgets: Container, Text, Icon, Row
Flutter Widgets: Column
Recursos en Flutter: Tipografías y Google Fonts
Widget Image
Widget Apilando Textos
Widgets Decorados
Widget Imagen Decorada
Widget Listview
Widget Button, InkWell
Tercer reto
Widgets con estado en Flutter
¡Renovaremos este curso! Te quedan unos días para concluirlo.
Botones en Flutter
Clase StatefulWidget: Cómo se compone
Widget Floating Action Button
Widgets BottomNavigationBar
Generando Navegación en BottomNavigationBar
Personalizando nuestro BottomNavigation Bar a Cupertino iOS BottomBar
Cuarto reto
Fin del Curso
¡Renovaremos este curso!
Conclusiones
¡Terminamos!
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Convierte tus certificados en títulos universitarios en USA
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
Anahí Salgado Díaz de la Vega
““En 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 72
Preguntas 3
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
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.
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:
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😉
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!
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:
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',
),
),
)
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)
Hola gente una consulta ¿Cuál de los siguientes Widgets acomoda los elementos de forma horizontal, uno en seguida de otro? que dicen. saludos
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?