Como usar el flash de un dispositivo móvil en ionic

Hola a todos, hoy os voy a comentar como usar el flash de nuestro dispositivo móvil.

Si queremos usar flash en alguna de nuestra aplicaciones, os recomiendo usar este plugin nativo.

Tengo un tutorial con más información sobre el tema.

Como instalar plugins nativos en ionic

Sino sabes crear un proyecto en ionic, te dejo otro tutorial.

Crear un proyecto IONIC

El template que usaré es blank.

En este tutorial, voy a usar ionic 6 que ya viene con capacitor, por lo que voy a realizar los siguientes comandos:

Vamos al fichero app.module e importamos en providers Flashlight:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { Flashlight } from '@ionic-native/flashlight/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    Flashlight
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Vamos a aprovechar el componente home para meter nuestra lógica.

Empecemos por el template.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title class="ion-text-center">
      Linterna
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">

  <ion-grid>
    <ion-row>
      <ion-col size="12" class="ion-text-center">
        <!-- Texto que indica el estado actual -->
        <ion-text>{{active ? 'La linterna esta encendida' : 'La linterna esta apagada'}}</ion-text>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="12" class="ion-text-center">
        <!-- Toggle para cambiar el flash -->
        <ion-toggle [checked]="active" (ionChange)="flash()"></ion-toggle>
      </ion-col>
    </ion-row>
  </ion-grid>

</ion-content>

Ponemos simplemente un ion-header y un ion-content. Con un ion-toggle cambiando el estado del atributo active para activar/desactivar el flash de nuestro móvil.

En el typescript, pondremos lo siguiente:

import { Component } from '@angular/core';
import { Flashlight } from '@ionic-native/flashlight/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  // booleano para indicar si se muestra o no la linterna
  public active: boolean;

  // inyectamos flashlight
  constructor(
    private flashlight: Flashlight
  ) {
    this.active = false;
  }

  flash(){
    this.active = !this.active;

    // si esta activo, encendemos la linterna, sino la apagamos
    if(this.active){
      this.flashlight.switchOn();
    }else{
      this.flashlight.switchOff();
    }

  }

}

Inyectamos en el constructor el servicio de flashlight y usamos el método switchOn para encender el flash y switchOff para apagar el flash.

Este es el resultado:

Os dejo aquí el código para descargar.

Recuerda que si quieres saber más de Ionic, tengo un curso en udemy muy completo donde te enseño paso a paso todo sobre Ionic realizando aplicaciones.

Aprende IONIC 6 con proyectos prácticos udemy

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.