Curso Avanzado de Flutter

Curso Avanzado de Flutter

Instruido por:
Anahí Salgado Díaz de la Vega
Anahí Salgado Díaz de la Vega
Avanzado
9 horas de contenido
Ver la ruta de aprendizaje
Platzi Trips
Proyecto del curso
Platzi Trips

En este curso le daremos vida a la aplicación que desarrollamos en el Curso de Flutter. Implementaremos autenticación con Google a través de Firebase, daremos persistencia a nuestros datos usando la base de datos Realtime de Cloud Firestore, aprenderás manejar al hardware en iOS y Android accediendo a la cámara del dispositivo, tomando fotos y después subirlas al Firebase Storage. Construiremos una aplicación móvil para Android & iOS totalmente conectada a Firebase.

Curso Avanzado de Flutter

Curso Avanzado de Flutter

Progreso del curso:0/58contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/58contenidos(0%)

Arquitectura de Aplicaciones

Material Thumbnail

¿Qué es una Arquitectura de software?

09:08 min

Tipos de Arquitecturas para Flutter

02:10 min

Material Thumbnail

Arquitectura BLoC en Flutter

11:40 min

Material Thumbnail

BLoC + Clean Architecture en Flutter

06:49 min

Material Thumbnail

Estructurando nuestro proyecto utilizando la Arquitectura BLoC

13:29 min

Material Thumbnail

Haciendo BLoC Singleton en Flutter

10:55 min

Material Thumbnail

Aplicando Providers al Proyecto

08:26 min

Firebase y Flutter

Material Thumbnail

Integrando Firebase Authentication, Cloud Firestore y Firebase Storage al proyecto

11:21 min

Material Thumbnail

Integrando Firebase a Flutter para Android

11:51 min

Material Thumbnail

Integrando Firebase a Flutter para iOS

15:39 min

Material Thumbnail

Creación de Pantalla de Login con Flutter

12:23 min

Material Thumbnail

Creando botones reutilizables en Flutter

12:36 min

Material Thumbnail

Autenticación de Firebase con Google

11:04 min

Material Thumbnail

Implementando Firebase Authentication en BLoC Pattern

10:39 min

Material Thumbnail

Streams en Flutter

06:05 min

Material Thumbnail

Manejando una sesión con Firebase Authentication y Flutter

13:04 min

Material Thumbnail

Implementando Google SignOut en BLoC

08:49 min

Material Thumbnail

Implementando Google SignOut en View

09:10 min

Material Thumbnail

Monitoreando y validando la conexión al Sign con Google

09:53 min

Material Thumbnail

Mostrando los datos de usuario de Google en la interfaz en Flutter

15:16 min

Cloud Firestore de Firebase en Flutter

Material Thumbnail

¿Qué es Cloud Firestore de Firebase?

09:02 min

Material Thumbnail

Analizando un modelo de datos no relacional

09:14 min

Material Thumbnail

Creando un Modelo de datos en Cloud Firestore

10:57 min

Material Thumbnail

Enviando datos a Cloud Firestore

14:45 min

Material Thumbnail

Creando un Widget gradiente personalizado

12:07 min

Material Thumbnail

Manejo de Desbordamiendo de Texto de Widget Text

05:38 min

Material Thumbnail

Botón de Back en un Appbar en Flutter

15:05 min

Navegación entre pantallas en Flutter

02:02 min

Material Thumbnail

Widget Text Appbar personalizado en Flutter

10:11 min

Material Thumbnail

Widget TextField personalizado en Flutter

12:07 min

Material Thumbnail

Creando una Safe Area para una interfaz que tiene un AppBar

07:37 min

Material Thumbnail

Widget TextField con iconos en Flutter

13:22 min

Material Thumbnail

Retocando el CardView

15:15 min

Material Thumbnail

Mostrando imágenes en un CardView

05:15 min

Material Thumbnail

Creando un botón de Submit en Flutter

07:56 min

Material Thumbnail

Envío de datos de un fórmulario en Flutter

08:44 min

Material Thumbnail

Subiendo datos a Firestore de Firebase

08:19 min

Formularios en Flutter

03:54 min

Acceso al Hardware con Flutter

Material Thumbnail

Acceso a la cámara en Flutter

11:31 min

Librerías de acceso a Hardware en Flutter

01:25 min

Firebase Storage en Flutter

Material Thumbnail

Qué es y cómo funciona Firebase Storage en Flutter

05:02 min

Material Thumbnail

Subiendo una imagen a Firebase Storage desde Flutter

11:06 min

Querys avanzados en Cloud Firestore de Firebase en Flutter

Material Thumbnail

Manejo de imágenes en Cloud Firestore

