Share
Met Google Firebase, een van de krachtigste en veelzijdigste serverloze platforms die tegenwoordig beschikbaar is, kunt u moeiteloos essentiële functies toevoegen, zoals gebruikersbeheer, crashrapportage, analyses, real-time gegevensopslag en zelfs machine learning voor uw mobiele apps. Om met het platform te kunnen werken tijdens het gebruik van het Google Flutter-framework, heb je FlutterFire nodig.
FlutterFire is een groeiende verzameling officiële Flutter-plug-ins voor Firebase. In deze zelfstudie laat ik u zien hoe u deze kunt gebruiken om drie verschillende Firebase-services aan een Flutter-app toe te voegen.
Als u deze stapsgewijze zelfstudie wilt volgen, heeft u het volgende nodig:
Als je de Flutter-SDK of de Flutter-plug-in niet hebt, leer je ze hier beide te installeren:
Start Android Studio en maak een nieuw Flutter-project. Zorg er in de wizard voor het maken van projecten voor dat u de Flutter-applicatie optie en associeer hiermee een geldige pakketnaam.
U kunt Firebase-services niet gebruiken in dit project totdat u het bij het Firebase-platform hebt geregistreerd en koppelt aan een Firebase-project. Hoewel u dit handmatig kunt doen met een browser, kunt u veel tijd en moeite besparen door in plaats daarvan de Firebase-assistent van Android Studio te gebruiken, die de meeste stappen voor u automatiseert.
Begin door het native Android-project te openen dat is ingesloten in uw Flutter-project door naar Hulpmiddelen> Flutter> Openen voor bewerken in Android Studio. Zorg er daarom voor dat u het project in een nieuw venster opent.
Ga in het nieuwe venster naar Hulpmiddelen> Firebase om de Firebase-assistent te openen.
Ga dan naar Analytics> Log een Analytics-gebeurtenis. In het scherm dat hierna verschijnt, drukt u op Aansluiten knop.
U ziet nu een dialoogvenster waarin u wordt gevraagd de naam van uw nieuwe Firebase-project op te geven. Typ een gewenste naam in en druk op Maak verbinding met Firebase knop.
Op dit punt voltooit Firebase Assistant automatisch het registratieproces en voegt een bestand met de naam google-services.json, die belangrijke configuratiegegevens bevat, voor uw project.
Als u het JSON-bestand wilt lezen, heeft u de plug-in voor Google-services nodig. Dus open het root-niveau build.gradle bestand en voeg de classpath van de plug-in in de afhankelijkheden sectie:
classpath 'com.google.gms: google-services: 4.0.1'
Activeer vervolgens de plug-in door de volgende regel toe te voegen aan het einde van het app-niveau build.gradle het dossier:
plug-in toepassen: 'com.google.gms.google-services'
U kunt nu het nieuwe venster sluiten en terugkeren naar het Flutter-project.
FlutterFire heeft onafhankelijke Google Flutter-plug-ins voor de meeste Firebase-services. Om de plug-ins als afhankelijkheden in uw Flutter-project toe te voegen, hoeft u ze alleen onder de afhankelijkheden sleutel van de pubspec.yaml het dossier.
In de volgende code ziet u hoe u afhankelijkheden kunt toevoegen voor de nieuwste versie van plug-ins die zijn gekoppeld aan de services Analytics, Cloud Firestore en ML Kit:
firebase_analytics: ^ 1.0.3 cloud_firestore: ^ 0.7.3 firebase_ml_vision: ^ 0.2.0 + 1
In deze zelfstudie maakt u een app waarmee u QR-codes kunt scannen en de gegevens die ze bevatten kunt opslaan in een clouddatabase. Zoals je misschien al geraden hebt, gebruik je de ML Kit-plug-in als een QR-code-decoder en de Cloud Firestore-plug-in als een interface naar de database.
Om de QR-codes daadwerkelijk vast te leggen, hebt u Image Picker nodig, een plug-in waarmee u met de camera kunt communiceren. U kunt het als een andere afhankelijkheid toevoegen:
image_picker: ^ 0.4.10
Na het toevoegen van de afhankelijkheden, ga je gang en druk je op de Pakketten krijgen om alle plug-ins te installeren.
Meestal hoeft u geen aanvullende code te schrijven om Firebase Analytics te kunnen gebruiken in uw Flutter-app. Zolang de bijbehorende plug-in is geïnstalleerd, meldt uw app automatisch gebruikersgegevens aan Firebase. U kunt dit verifiëren door uw app meteen uit te voeren en naar de Firebase-console te gaan.
Als u in de vorige stappen geen configuratiefouten hebt aangetroffen, kunt u gebeurtenissen zien verschijnen in de StreamView paneel van het Analytics-dashboard.
Firebase ML Kit is een recent geïntroduceerde Firebase-service waarmee u gezichten kunt detecteren, barcodes kunt scannen en optische tekenherkenningshandelingen kunt uitvoeren op elke afbeelding of video. De FlutterFire-plug-in biedt een API die zeer intuïtief en beknopt is. Laten we het nu gebruiken om QR-codes te decoderen.
Begin met het maken van een lay-out met een knop die gebruikers kunnen gebruiken om foto's van QR-codes vast te leggen. De volgende code toont u hoe u een Material Design-lay-out kunt maken met een RaisedButton widget geplaatst in het midden:
Accentsconagua
void main () => runApp (new MaterialApp (home: new MyApp ())); class MyApp breidt StatelessWidget uit @override Widget-build (BuildContext-context) retourneer nieuwe Scaffold (body: nieuw Center (child: new RaisedButton (onPressed: () // More code here, child: new Text ("Capture QR Code" )))); Als u de app nu uitvoert, ziet het er als volgt uit:
Houd er rekening mee dat de knop een ingesloten gebeurtenis-luisteraar heeft die eraan is gekoppeld. In de luisteraar kunt u de pickImage () methode van de ImagePicker klas om een foto te maken. Omdat de methode asynchroon wordt uitgevoerd, moet u een listener eraan toevoegen om het resultaat te ontvangen. De volgende code laat zien hoe:
ImagePicker.pickImage (bron: ImageSource.camera) .then ((foto) // Meer code hier);
Nadat u een foto hebt gemaakt, kunt u deze doorgeven aan ML Kit's BarcodeDetector klasse om de QR-codes te detecteren die deze kan bevatten. Gebruik de. Om een exemplaar van de klasse te krijgen barcodeDetector () methode van de FirebaseVision klasse.
ML Kit ondersteunt veel verschillende soorten streepjescodes. Om het detectieproces efficiënter te maken, kunt u een BarcodeDetectorOptions object om het type streepjescode te specificeren waarin u geïnteresseerd bent. U maakt als volgt een detector voor alleen QR-codes:
BarcodeDetector detector = FirebaseVision.instance.barcodeDetector (BarcodeDetectorOptions (barcodeFormats: BarcodeFormat.qrCode));
Omdat de detector beeldbestanden niet rechtstreeks kan verwerken, moet u uw foto omzetten in een FirebaseVisionImage object met zijn van bestand() methode. U kunt het object vervolgens doorgeven aan de detectInImage () methode van de detector om een lijst met gedetecteerde streepjescodes te krijgen. De methode wordt asynchroon uitgevoerd, dus u moet er een luisteraar aan koppelen.
detector .detectInImage (FirebaseVisionImage.fromFile (foto)) .then ((streepjescodes) // Meer code hier);
In de luisteraar hebt u toegang tot een lijst met Barcode voorwerpen. De ruwe waarde veld van elk dergelijk object bevat onbewerkte gedecodeerde gegevens. Laten we voorlopig een. Gebruiken om dingen eenvoudig te houden AlertDialog widget om de onbewerkte gegevens weer te geven die aanwezig zijn in het eerste item van de lijst.
De volgende code laat zien hoe je een eenvoudige kunt maken AlertDialog widget hebben Tekst widgets voor de titel en inhoud, en a FlatButton widget die kan worden ingedrukt om het te sluiten:
if (barcodes.length> 0) var barcode = barcodes [0]; // Kies eerste streepjescode // Maak waarschuwingsdialoog showdialoog (context: context, builder: (context) retourneer nieuwe AlertDialog (titel: nieuwe tekst ("QR Code Contents"), inhoud: nieuwe tekst (barcode.rawValue), // Acties met onbewerkte waarde weergeven: [new FlatButton (onPressed: () Navigator.of (context) .pop ();, child: new Text ("OK"))],); ); U kunt de app nu uitvoeren en een paar QR-codes scannen.
Cloud Firestore is een NoSQL-database die u kunt gebruiken om de gegevens van uw app op te slaan in de cloud. De FlutterFire-plug-in biedt klassen waarmee u CRLD-bewerkingen asynchroon kunt uitvoeren.
Voordat u het gaat gebruiken, moet u de Cloud Firestore-service handmatig inschakelen in de Firebase-console. Om dit te doen, gaat u naar Database gedeelte van de console en druk op de Maak een database knop.
Wanneer u wordt gevraagd om de beveiligingsregels van de database te definiëren, kiest u de Start in de testmodus keuze. Met deze modus kunt u de database onmiddellijk gebruiken, maar deze is niet erg veilig en is alleen geschikt voor testdoeleinden.
Druk ten slotte op in staat stellen knop om de database te maken.
Terug in Android Studio kunt u een verwijzing naar de database krijgen met behulp van de aanleg veld van de Firestore klasse. Voeg daarom de volgende code toe aan uw stateloze widget:
var myDatabase = Firestore.instance;
Tijdens het gebruik van Cloud Firestore moet u al uw gegevens opslaan in documenten. Bovendien moet elk document tot een verzameling behoren. Als u een verzameling wilt maken of ernaar wilt verwijzen, moet u de verzameling() methode, die een tekenreeks verwacht die de naam van de verzameling aangeeft.
Zodra u toegang heeft tot een verzameling, kunt u bellen met de toevoegen() methode om er een document aan toe te voegen.
De volgende code, die u vlak voor de oproep aan de. Kunt toevoegen ShowDialog () functie, laat u zien hoe u een nieuw document maakt - een document met de onbewerkte waarde van de QR-code en een tijdstempel - en voegt het toe aan een verzameling met de naam qr_codes:
myDatabase.collection ("qr_codes"). add ("raw_data": barcode.rawValue, "time": new DateTime.now (). millisecondsSinceEpoch) then ((_) print ("One document added.") ;);Als u de app opnieuw uitvoert en een QR-code hiermee scant, kunt u nu de inhoud van de QR-code in de Firebase-console bekijken.
Services aangeboden door het Firebase-platform zijn onmisbaar bij het ontwikkelen van moderne mobiele apps. Er zijn officiële Google Flutter-plug-ins voor bijna al deze services. In deze zelfstudie hebt u geleerd om er samen drie te gebruiken om een zeer nauwkeurige QR-codescanner-app te maken.
Raadpleeg de officiële documentatie voor meer informatie over Flutter en Firebase.
