Ionic 3 Torch /Flashlight Tutorial – Using Backlight Plugin Ionic Native 3.x

In this post, we will create Flashlight/ Torch app in Ionic 3 version using Ionic Native plugin Flashlight, the application will have a switch button to on/ off camera flashlight which can be used as a torch.

 

 

 

Let’s start…

Our complete app will look like this

Create an Ionic 3 App

$ ionic start Ionic3FlashLight blank
$ cd Ionic3FlashLight

Install FlashLight plugin in Application

$ ionic cordova plugin add cordova-plugin-flashlight
$ npm install --save @ionic-native/flashlight

 

Add this plugin in app’s module

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { Flashlight } from '@ionic-native/flashlight';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Flashlight,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

 

Add On/Off HTML buttons in home.html

<ion-content padding>

  <div class="on-button" *ngIf="!isOn" (click)="onTorch()"></div>
  <div class="off-button" *ngIf="isOn" (click)="offTorch()"></div>

</ion-content>

In home.ts add onTorch and offTorch events

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  isOn = false;
  constructor(public navCtrl: NavController,private flashlight: Flashlight) {

  }

  onTorch(){
    if(this.flashlight.available()){
      this.isOn = false;
      this.flashlight.switchOn();
    }else{
      alert("Flashlight Not Available");
    }
  }
  offTorch(){
    this.isOn = true;
    this.flashlight.switchOff();
  }


}

Add some style for custom background and button styles in home.scss

page-home {
    
    ion-content{
         background-image: url("../../assets/imgs/hd-background.jpg");
         background-size: cover;
    }    
    .on-button{
        background-image: url(../../assets/imgs/on.png);
        background-size: contain;
        background-position: 50% 2%;
        height: 41%;
        /* width: 50%; */
        background-repeat: no-repeat;
        margin: auto;
        margin-top: 30%;
    }
    .off-button{
        background-image: url(../../assets/imgs/off.png);
        background-size: contain;
        background-position: 50% 2%;
        height: 41%;
        /* width: 50%; */
        background-repeat: no-repeat;
        margin: auto;
        margin-top: 30%;
    }
}

Now your app in a real device to check.

Find source code on GitHub here

Leave a Comment

Your email address will not be published. Required fields are marked *

istanbul escortHacklinkartvin escortGiresun escortEscortporno izleizmir escortsincan escortistanbul escortizmir escortGaziantep escortşişli escortkartal escortbodrum escortAntalya escortMarmaris escortpornoankara escortistanbul escorthttps://escortcity.net/Ankara çilingironwin girişHacklink satın alçankaya escortAyvalık Escortkütahya escortgümüşhane escortAksaray escortaydın escortkayseri escortçankaya escortkızılay escortkeçiören escorthepabeteryaman escortKiralık Bahis Siteleribonus veren sitelerKiralık Bahis SiteleriKiralık Bahis SayfasıAviator oynaCasinoslotdiyarbet girişgates of olympus oynasugar rush oynaSweet bonanza demowild west gold demo oynabodrum escortbodrum escortçeşme escortbig bass bonanza oynaredbullholdenracing.comistanbul escortHacklinkartvin escortGiresun escortEscortporno izleizmir escortsincan escortistanbul escortizmir escortGaziantep escortşişli escortkartal escortbodrum escortAntalya escortMarmaris escortpornoankara escortistanbul escorthttps://escortcity.net/Ankara çilingironwin girişHacklink satın alçankaya escortAyvalık Escortkütahya escortgümüşhane escortAksaray escortaydın escortkayseri escortçankaya escortkızılay escortkeçiören escorthepabeteryaman escortKiralık Bahis Siteleribonus veren sitelerKiralık Bahis SiteleriKiralık Bahis SayfasıAviator oynaCasinoslotdiyarbet girişgates of olympus oynasugar rush oynaSweet bonanza demowild west gold demo oynabodrum escortbodrum escortçeşme escortbig bass bonanza oynaredbullholdenracing.com
Diş eti ağrısıankara kocaeli nakliyatgüvenlik bariyerisakarya evden eve nakliyatgaziantep evden eve nakliyatnargilehttps://www.orneknakliyat.comseowordpress en iyi seo eklentileripuro satın alizmir saç ekimiistanbul evden eve nakliyatimplantbebekeskişehir inşaat şirketleriantika eşya alanlarantika eşya alanlarantalya haberpgcdpmsagaziantep boşanma avukatıAntika alan yerlermaltepe antika eşya alanlarGaziantep Evden Eve TaşımacılıkGaziantep Halı Yıkamaizmir escortetiler antika eşya alanlaretiler antika eşya alanlarantika alanlarAccident LawyerDental Implantiqoseskişehir pelet kazanıDiş eti ağrısıankara kocaeli nakliyatgüvenlik bariyerisakarya evden eve nakliyatgaziantep evden eve nakliyatnargilehttps://www.orneknakliyat.comseowordpress en iyi seo eklentileripuro satın alizmir saç ekimiistanbul evden eve nakliyatimplantbebekeskişehir inşaat şirketleriantika eşya alanlarantika eşya alanlarantalya haberpgcdpmsagaziantep boşanma avukatıAntika alan yerlermaltepe antika eşya alanlarGaziantep Evden Eve TaşımacılıkGaziantep Halı Yıkamaizmir escortetiler antika eşya alanlaretiler antika eşya alanlarantika alanlarAccident LawyerDental Implantiqoseskişehir pelet kazanı