10:24 min

Material Thumbnail

Cloud Firestore insertando referencias y arrays en la base de datos

09:26 min

Material Thumbnail

Descargar imágenes de Firebase Storage y mostrarlas en Flutter

10:46 min

Material Thumbnail

Procesando datos con BLoC Pattern

07:58 min

Material Thumbnail

Trayendo datos de Cloud Firestore

09:56 min

Material Thumbnail

Persistiendo datos de un usuario logueado

10:39 min

Material Thumbnail

Aplicando Filtros en Cloud Firestore

09:22 min

Material Thumbnail

Construyendo los Places en la pantalla de Home

08:27 min

Material Thumbnail

Mostrando los Places en la pantalla de Home

10:49 min

Material Thumbnail

Actualizando datos en tiempo real

09:10 min

Manejando la lógica de likes, como botón toggle.

06:52 min

Insertando y obteniendo referencias en datos de Firestore.

03:52 min

Usando el caché para cargar imágenes más rápido

01:24 min

StreamController, sink, add y StreamBuilder

08:19 min

Conclusiones

nuevosmás votadossin responder
Juan David Almansa
Juan David Almansa
Estudiante

¿Cómo puedo usar mi base de datos ya existente de Mysql con Firebase? Si no utilizo Firebase, my app no funcionaría

1
Juan David Almansa
Juan David Almansa
Estudiante

¿La manera en que la base de datos de Firebase se comunica con la app es la misma que con una base de datos en Mysql?

1
Pablo Santana
Pablo Santana
Estudiante

Hola.

¿El tener varios providers serviría para reconocer de mejor forma algún problema con funciones de lógica de negocio?

1
Miguel Guevara
Miguel Guevara
Estudiante

Tengo una duda, existe una manera de guardar datos tipo timestamp y datos tipo referencia de firebase usando la libreria SharedPreference o si existe algun metodo o libreria altaerna para almacenar los datos con persistencia ya que necesito guardar dichos datos con persistencia

0
Marco Alfonso Calderón Valdez
Marco Alfonso Calderón Valdez
Estudiante

Hola perdon hice el codigo tal como esta ahi y todo pero en consola me muestra el siguiente mensaje:
W/System ( 2691): Ignoring header X-Firebase-Locale because its value was null.
W/System ( 2691): Ignoring header X-Firebase-Locale because its value was null.
I/flutter ( 2691): El usuario es “nombre de mi correo”

y aparte despues de eso se regresa y mantiene en el activity de signIn

mi codigo es el siguiente

main.dart

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

classMyAppextendsStatelessWidget{
  // This widget is the root of your application.@overrideWidget build(BuildContext context) {
    returnBlocProvider(
        child: MaterialApp(
          title: 'FlutterDemo',
          //home: PlatziTripsCupertino(),
          home: SignInScreen(),
        ),
        bloc: UserBloc());
  }
}

classMyHomePageextendsStatefulWidget{
  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".finalString title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

sign_in_screen.dart

import'package:firebase_auth/firebase_auth.dart';
import'package:flutter/material.dart';
import'package:flutteravanzadoplatzi/User/bloc/block_user.dart';
import'package:flutteravanzadoplatzi/widgets/gradient_back.dart';
import'package:flutteravanzadoplatzi/widgets/button_green.dart';
import'package:generic_bloc_provider/generic_bloc_provider.dart';
import'package:flutteravanzadoplatzi/platzi_trips_cupertino.dart';

classSignInScreenextendsStatefulWidget{
  @overrideState createState() => _SignInScreen();

}

class_SignInScreenextendsState<SignInScreen>{

  UserBloc userBloc;
  /*AsyncSnapshot snapshot;
  double screenWidth;*/@overrideWidget build(BuildContext context) {
    userBloc=BlocProvider.of(context);
    return _handleCurrentSession();
  }
  Widget _handleCurrentSession(){
    returnStreamBuilder(
      stream: userBloc.authStatus,
      builder: (BuildContext context, AsyncSnapshot snapshot){
        //snaptshot- data -object Userif(snapshot.hasData || snapshot.hasError){
          return signInGoogleUI();
        }else{
          returnPlatziTripsCupertino();
        }
      },
    );
  }

  Widget signInGoogleUI() {
    returnScaffold(
        body: Stack(
      alignment: Alignment.center,
      children: <Widget>[
        GradientBack("", null),
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "Welcome \n this is your Travel app",
              style: TextStyle(
                  fontSize: 37.0,
                  fontFamily: "Lato",
                  color: Colors.white,
                  fontWeight: FontWeight.bold
              ),
            ),
            ButtonGreen(text: "Login with Gmail",
                onPressed:(){
              //userBloc.signIn();
                  userBloc.signIn().then((UserCredential user)=> print("El usuario es ${user.user.displayName}"));
                },
              width: 300.0,
              height: 50.0,
            )
          ],
        )
      ],
    ));
  }
}

