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

Estructura de un programa en Flutter

17/45
Recursos

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:               , // --- barra de t铆tulo
  body:                 , // --- contenido principal
  bottomNavigationBar:  , // --- navigaci贸n
  floatingActionButton:   // --- bot贸n de acci贸n
)
...

Aportes 84

Preguntas 11

Ordenar por:

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

o inicia sesi贸n.

Ann es la MEJOR!! sera llamada Madre de las tecnologias mobiles!!!

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.

Ahora si viene lo chido鈥!!

A la fecha del 2022-10-09 esta es la nueva estructura del main

void main() {
  runApp(const MyApp());
}

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: 鈥淓sta 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 鈥榝lutter 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!