Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

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

13/38
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 80

Preguntas 8

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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.

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!

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.

🎈 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…!!

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.

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.

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

Aqui esta la documentacion de flutter con algunos componentes donde explican que cosas puedes agregarle ademas de ejemplos para usarlo 😃
 
Scaffold Flutter

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!

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

Mayor entendimiento:

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 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…

Ya necesitan darle una actualizada a las lecciones, porque la estructura ya es diferente.

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…

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 😅

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.
    );
  }
}```

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

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.
    );
  }
}

10/10

Scaffold de una app

Estoy viendo esto dos años después y ann es la mejor!