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 184

Preguntas 27

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

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’s 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’s 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’s

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 ‘package: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

M egusraria que hicieran un curso de conectividad de fluter con base de datos y programacion de contenido dinamico con datos.