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

Widget Imagen Decorada

31/45
Recursos

Como ya hemos visto en clases anteriores, al momento de incorporar im谩genes a nuestra interfaz, basta con utilizar el widget AssetImage() como valor de la propiedad image en un BoxDecoration(), Container(), o similar; habiendo declarado previamente las im谩genes como assets en el archivo de configuraciones pubspecs.yaml de Flutter.

Ahora bien, si queremos dar a esas im谩genes caracter铆sticas visuales o de decoraci贸n particulares, como: alineaci贸n, repetici贸n en mosaico, filtros de color o ajuste de tama帽o (fit), entre otras, ser谩 necesario disponer entonces de un widget diferente: el DecorationImage(), el cual usaremos en sustituci贸n del tradicional AssetImage(). De esta manera tendremos disponibles todas estas propiedades especiales, adem谩s de la propiedad que ya conocemos: image que s铆, nuevamente, tendr铆a que estar definida por un AssetImage().

TIP: para evitar que el statusBar de Android se vea con un color m谩s oscuro, habitual en este SO, podemos agregar al final de la clase MainActivity del archivo MainActivity.kt (ubicado en la carpeta src/main/kotlin/), la siguiente l铆nea de c贸digo:

  • this.getWindow().statusBarColor(android.graphics.Color.TRANSPARENT);

Aportes 185

Preguntas 27

Ordenar por:

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

o inicia sesi贸n.

Claro un curso avanzado para poder conectar con api la app

Si quisieramos ocultar la Status Bar en Android, en vez de colocarla transparente, en nuestro archivo main.dart debemos hacer lo siguiente:

...
import 'package:flutter/services.dart';
...
  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIOverlays([]);
    ...
  }
}

Un metodo diferente para volver la barra de estado transparate directamente en el main de nuestro proyecto es:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main(){
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarBrightness: Brightness.light
    )
  );
  runApp(MyApp());
} 

Recuerden que si tienen muchas im谩genes y quieren incluirlas todas puedes hacerlo as铆 (con 鈥/鈥 al final)

flutter:
  uses-material-design: true
  assets:
      - assets/img/

Curso avanzado de Flutter y Firebase

Si por Favor, un curso avanzado de Flutter 馃槂 , no quiero comprar cursos fuera de Platzi.

La soluci贸n para la barra transparente en Android desde DART es la siguiente:

void main(){
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    statusBarBrightness: Brightness.light
  ));
  runApp(MyApp());
}```

Hola compa帽er@ si estas a punto de modificar el MainActivity 隆NO LO HAGAS! se tronara el codigo y ya no podras arreglar el proyecto, te recomiendo que utilices esta librer铆a y modifiques tu Void main. Aqu铆 el c贸digo:

import 'package:flutter/services.dart';


void main(){
  SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(
          statusBarColor: Colors.transparent,
          statusBarBrightness: Brightness.light
      )
  );
  runApp(MyApp());
}```

Para los que no quieran escribir mil assets de imagenes uno bajo otro y otro, pueden solo dejar la ruta de la carpeta, en este caso

-assets/img/

u va a funcionar igual, por que referencia toda la carpeta, no uno a uno los recursos

No se si el curso esta desactualizado, pero actualmente cuando intento modificar codigo en android ,no aparece el metodo onCreate.

aparece esto:

class MainActivity: FlutterActivity() {
override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
GeneratedPluginRegistrant.registerWith(flutterEngine);
}
}

Y todo el codigo aparece con error. ya configure con el sdk actual ,invalide cache y reestar ,pero sigue con el problema

Alguien le pasa lo mismo

CUURRRRSSOOOOAAAVVVANNNZAAAAAADOOOOOO

Quiero un curso avanzado, que incluya login que consuma un api, seria interesante ver un platzivideo como el del curso de react-native que trabaja con modal, eventos consume api.

Quiero un curso avanzado con Graphql
馃槂

Para el que no le esta funcionando lo de la barra de notificiaciones pueden arreglarlo de esta manera con flutter

