Ann es la MEJOR!! sera llamada Madre de las tecnologias mobiles!!!
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
Si ya tienes una cuenta,
Estructura de un programa en Flutter
17/45Recursos
Partiendo de la estructura básica creada por Android Studio para el tipo de proyecto Flutter Application, la primera línea de código que generalmente nos vamos a encontrar en nuestros archivos .dart es:
import 'package:flutter/material.dart';
Con esta instrucción importaremos a nuestro código el paquete de todos los Widgets (o la mayoría de ellos) de Material Design que son la base principal de clases con la que trabaja Flutter.
Similar a como es en Java o C++, en Dart, el método main() será el punto de inicio de nuestra aplicación. Por su parte, runApp() es la función que inicializa y da vida a la aplicación definida por el Widget App. En otras palabras, runApp() toma el widget y lo sirve.
App() es la clase principal que representa la raíz de la aplicación. Esta clase extiende o hereda de StatelessWidget que es la clase padre de todos los widgets. App() posee un método heredado llamado build() encargado de construir o mostrar todo el árbol de widgets anidados (o Widgets tree) que hayamos definido con MaterialApp(), que es la clase (que actúa wrapper) que implementa Flutter para dar vida, forma y apariencia a todos los widgets de nuestra interfaz de usuario.
La propiedad fundamental del widget MaterialApp en la que definimos toda la estructura base de nuestra aplicación es home: a la que a su vez asignamos el widget Home() de tipo StatefulWidget que es la parte funcional de nuestra aplicación y que retornará a fin de cuentas un Scaffold() que es el widget que contiene finalmente toda la estructura de nuestra interfaz.
// --- Estructura estándar de un Scaffold
....
return Scaffold(
appBar: Aportes 84
Preguntas 11
Ordenar por:
Me hubiese gustado que Ann impartiera un curso de Dart.
Para los/as curiosos/as:
Heredar de StatelessWidget permite crear widgets que no posean estado. Esto significa que su estructura interna sólo será renderizada una vez. Los StatefulWidget(s) son widgets que tienen la posiblidad de cambiar su estado interno, por lo que su contenido se renderizará varias veces para actualizar su estado.
Antes de que saliera el curso, investigando un poco por mi cuenta sobre Flutter me asusté con que todo fuera widgets, no sabia que me esperaba y pensaba que seria algo imposible e incomprensible, pero Ann tu lo explicas que todo se vuelve más sencillo!
Muchas gracias!
🎈 Dart es considero un lenguaje del futuro porque puede trabajar con los paradigmas de Programación Orientada a Objetos y Programación Declarativa en conjunto.
Scaffold prácticamente ocupa toda la pantalla del celular y contiene el AppBar, un cuerpo y también un BottomBarNavigation. Es obligatorio estar presente.
A la fecha del 2022-10-09 esta es la nueva estructura del main
void main() {
runApp(const MyApp());
}
Ahora si viene lo chido…!!
Más sobre layouts en Flutter: https://www.tutorialspoint.com/flutter/flutter_introduction_to_layouts.htm
Lo único malo de dart es que sigue usando punto y coma, en ese sentido debió seguir el ejemplo de Go :c
Anahí es en definitiva lo mejor de Platzi… es sencillamente increible.
Aqui esta la documentacion de flutter con algunos componentes donde explican que cosas puedes agregarle ademas de ejemplos para usarlo 😃
Scaffold Flutter
Material Design es un lenguaje de diseño o visual desarrollado por Google en 2014. Contiene grid layouts, animaciones responsive, transiciones, padding, efectos de profundidad con sobras y luz, etc, etc. Sintetiza los principios clásicos del buen diseño con la invocación de la tecnología y la ciencia. Desarrolla un sistema subyacente que unifica la experiencia de usuario a través de múltiples plataformas, dispositivos y métodos de entrada. Se inspira en el mundo real y sus texturas, como reflejan la luz y proyectan las sobras. En fin es toda una guía visual de como presentar los elementos y sus interacciones en una interfaz digital.
Me gusta cómo Anahí se toma el tiempo para explicar y contrastar Flutter y Dart con otras tecnologías y cómo explica los conceptos raíz como los paradigmas de programación
Wow cuanto nivel de abstracción! 😄
Deberias descansar para darle una separación a cada explicación. No descansas ni respiras y me pones nervioso.
Ya necesitan darle una actualizada a las lecciones, porque la estructura ya es diferente.
Mayor entendimiento:
Pueden usar el Widget SafeArea, si no van a usar el appBar, esto hace que los componentes no esten por debajo de notch del dispositivo
return Scaffold(
body: SafeArea(
child: const Text('Hello World')
),
}
Esta es la estructura que se genera actualmente en VsCode con Flutter 2.0.3
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
Pensaba que me iba a casar con kotlin + xml, pero al parecer flutter esta buenisimo, sobre todo para ir probando los cambios en tiempo real en la app
genial, gran explicacion
En Flutter todo, absolutamente todo es y será un Widget.
el mejor curso que he tomado en esta plataforma +anncode -leonidas
La profe Anahí tiene una forma de explicar tan clara y amena. Desde los cursos de Android me han agradado mucho sus clases. Adelante!
Me sorprende lo desactualizado del curso… Creo que Platzi crea y crea cursos, pero definitivamente no actualiza xd esto es tecnología y si no estamos actualizados pues no hacemos nada…
Hola disculpa es que quería mostrar que ya hay cositas diferentes en el entorno de desarrollo y por ejemplo el BottonNavigationBar ya no esta y otras coas dentro de las clases y quería saber si esto afectara el desarrollo del curso o si es algún pluging que me falta por instalar ya que no entiendo porque en tan poco tiempo me parece diferente
import 'package:flutter/material.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: '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: 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.
);
}
}```
Excelente…
Estoy tomando Flutter en el 2021 en la versión 2.2 y la sintaxis ya cambio. Además ya se pueden crear aplicaciones de escritorio para windows, macos y linux.
el archivo main.dart se encuentra en el directorio lib
Super!!
Que bien como explicar totalmente motivado!!
Muy bien explicado 😄
Muy clara la estructura.
Los cursos con Ann son geniales también por que el resúmen de la clase siempre está disponible en el pie del video.
Uno de los muchos valores agregados.
Me encantó esta clase.
Me parece muy buena la explicación de Anahí.
Me gusta tiene algo de la metodología de los cursos del mismo Google
Scaffold es el contenedor de una vista básica, con una estructura estilo MaterialDesing
Me recuerda mucho a react definitivamente.
realmente se ve muy sencillo este nuevo lenguaje
Una aclaración para el presente comentario: “Esta clase extiende o hereda de StatelessWidget que es la clase padre de todos los widgets. App()”.
La verdadera clase padre de todos los widget es la clase Widget no la clase **StatelessWidget ** esta es solo una clase abstracta que extiende de la clase Widget
En mi universidad hay un Club asociado a GOOGLE donde nos enseñaron Flutter pero sinceramente no aprendi nada, ya que todo era Copy Paste
void main() => runApp(MyApp());
¿La expresión Lambda lo que hace es crear una función anonima del parametro a su derecha?
No entendí bien 😅
Por defecto el plugin de Flutter te importa el paquete material, pero también puedes usar un diseño más al estilo iOS mediante el paquete Cupertino. He probado algunas animaciones implícitas que trae, y también widgets propios del diseño cupertino y son bastante lindos ❤️
video 13 de 38, y de momento no hemos ido a programar de lleno y comprender…
// — Estructura estándar de un Scaffold
…
return Scaffold(
appBar: , // — barra de título
body: , // — contenido principal
bottomNavigationBar: , // — navigación
floatingActionButton: // — botón de acción
)
Me gusta mucho que Ann utiliza las diapositivas pero también el código. Hace que sea mucho más claro al momento de entender cómo se construye la estructura básica de flutter.
Hasta el momento me ha parecido muy bueno todo el curso, el método main() cambia un poco, pero nada del otro mundo. Saludos!
Me parece intrigante lo que se escribirá dentro de Scaffold() y todas las posibilidades que ofrece Flutter 🔥
Qué buena clase !!!
qué es el “@override”?? Lo he leído en inglés, pero no termino de entender qué es lo que hace exactamente…
Donde encuentro las diapo?
Eres la mejor explicando, gracias
hola tengo un problema ,soy nuevo es esto y la verdad me cuesta la parte de realizar las líneas de código, que curos debería tomar para mejorar eso?
esto da miedo, pero espero pronto estar usando dart y flutter para el desarrollo que tengo que hacer!!
AYUDA!!! Unable to locate a development device; please run ‘flutter doctor’ for information about installing additional components.
Componentes de un Scaffold
Flutter ❤️
me lanza un error por no estar conectado…
A mi me ha encantado este curso, me enamore de Ann y de Flutter.
Hola no puedo ver el video 😦
A darle Atomos!
¿Qué función tiene el context en el método build?
MaterialApp me permite utilizar material design en mis aplicaciones.
https://docs.flutter.io/flutter/material/MaterialApp-class.html
Scaffold es la estructura que contiene todos los componentes(widgets) de nuestra App.
Yo vengo de desarrollar en React Native y veo que el desarrollo aca es similar pero con muchas muy buenas diferencias. Desde ya estoy viendo las ventajas de una programación declarativa
Como aprende tecnologías tan rápido ésta Ann, ya lleva como mil cursos.
el ejecutar en AS 3.3
me muestra error
rror: Could not resolve the package 'flutter' in 'package:flutter/material.dart'.
main.dart:1:8: Error: Not found: 'package:flutter/material.dart'
import 'package:flutter/material.dart';
^
main.dart:8:16: Error: Type 'BuildContext' not found.
Widget build(BuildContext context) {
^^^^^^^^^^^^
main.dart:8:3: Error: Type 'Widget' not found.
Widget build(BuildContext context) {
^^^^^^
main.dart:5:21: Error: Type 'StatelessWidget' not found.
class MyApp extends StatelessWidget {
^^^^^^^^^^^^^^^
main.dart:28:15: Error: Type 'Key' not found.
MyHomePage({Key key, this.title}) : super(key: key);
^^^
main.dart:27:26: Error: Type 'StatefulWidget' not found.
class MyHomePage extends StatefulWidget {
^^^^^^^^^^^^^^
main.dart:46:16: Error: Type 'BuildContext' not found.
Widget build(BuildContext context) {
^^^^^^^^^^^^
main.dart:46:3: Error: Type 'Widget' not found.
Widget build(BuildContext context) {
^^^^^^
main.dart:36:32: Error: Expected 0 type arguments.
class _MyHomePageState extends State<MyHomePage> {
^
StreamSink is closed and adding to it is an error.
See http://dartbug.com/29554.
#0 _StreamSinkImpl._reportClosedSink (dart:_http/http_impl.dart:537:31)
#1 _StreamSinkImpl.add (dart:_http/http_impl.dart:542:7)
#2 _WebSocketImpl.addUtf8Text (dart:_http/websocket_impl.dart:1210:11)
#3 WebSocketClient.post (dart:vmservice_io/server.dart:81:18)
#4 _RootZone.runUnary (dart:async/zone.dart:1379:54)
#5 _FutureListener.handleValue (dart:async/future_impl.dart:129:18)
#6 Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:642:45)
#7 Future._propagateToListeners (dart:async/future_impl.dart:671:32)
#8 Future._complete (dart:async/future_impl.dart:476:7)
#9 _SyncCompleter.complete (dart:async/future_impl.dart:51:12)
#10 _AsyncAwaitCompleter.complete (dart:async/runtime/libasync_patch.dart:28:18)
#11 _completeOnAsyncReturn (dart:async/runtime/libasync_patch.dart:295:13)
#12 VMService.routeRequest (dart:_vmservice)
<asynchronous suspension>
#13 Client.onRequest (dart:_vmservice/client.dart:44:13)
#14 WebSocketClient.onWebSocketMessage (dart:vmservice_io/server.dart:52:13)
#15 new WebSocketClient.<anonymous closure> (dart:vmservice_io/server.dart:25:32)
#16 _RootZone.runUnaryGuarded (dart:async/zone.dart:1314:10)
#17 _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:336:11)
#18 _BufferingStreamSubscription._add (dart:async/stream_impl.dart:263:7)
#19 _SyncStreamController._sendData (dart:async/stream_controller.dart:763:19)
#20 _StreamController._add (dart:async/stream_controller.dart:639:7)
#21 _StreamController.add (dart:async/stream_controller.dart:585:5)
#22 new _WebSocketImpl._fromSocket.<anonymous closure> (dart:_http/websocket_impl.dart:1128:21)
#23 _RootZone.runUnaryGuarded (dart:async/zone.dart:1314:10)
#24 _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:336:11)
#25 _BufferingStreamSubscription._add (dart:async/stream_impl.dart:263:7)
#26 _SinkTransformerStreamSubscription._add (dart:async/stream_transformers.dart:68:11)
#27 _EventSinkWrapper.add (dart:async/stream_transformers.dart:15:11)
#28 _WebSocketProtocolTransformer._messageFrameEnd (dart:_http/websocket_impl.dart:334:22)
#29 _WebSocketProtocolTransformer.add (dart:_http/websocket_impl.dart:229:46)
#30 _SinkTransformerStreamSubscription._handleData (dart:async/stream_transformers.dart:120:24)
#31 _RootZone.runUnaryGuarded (dart:async/zone.dart:1314:10)
#32 _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:336:11)
#33 _BufferingStreamSubscription._add (dart:async/stream_impl.dart:263:7)
#34 _SyncStreamController._sendData (dart:async/stream_controller.dart:763:19)
#35 _StreamController._add (dart:async/stream_controller.dart:639:7)
#36 _StreamController.add (dart:async/stream_controller.dart:585:5)
#37 _Socket._onData (dart:io/runtime/binsocket_patch.dart:1721:41)
#38 _RootZone.runUnaryGuarded (dart:async/zone.dart:1314:10)
#39 _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:336:11)
#40 _BufferingStreamSubscription._add (dart:async/stream_impl.dart:263:7)
#41 _SyncStreamController._sendData (dart:async/stream_controller.dart:763:19)
#42 _StreamController._add (dart:async/stream_controller.dart:639:7)
#43 _StreamController.add (dart:async/stream_controller.dart:585:5)
#44 new _RawSocket.<anonymous closure> (dart:io/runtime/binsocket_patch.dart:1283:33)
#45 _NativeSocket.issueReadEvent.issue (dart:io/runtime/binsocket_patch.dart:826:14)
#46 _microtaskLoop (dart:async/schedule_microtask.dart:41:21)
#47 _startMicrotaskLoop (dart:async/schedule_microtask.dart:50:5)
#48 _runPendingImmediateCallback (dart:isolate/runtime/libisolate_patch.dart:115:13)
#49 _RawReceivePortImpl._handleMessage (dart:isolate/runtime/libisolate_patch.dart:172:5)
Process finished with exit code 254
Failed to connect to the VM observatory service: java.io.IOException: Failed to determine protocol version
Qué tema de color está utilizando en el ide está genial
Scaffold es el contenedor principal de la vista
aguien que me pueda ayudar con esto… no pude arrancar el simulador del app
ahora estoy en dilema entre kotlin + xml o flutter + Dart AJAJAJA
Scaffold es el widget que contiene finalmente toda la estructura de nuestra interfaz.
como anillo al dedo
No se, todo esto me recuerda cuando a html
tendra algun drawer por defecto en el scaffold? o eso se diseña dentro del body?
Primera vez que veo esto me parecio un poco complicado, pero es como todo lo nuevo que se aprende, a repasar y listo.
Ann te extrañamos vuelve!!!
Alguien más se suma al pedido de que Ann de todos los cursos de Platzi?
Sin dudas ella esta en mi top 3 de profes Platzi ❤️
10/10
Scaffold de una app
Estoy viendo esto dos años después y ann es la mejor!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?