Skip to content

A Flutter Starter project with Firebase email/password and Google authentication and user signup with email/password.

Notifications You must be signed in to change notification settings

ramoncardena/flutter-firebase-starter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Proyecto base de Flutter con Firebase

Otros idiomas: English

Descripción

Este proyecto pretende ser una plantilla base o starter para empezar un proyecto con Flutter y Firebase de forma rápida.

La apicación consta de dos pantallas: Login y Home

Pantalla Login

En esta pantalla el usuario puede:

  • Iniciar sesión en Firebase con email/password
  • Iniciar sesión en Firebase con una cuenta de Google
  • Registrarse en Firebase con email/password

Pantalla Home

Pantalla a la que llegamos una vez identificados y que nos permite finalizar la sesión.

Base de datos

Además la aplicación crea un documento en la base de datos llamado activity en el que se guarda la hora y el id del usuario cada vez que se inicia sesión.

Objetivo

El objetivo de este proyecto es demostrar el uso de Flutter junto con Firebase para crear de forma rápida una aplicación con un backend para gestionar usuarios y autenticación y una base de datos para almacenar información.

 

Instalación de Flutter

Instalar Flutter en el equipo de desarrollo:

https://flutter.dev/docs/get-started/install/macos

Asegurarnos de que tenemos instalado Android Studio y Xcode:

Descarga de xCode

Descarga de Android Studio (para Mac)

Una vez instalado, comprobar la instalación con:

flutter doctor

 

Instalación proyecto

git clone [email protected]:ramoncardena/flutter-firebase-starter.git flutter-firebase-starter

cd flutter-firebase-starter

flutter packages get

 

Configuración

Definición del Bundle ID en iOS

Abrimos el proyecto de iOS en xCode: ~/flutter-firebase-starter/ios

En la estructura del proyecto seleccionamos el root Runner y en la sección General en el apartado Identity definimos el Bundle ID (Bundle identifier) y la versión (Version).

Después vamos a la sección de Signing & Capabilities y en el apartado Signing seleccionamos el equipo adecuado (Team) para firmar el proyecto.

 

Definición del Application ID en Android

Vamos a la carpeta del proyecto donde se define el Gradle para la aplicación en: ~/flutter-firebase-starter/android/app/build.gradle

Y modificamos la sección de defaultConfig con el application ID (applicationId) correspondiente y fijamos la versión mínima de SDK (minSdkVersion) a 21

defaultConfig {
	applicationId "com.ramoncardena.firebasestarter"
	minSdkVersion 21
	targetSdkVersion 28
	versionCode flutterVersionCode.toInteger()
	versionName flutterVersionName
	testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}

 

Configuración de Firebase

Encontraremos la información detallada en inglés, en este artículo.

Vamos a la consola de Firebase.

Creamos un proyecto nuevo y una vez creado, añadimos dos aplicaciones, una Android y otra iOS.

Aplicación iOS

Creamos una nueva aplicación iOS desde la consola de Firebase y rellenamos los datos básicos.

Después, descargamos el fichero GoogleService-Info.plist de configuración.

Importante: Abrimos xCode y con el botón derecho sobre la carpeta Runner/Runner, añadimos el fichero de configuración de Firebase y cerramos xCode.

Además, para que funcione la autenticación con Google Sign-In, tenemos que añadir la clave correspondiente al fichero ios/Runner/Info.plist:

<!-- Google Sign-in Section -->
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLSchemes</key>
    <array>
<!-- TODO Replace this value: -->
<!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
<string>com.googleusercontent.apps.861823949799-vcuujjn0vvnmcvjppkn</string>
    </array>
  </dict>
</array>
<!-- End of the Google Sign-in Section -->

Aplicación Android

Creamos una nueva aplicación Android desde la consola de Firebase con los datos básicos.

Para añadir la clave de firma SHA, desde un terminal vamos a la carpeta del proyecto y ejecutamos:

keytool -list -v \ -alias androiddebugkey -keystore ~/.android/debug.keystore

(como contraseña usamos android)

A partir de esta parte ya está implementada en el proyecto, es solo informativo

Después descargamos el fichero google-services.json de configuración y lo copiamos en la carpeta del proyecto: android/app.

Una vez copiado el fichero, hemos de configurar el Gradle para que funcione con Firebase. Editamos en primer lugar android/build.gradle:

buildscript {
  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
  }

  // ...

  dependencies {
    // ...

    // Add the following line:
    classpath 'com.google.gms:google-services:4.3.3'  // Google Services plugin
  }
}
allprojects {
  // ...

  repositories {
    // Check that you have following line (if not, add it):
    google()  // Google's Maven repository
    // ...
  }
}

Y en android/app/build.gradle:

dependencies {
// ...
}

// Add the following line to the bottom of the file:
apply plugin: 'com.google.gms.google-services'  // Google Play services Gradle plugin

Por último editamos el fichero android/gradle.properties y le añadimos:

android.useAndroidX=true
android.enableJetifier=true

Finalmente ejecutamos:

flutter packages get

Ejecución

Una vez modificado el ID, comprobamos que la aplicación recién instalada se ejecuta en los dos sistemas (conectamos un móvil Android y un iPhone:

flutter packages get

flutter run -d all

(o arrancando el proyecto desde Android Studio)

 

Instalación de los plugins de Firebase

Esta parte ya está implementada en el proyecto, es solo informativa

Añadimos los plugins que necesitemos de Firebase en pubspec.yaml en la sección de dependencies:

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2

  ## AQUÍ DEPENDENCIAS FIREBASE Y OTRAS...
  firebase_core: ^0.4.1+5
  firebase_analytics: ^5.0.6
  cloud_firestore: ^0.12.10
  firebase_auth: ^0.14.0+9
  google_sign_in: ^4.0.14
  rxdart: ^0.22.6
  provider: 2.0.0+1
  font_awesome_flutter: 8.4.0

Una vez definidos los plugins, los instalamos:

flutter packages get

Y ejecutamos la app para ver que todo funciona:

flutter run -d all

Sobre mí

Puedes conocer más sobre mí en mi página web o leer mis artículos en el blog

About

A Flutter Starter project with Firebase email/password and Google authentication and user signup with email/password.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published