Flutter - Introduction au package

La façon dont Dart organise et partage un ensemble de fonctionnalités est via Package. Dart Package est simplement des bibliothèques ou des modules partageables. En général, le package Dart est identique à celui de l'application Dart, sauf que le package Dart n'a pas de point d'entrée d'application, main.

La structure générale de Package (considérez un package de démonstration, my_demo_package) est comme ci-dessous -

  • lib/src/* - Fichiers de code Dart privés.

  • lib/my_demo_package.dart- Fichier de code principal de Dart. Il peut être importé dans une application en tant que -

import 'package:my_demo_package/my_demo_package.dart'

  • Un autre fichier de code privé peut être exporté dans le fichier de code principal (my_demo_package.dart), si nécessaire comme indiqué ci-dessous -

export src/my_private_code.dart

  • lib/*- N'importe quel nombre de fichiers de code Dart organisés dans n'importe quelle structure de dossier personnalisée. Le code est accessible comme suit:

import 'package:my_demo_package/custom_folder/custom_file.dart'

  • pubspec.yaml - Spécification du projet, identique à celle de l'application,

Tous les fichiers de code Dart dans le package sont simplement des classes Dart et il n'y a aucune exigence particulière pour un code Dart pour l'inclure dans un package.

Types de forfaits

Étant donné que les packages Dart sont essentiellement un petit ensemble de fonctionnalités similaires, ils peuvent être classés en fonction de leurs fonctionnalités.

Paquet de fléchettes

Code Dart générique, qui peut être utilisé à la fois dans un environnement Web et mobile. Par exemple, english_words est un tel paquet qui contient environ 5000 mots et a des fonctions utilitaires de base comme les noms (lister les noms en anglais), les syllabes (spécifier le nombre de syllabes dans un mot.

Forfait Flutter

Code Dart générique, qui dépend du framework Flutter et ne peut être utilisé que dans un environnement mobile. Par exemple, fluro est un routeur personnalisé pour le flutter. Cela dépend du framework Flutter.

Plugin Flutter

Code Dart générique, qui dépend du framework Flutter ainsi que du code de plate-forme sous-jacent (Android SDK ou iOS SDK). Par exemple, la caméra est un plugin pour interagir avec la caméra de l'appareil. Cela dépend du framework Flutter ainsi que du framework sous-jacent pour accéder à la caméra.

Utilisation d'un package Dart

Les packages Dart sont hébergés et publiés sur le serveur en direct, https://pub.dartlang.org.En outre, Flutter fournit un outil simple, pub pour gérer les packages Dart dans l'application. Les étapes nécessaires pour utiliser comme package sont les suivantes -

  • Incluez le nom du package et la version nécessaire dans le pubspec.yaml comme indiqué ci-dessous -

dependencies: english_words: ^3.1.5

  • Le dernier numéro de version peut être trouvé en vérifiant le serveur en ligne.

  • Installez le package dans l'application en utilisant la commande suivante -

flutter packages get

  • Lors du développement dans le studio Android, Android Studio détecte tout changement dans pubspec.yaml et affiche une alerte de package de studio Android au développeur comme indiqué ci-dessous -

  • Les packages Dart peuvent être installés ou mis à jour dans Android Studio à l'aide des options de menu.

  • Importez le fichier nécessaire à l'aide de la commande ci-dessous et commencez à travailler -

import 'package:english_words/english_words.dart';

  • Utilisez n'importe quelle méthode disponible dans le package,

nouns.take(50).forEach(print);

  • Ici, nous avons utilisé la fonction des noms pour obtenir et imprimer les 50 premiers mots.

Développer un package de plugins Flutter

Le développement d'un plug-in Flutter est similaire au développement d'une application Dart ou d'un package Dart. La seule exception est que le plugin utilisera l'API système (Android ou iOS) pour obtenir les fonctionnalités spécifiques à la plate-forme requises.

Comme nous avons déjà appris comment accéder au code de la plateforme dans les chapitres précédents, développons un simple plugin, my_browser pour comprendre le processus de développement du plugin. La fonctionnalité du plugin my_browser est de permettre à l'application d'ouvrir le site Web donné dans le navigateur spécifique à la plate-forme.

  • Démarrez Android Studio.

  • Cliquez sur File → New Flutter Project et sélectionnez l'option Flutter Plugin.

  • Vous pouvez voir une fenêtre de sélection du plugin Flutter comme indiqué ici -

  • Entrez my_browser comme nom de projet et cliquez sur Suivant.

  • Entrez le nom du plugin et d'autres détails dans la fenêtre comme indiqué ici -

  • Entrez le domaine de l'entreprise, flutterplugins.tutorialspoint.com dans la fenêtre ci-dessous, puis cliquez sur Finish. Il générera un code de démarrage pour développer notre nouveau plugin.

  • Ouvrez le fichier my_browser.dart et écrivez une méthode, openBrowser pour appeler la méthode openBrowser spécifique à la plate-forme.

Future<void> openBrowser(String urlString) async { 
   try {
      final int result = await _channel.invokeMethod(
         'openBrowser', <String, String>{ 'url': urlString }
      );
   }
   on PlatformException catch (e) { 
      // Unable to open the browser print(e); 
   } 
}

  • Ouvrez le fichier MyBrowserPlugin.java et importez les classes suivantes -

import android.app.Activity; 
import android.content.Intent; 
import android.net.Uri; 
import android.os.Bundle;

  • Ici, nous devons importer la bibliothèque requise pour ouvrir un navigateur depuis Android.

  • Ajoutez une nouvelle variable privée mRegistrar de type Registrar dans la classe MyBrowserPlugin.

private final Registrar mRegistrar;

  • Ici, Registrar est utilisé pour obtenir des informations de contexte sur le code appelant.

  • Ajoutez un constructeur pour définir Registrar dans la classe MyBrowserPlugin.

private MyBrowserPlugin(Registrar registrar) { 
   this.mRegistrar = registrar; 
}

  • Modifiez registerWith pour inclure notre nouveau constructeur dans la classe MyBrowserPlugin.

public static void registerWith(Registrar registrar) { 
   final MethodChannel channel = new MethodChannel(registrar.messenger(), "my_browser"); 
   MyBrowserPlugin instance = new MyBrowserPlugin(registrar); 
   channel.setMethodCallHandler(instance); 
}

  • Modifiez onMethodCall pour inclure la méthode openBrowser dans la classe MyBrowserPlugin.

@Override 
public void onMethodCall(MethodCall call, Result result) { 
   String url = call.argument("url");
   if (call.method.equals("getPlatformVersion")) { 
      result.success("Android " + android.os.Build.VERSION.RELEASE); 
   } 
   else if (call.method.equals("openBrowser")) { 
      openBrowser(call, result, url); 
   } else { 
      result.notImplemented(); 
   } 
}

  • Écrivez la méthode openBrowser spécifique à la plate-forme pour accéder au navigateur dans la classe MyBrowserPlugin.

private void openBrowser(MethodCall call, Result result, String url) { 
   Activity activity = mRegistrar.activity(); 
   if (activity == null) {
      result.error("ACTIVITY_NOT_AVAILABLE", 
      "Browser cannot be opened without foreground activity", null); 
      return; 
   } 
   Intent intent = new Intent(Intent.ACTION_VIEW); 
   intent.setData(Uri.parse(url)); 
   activity.startActivity(intent); 
   result.success((Object) true); 
}

  • Le code source complet du plugin my_browser est le suivant -

my_browser.dart

import 'dart:async'; 
import 'package:flutter/services.dart'; 

class MyBrowser {
   static const MethodChannel _channel = const MethodChannel('my_browser'); 
   static Future<String> get platformVersion async { 
      final String version = await _channel.invokeMethod('getPlatformVersion'); return version; 
   } 
   Future<void> openBrowser(String urlString) async { 
      try {
         final int result = await _channel.invokeMethod(
            'openBrowser', <String, String>{'url': urlString}); 
      } 
      on PlatformException catch (e) { 
         // Unable to open the browser print(e); 
      }
   }
}

MyBrowserPlugin.java

package com.tutorialspoint.flutterplugins.my_browser; 

import io.flutter.plugin.common.MethodCall; 
import io.flutter.plugin.common.MethodChannel; 
import io.flutter.plugin.common.MethodChannel.MethodCallHandler; 
import io.flutter.plugin.common.MethodChannel.Result; 
import io.flutter.plugin.common.PluginRegistry.Registrar; 
import android.app.Activity; 
import android.content.Intent; 
import android.net.Uri; 
import android.os.Bundle; 

/** MyBrowserPlugin */ 
public class MyBrowserPlugin implements MethodCallHandler {
   private final Registrar mRegistrar; 
   private MyBrowserPlugin(Registrar registrar) { 
      this.mRegistrar = registrar; 
   } 
   /** Plugin registration. */
   public static void registerWith(Registrar registrar) {
      final MethodChannel channel = new MethodChannel(
         registrar.messenger(), "my_browser"); 
      MyBrowserPlugin instance = new MyBrowserPlugin(registrar); 
      channel.setMethodCallHandler(instance); 
   } 
   @Override 
   public void onMethodCall(MethodCall call, Result result) { 
      String url = call.argument("url"); 
      if (call.method.equals("getPlatformVersion")) { 
         result.success("Android " + android.os.Build.VERSION.RELEASE); 
      } 
      else if (call.method.equals("openBrowser")) { 
         openBrowser(call, result, url); 
      } else { 
         result.notImplemented(); 
      } 
   } 
   private void openBrowser(MethodCall call, Result result, String url) { 
      Activity activity = mRegistrar.activity(); 
      if (activity == null) {
         result.error("ACTIVITY_NOT_AVAILABLE",
            "Browser cannot be opened without foreground activity", null); 
         return; 
      }
      Intent intent = new Intent(Intent.ACTION_VIEW); 
      intent.setData(Uri.parse(url)); 
      activity.startActivity(intent); 
      result.success((Object) true); 
   } 
}

  • Créez un nouveau projet, my_browser_plugin_test pour tester notre plugin nouvellement créé.

  • Ouvrez pubspec.yaml et définissez my_browser comme dépendance de plugin.

