Claro un curso avanzado para poder conectar con api la app
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
Anahí Salgado Díaz de la Vega
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
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.
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.
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!
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?
si por favor, curso avanzado de flutter!
Conexion de Flutter con un backend no JS cpn Graphql. tema de seguridad
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
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?