profile header.dart

import'package:flutter/material.dart';
import'package:flutteravanzadoplatzi/User/bloc/block_user.dart';
import'package:flutteravanzadoplatzi/User/ui/widgets/user_info.dart';
import'package:flutteravanzadoplatzi/User/ui/widgets/button_bar.dart';
import'package:generic_bloc_provider/generic_bloc_provider.dart';
 import'package:flutteravanzadoplatzi/User/model/user.dart';

classProfileHeaderextendsStatelessWidget{
  UserBloc userBloc;
  User user;

  @overrideWidget build(BuildContext context) {
    userBloc = BlocProvider.of<UserBloc> (context);

    returnStreamBuilder(
      stream: userBloc.streamFirebase,
      // ignore: missing_return
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        switch(snapshot.connectionState){
          caseConnectionState.waiting:
          caseConnectionState.none:
            returnCircularProgressIndicator();
          caseConnectionState.active:
          caseConnectionState.done:
            returnShowProfileData(snapshot);
        }
      }
    );

    /*final title = Text(
      'Profile',
      style: TextStyle(
          fontFamily: 'Lato',
          color: Colors.white,
          fontWeight: FontWeight.bold,
     h     fontSize: 30.0),
    );

    return Container(
      margin: EdgeInsets.only(left: 20.0, right: 20.0, top: 50.0),
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[title],
          ),
          UserInfo('assets/img/ann.jpg', 'Anahí Salgado', '[email protected]'),
          ButtonsBar()
        ],
      ),
    );*/
  }
  WidgetShowProfileData(AsyncSnapshot snapshot){
    if(!snapshot.hasData || snapshot.hasError){
      print("No Logeado");
      returnContainer(
        margin: EdgeInsets.only(
          left: 20.0,
          right: 20.0,
          top: 50.0
        ),
        child: Column(
          children: <Widget>[
            CircularProgressIndicator(),
            Text("No se pudo cargar la informacion. haz login")
          ],
        ),
      );
    }else{
      print("Logeado");
      print(snapshot.data);
      user=User(name: snapshot.data.displayName, email: snapshot.data.email,photoURL: snapshot.data.photoUrl);
      final title = Text(
        'Profile',
        style: TextStyle(
            fontFamily: 'Lato',
            color: Colors.white,
            fontWeight: FontWeight.bold,
            fontSize: 30.0),
      );

      returnContainer(
        margin: EdgeInsets.only(left: 20.0, right: 20.0, top: 50.0),
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[title],
            ),
            UserInfo(user),
            ButtonsBar()
          ],
        ),
      );
    }
  }
}

he estado batallando con eso

1
Ferran Rosales Lopera
Ferran Rosales Lopera
Estudiante

Se que esto se hizo unas clases atrás, pero el efecto que se dio al degradado poniendo ese medio circulo casi transparente a mi me aparece en toda la pantalla y no solo en el degradado. Lo he repasado y veo que no tengo diferencias en el código. A alguien más le ha pasado? Como puedo solucionarlo? Gracias.

0
Ferran Rosales Lopera
Ferran Rosales Lopera
Estudiante

Hola! el comando print(snapshot.data); me devuelve lo siguiente:

flutter: FirebaseUser(Instance of ‘PlatformUser’)

y no puedo ver la info para conocer las keys que contiene y así saber como extraer la información.

De que manera puedo visualizar la información contenida en el snapshot?

Gracias.

0
Emiliano Fernández Cervantes
Emiliano Fernández Cervantes
Estudiante

Para los que lo necesiten, parece que en las nuevas versiones si se debe escribir URL con mayúsculas para mostrar la foto. El código queda así.

else {
      print("Loggeado");
      print(snapshot.data);
      user = UserData(name: snapshot.data.displayName, email: snapshot.data.email, photoURL: snapshot.data.photoURL);```
1
David Alejandro Ayala Rizo
David Alejandro Ayala Rizo
Estudiante

Me sale este error:

The method ‘>=’ was called on null.
Receiver: null
Tried calling: >=(0.0)

y no me dice en qué línea D:

0
Daniel Alexander Muelas Rivera
Daniel Alexander Muelas Rivera
Estudiante

¿Que alternativas hay a la autenticación con firebase, por ejemplo si tengo que hacer login ante una base de datos que este ya creada con los usuarios y contraseñas, y los deba consumir mediante un API?

0