Primero importan esto:

import 'package:flutter/services.dart';

Y luego agregan esto al main() :

  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    statusBarBrightness: Brightness.light
  ));

Curso avanzado de flutter y firebase 馃槂

Ya se gener贸 el curso avanzado de Flutter, sin embargo no identifico en que secci贸n viene sobre la obtenci贸n de informci贸n a trav茅s de API鈥檚 me pueden orientar?

Curso avanzado de Flutter y Firebase!

Cambiar el statusBarColor usando Dart:

import 'package:flutter/services.dart'; //<--Importa esta libreria

void main(){
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.transparent, //<--NavigationBarColor
    statusBarColor: Colors.transparent, //<--StatusBarColor
  ));
  runApp(MyApp());
}```

Para los que van a llegar, una forma para hacer transparente la barra de notificaciones, en el build del main.dart ponen lo siguiente:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent, //or set color with: Color(0xFF0000FF)
    ));

Para aquellos como yo que no logren poner transparente la barra de Android.

Este video muestra como hacerlo desde el main y as铆 me funciona.

https://www.youtube.com/watch?v=CN8ZAdvFKwA

siiii, un curso avanzado estar铆a genial!

Un curso avanzado de Flutter consumiendo servicios rest (sin firebase) y uso de componentes como c谩mara y sensores.

Curso avanzado de flutter para implementar backend, conexion a bd y/o obtener datos de API

S铆!!! curso avanzado de flutter porfavor!! (Tambi茅n ser铆a genial hacer una integraci贸n entre flutter y firebase)

Si, por favor, hagan curso mas avanzados!

Curso Avanzado de Dart y Flutter, ojal谩 con conexiones a BD鈥檚 y que contuviese algo de comunicaci贸n con el hardware del dispositivo, la camara o algunos sensores, seria de gran utilidad, quedo atento, muchas Gracias por el curso Anah铆.

Un curso avanzado de Flutter con Firestore seria genia 馃槂

curso avanzado por favor con firebase si se puede

Si quisieramos colocar el par谩metro title del constructor de la clase GradientBack como no obligatorio o con un valor por defecto, deberiamos hacer asi:

  String title;
  GradientBack({ this.title = 'Popular' });

Curso con Firebase

quiero un curso super avazando nivel nasa espacial de flutter, esto es el futuro hermano.

Buenas, para las personas que est谩n llegando a esta clase y al momento de acceder al MainActivity.kt (para volver la barra de notificaciones en android transparente), nos damos cuenta que solo hay un metodo llamado configureFlutterEngine y no como aparece como en la clase que hay un 煤nico m茅todo llamada onCreate.
Para solucionar esta diferencia, solo debemos de agregar debajo del m茅todo configureFlutterEngine el m茅todo onCreate y agregar dentro de este m茅todo la linea que nos dan en la clase para volver transparente la barra de notificaciones, esto con el fin de que este funcione tal cual como se explica en la clase.

class MainActivity : FlutterActivity() {
    override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
        GeneratedPluginRegistrant.registerWith(flutterEngine)
    }
    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        this.getWindow().setStatusBarColor(android.graphics.Color.TRANSPARENT);
    }
}

Espero que les sea de ayuda. A mi me funciono.

Para los que les ha salido error al momento de ingresar al archivo MainActivity, les dejo el siguiente c贸digo para que se pueda modificar la barra solamente en el main.dart

import 'package:flutter/services.dart';

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    statusBarBrightness: Brightness.light
  ));
  runApp(MyApp());
}

Curso Avanzado de Flutter por favoooor!

Hola, deseo consultar si pueden realizar un curso de flutter avanzado para conectar el dise帽o a una base de datos y poder incorporar los datos. Quedo atento.

Si porfa un segundo curso de flutter avanzado conectado a Firebase, excelente curso Anah铆

Ser铆a excelente que hagan un curso avanzado de Flutter

Un curso de flutter con Firebase, ser铆a muy bueno para quienes quieran lanzar su primer aplicaci贸n comercial.

Definitivamente ser铆a interesante que haya un curso de Flutter avanzado, por favor Platzi. Un saludo a todos.

justamente eso, un curso avanzado que consuma apis REST o de Graphql. Es super importante para poder estar un paso adelante y aplicarlo en el trabajo y proyectos avanzados.

S铆铆铆铆铆铆铆铆, quiero el curso avanzado de flutter! 馃槃

Un curso avanzado de Flutter estar铆a bueno, entrando quiz谩s con m谩s profundidad a temas de dise帽o din谩mico. Tambi茅n ser铆a bueno, crear aplicaciones consumiendo servicios o casos donde tengamos que crear c贸digo personalizado para cada plataforma.

Avanzado!!!

Curso avanzado de Flutter!

En mi proyecto no aparece la carpeta de kotlin 馃槮 solo la de java. 驴C贸mo puedo corregir la opacidad de la barra superior desde el main de java?

Por favor!! Curso Avanzado. Por cierto, gran curso @anncode, gracias!

A todos nos encantar铆a un curso avanzado de Flutter!!! H谩ganlo realidad!!!

Si, por favor curso avanzado 馃槂

Ser铆a genial un segundo curso de Flutter con toda la l贸gica del negocio. Consumo de APIs, conexi贸n con bases de datos, animaciones, pruebas, etc. 馃槃

Ser铆a a煤n m谩s perfecto si el proyecto fuese una mini-juego. ^_^

Curso avanzado (Y)

Hola Team.

Una consulta cual seria el motivo de que mi android estudio no me este reconociendo el import android ni el getWindow pero la app en Flutter si este corriendo perfectamente en el emulador. Solo no me deja hacer que la barra sea trasparente como su nos explica @anncode

Evidencia:

Saludos!

CARGAR INFORMACI脫N DESDE UNA DB!!!

Buenas tardes. Se comenta en el v铆deo que para quitar la transparencia a la Status Bar de Android se hace con Kotlin. Pues bien, en mi proyecto, ni desde VSCode ni desde Android Studio me aparece la carpeta de Android. Creo recordar que en el v铆deo donde cre谩bamos el proyecto, Ann Code tampoco le dio a agregar Kotlin. Y, adem谩s, tampoco se exig铆a saber este lenguaje para acceder al curso. 驴Se puede dar una alternativa con Java para los que no nos sale la carpeta con Kotlin? Gracias de antemano. (Por cierto, no pong谩is links externos a blogs donde hablan al respecto. He visto varios y no solucionan el problema.

Buenas, para los que est谩n teniendo un problema con el tema del Androidx, que se les rompe todo el proyecto intentando ocultar la barra les paso un link para arreglarlo. 馃槂
Link

Saludos!

si, estar铆a genial ver la parte de la logica

Hola compa帽er@ si estas a punto de modificar el MainActivity 隆NO LO HAGAS! se tronara el c贸digo y ya no podr谩s arreglar el proyecto; si ya lo hiciste y no puedes arreglar el error te recomiendo que crees otro proyecto en Flutter con otro nombre claro y solo copies los archivos del anterior proyecto(no te olvides de archivo pubspec.yaml) sol贸 copia y pega y no toques nada de android. Suerte y en el siguiente comentario te dejo la soluci贸n.

Cordial saludo
para los que tengan problemas con la barra y el MainActivity.kt lo unico que tienen que hacer es poner este c贸digo en el archivo main.dart , en el void main.

void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarBrightness: Brightness.light
));

runApp(const MyApp());
}

De esta forma sin el uso de Kotlin, y siguiendo en nuestro main

<import 'package:flutter/services.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, // transparent status bar
  ));
  runApp(MyApp());
}
> 

Y yo corriendo el curso entero en Android por qu茅 no puedo usar el emulador de iOS. 馃槶馃槆

Me encantar铆a que hagan mas videos con la nueva version de flutter

Curso AVANZADO pls!!! 馃槂

Curso avanzado de Flutter con Firebase

Si, AnnCode Claro un curso avanzado para poder realizar m谩s maravillas esta incre铆ble

Curso avanzado de Flutter con Firebase

SIIII!!! CURSO AVANZADO para casos reales !

Curso de Flutter con la l贸gica de negocios, please!

curso avanzado de flutter con conexi贸n a rest api y graphql

quiero el curso avanzado de flutter es sencillo mas omenos conectar el controlador con las vista pero con Ann Code siempre se aprende mas !!

Que se venga el Curso Avanzado de Flutter + Firebase

Avanzado por favor鈥 y pronto 馃槈

sii , curso avanzado!

隆SI por favor, un curso avanzado de flutter! Este esta buenisimo para una base pero queremos mas :p

Muy interesante, por lo que si. Curso Avanzado para unir mas con APIs y que el contenido sea dinamico. 馃槃

Curso avanzado. para los que desean aprender mas.
https://flutter.io/docs/cookbook/networking/fetch-data

Poner transparente el status bar de android

Siii, un curso con almacenamiento de datos local y a un api seria Genial!!!

Intente poner transparente la barra en android y unicamente hice lo que en el video pero ahora no corre mi app, 驴saben porque? o 驴que debo hacer?

Siiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii! Por favor! CURSO AVANZADO!!!!!!!!!!

si por favor, curso avanzado de flutter!

Conexion de Flutter con un backend no JS cpn Graphql. tema de seguridad

Es indispensable un curso avanzado de Flutter

Dios tantos lenguajes tantas cosas y tan poco tiempo !! yo si quiero el curso avanzado de flutter 鈥 y si se puede con firebase seria excelente

Si o si un curso avanzado que incre铆ble la velocidad a煤n recuerdo cuando cree mi app en Android con el Ide de eclipse y tanto dolor de cabeza con los XML y ac谩 es tan simple genial el curso!!

Un curso porfavor para conectar firebase y una REST API

Seria genial un curso de consumo de servicio y usando alguna metodolog铆a de desarrollo.

si por favor un curso avanzado estaria genial

Si deseo obtener imagenes de un url como las podria incorporar

Curso Avanzado!

Cursooo avanzado de Flutter c: .

Quisiera un curso de Flutter con integracion de API鈥檚

sii, un curso avanzado vendria bien

otra solucion para los que tienen error con la barra de estado de android.
agregen en el principal (main)
import 鈥榩ackage:flutter/services.dart鈥; //barra de estado o statusBar

@override //////entre este
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
statusBarColor: Color.fromRGBO(0, 0, 0, 0.0)//Colors.blue, //or set color with: Color(0xFF0000FF)
));
return Scaffold( //////7entre este

Fui a modificar la parte de la barra superior y me salio un error relacionado con el Gradle que malogr贸 todo el proyecto. No encontr茅 una soluci贸n oportuna, quiz谩 por mi inexperiencia con el manejo de versiones y dependencias del build.Gradle.

Por fortuna estoy tomando en paralelo el curso de Git & GitHub y tengo un repositorio remoto con todos los avances que voy realizando en 茅ste curso.
perd铆 lo de las 煤ltimas dos clases, pero no todo, que es mejor que nada.
Antes de tomar cualquiera de 茅stos cursos es mejor tomar el de Git.
Ac谩 es donde uno se da cuenta lo importante del manejo y control de versiones.

a mi me generaba muchos errores al modificar el archivo MainActivity.ky, lo resolv铆 con lo siguiente:
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(
statusBarColor: Colors.transparent,
));

Al intentar ir al lugar donde se hace lo de la transparencia, exploto el codigo:
https://prnt.sc/qy7r7r

sii seria genial trabajar con apis

S铆, estar铆a super bien trabajar con Apis

main.dart:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        statusBarColor: Colors.transparent
    ));

Seria incre铆ble un curso de Flutter con conexi贸n a base de datos que no sea Firebase.

Para evitar declarar todas las imagenes una a una, puedes importarlas todas haciendo referencia a su directorio raiz