dependencies: 
   flutter: 
      sdk: flutter 
   my_browser: 
      path: ../my_browser

  • Le studio Android alertera que pubspec.yaml est mis à jour comme indiqué dans l'alerte de package de studio Android donnée ci-dessous -

  • Cliquez sur l'option Obtenir les dépendances. Le studio Android obtiendra le package sur Internet et le configurera correctement pour l'application.

  • Ouvrez main.dart et incluez le plugin my_browser comme ci-dessous -

import 'package:my_browser/my_browser.dart';

  • Appelez la fonction openBrowser à partir du plugin my_browser comme indiqué ci-dessous -

onPressed: () => MyBrowser().openBrowser("https://flutter.dev"),

  • Le code complet du main.dart est le suivant -

import 'package:flutter/material.dart'; 
import 'package:my_browser/my_browser.dart'; 

void main() => runApp(MyApp()); 

class MyApp extends StatelessWidget { 
   @override 
   Widget build(BuildContext context) {
      return MaterialApp( 
         title: 'Flutter Demo', 
         theme: ThemeData( 
            primarySwatch: Colors.blue, 
         ), 
         home: MyHomePage(
            title: 'Flutter Demo Home Page'
         ), 
      );,
   }
} 
class MyHomePage extends StatelessWidget { 
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 
   @override 
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar( 
            title: Text(this.title), 
         ), 
         body: Center(
            child: RaisedButton(
               child: Text('Open Browser'), 
               onPressed: () => MyBrowser().openBrowser("https://flutter.dev"), 
            ),
         ), 
      ); 
   }
}

  • Exécutez l'application et cliquez sur le bouton Ouvrir le navigateur et vérifiez que le navigateur est lancé. Vous pouvez voir une application Navigateur - Page d'accueil comme indiqué dans la capture d'écran ci-dessous -

Vous pouvez voir une application Navigateur - Écran Navigateur comme indiqué dans la capture d'écran ci-dessous -