Flutter - Introduzione al pacchetto

Il modo in cui Dart organizza e condivide un set di funzionalità è tramite Package. Il pacchetto Dart è semplicemente librerie o moduli condivisibili. In generale, il pacchetto Dart è uguale a quello dell'applicazione Dart tranne per il fatto che il pacchetto Dart non ha un punto di ingresso dell'applicazione, principale.

La struttura generale di Package (considera un pacchetto demo, my_demo_package) è la seguente:

• lib/src/* - File di codice Dart privati.

• lib/my_demo_package.dart- File di codice Dart principale. Può essere importato in un'applicazione come:

import 'package:my_demo_package/my_demo_package.dart'

• Un altro file di codice privato può essere esportato nel file di codice principale (my_demo_package.dart), se necessario come mostrato di seguito -

export src/my_private_code.dart

• lib/*- Qualsiasi numero di file di codice Dart disposti in qualsiasi struttura di cartelle personalizzata. È possibile accedere al codice come,

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

• pubspec.yaml - Specifica del progetto, uguale a quella dell'applicazione,

Tutti i file di codice Dart nel pacchetto sono semplicemente classi Dart e non ha alcun requisito speciale per un codice Dart per includerlo in un pacchetto.

Tipi di pacchetti

Poiché i pacchetti Dart sono fondamentalmente una piccola raccolta di funzionalità simili, possono essere classificati in base alla loro funzionalità.

Pacchetto Dart

Codice Dart generico, che può essere utilizzato sia in ambiente web che mobile. Ad esempio, english_words è uno di questi pacchetti che contiene circa 5000 parole e ha funzioni di utilità di base come nomi (elenca nomi in inglese), sillabe (specifica il numero di sillabe in una parola.

Pacchetto Flutter

Codice Dart generico, che dipende dal framework Flutter e può essere utilizzato solo in ambiente mobile. Ad esempio, fluro è un router personalizzato per flutter. Dipende dal framework Flutter.

Plugin Flutter

Codice Dart generico, che dipende dal framework Flutter e dal codice della piattaforma sottostante (SDK Android o SDK iOS). Ad esempio, la fotocamera è un plug-in per interagire con la fotocamera del dispositivo. Dipende dal framework Flutter e dal framework sottostante per ottenere l'accesso alla fotocamera.

Utilizzo di un pacchetto Dart

I pacchetti Dart sono ospitati e pubblicati nel server live, https://pub.dartlang.org.Inoltre, Flutter fornisce un semplice strumento, pub per gestire i pacchetti Dart nell'applicazione. I passaggi necessari per utilizzare come pacchetto sono i seguenti:

• Includere il nome del pacchetto e la versione necessaria in pubspec.yaml come mostrato di seguito -

dependencies: english_words: ^3.1.5

• Il numero di versione più recente può essere trovato controllando il server in linea.

• Installa il pacchetto nell'applicazione utilizzando il seguente comando:

flutter packages get

• Durante lo sviluppo in Android Studio, Android Studio rileva qualsiasi modifica nel pubspec.yaml e visualizza un avviso del pacchetto Android Studio allo sviluppatore come mostrato di seguito:

• I pacchetti Dart possono essere installati o aggiornati in Android Studio utilizzando le opzioni di menu.

• Importa il file necessario utilizzando il comando mostrato di seguito e inizia a lavorare -

import 'package:english_words/english_words.dart';

• Utilizza qualsiasi metodo disponibile nel pacchetto,

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

• Qui abbiamo usato la funzione sostantivi per ottenere e stampare le prime 50 parole.

Sviluppa un pacchetto di plug-in Flutter

Lo sviluppo di un plug-in Flutter è simile allo sviluppo di un'applicazione Dart o di un pacchetto Dart. L'unica eccezione è che il plug-in utilizzerà l'API di sistema (Android o iOS) per ottenere la funzionalità specifica della piattaforma richiesta.

Poiché abbiamo già imparato come accedere al codice della piattaforma nei capitoli precedenti, sviluppiamo un semplice plugin, my_browser per comprendere il processo di sviluppo del plugin. La funzionalità del plugin my_browser è quella di consentire all'applicazione di aprire il sito Web specificato nel browser specifico della piattaforma.

• Avvia Android Studio.

• Clic File → New Flutter Project e seleziona l'opzione Flutter Plugin.

• Puoi vedere una finestra di selezione del plugin Flutter come mostrato qui -

• Immettere my_browser come nome del progetto e fare clic su Avanti.

• Inserisci il nome del plugin e altri dettagli nella finestra come mostrato qui -

• Immettere il dominio dell'azienda, flutterplugins.tutorialspoint.com nella finestra mostrata di seguito e quindi fare clic su Finish. Genererà un codice di avvio per sviluppare il nostro nuovo plugin.

• Apri il file my_browser.dart e scrivi un metodo, openBrowser per richiamare il metodo openBrowser specifico della piattaforma.

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); 
   } 
}

• Apri il file MyBrowserPlugin.java e importa le seguenti classi:

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

• Qui dobbiamo importare la libreria richiesta per aprire un browser da Android.

• Aggiungere una nuova variabile privata mRegistrar di tipo Registrar nella classe MyBrowserPlugin.

private final Registrar mRegistrar;

• Qui, Registrar viene utilizzato per ottenere informazioni sul contesto del codice di richiamo.

• Aggiungi un costruttore per impostare Registrar nella classe MyBrowserPlugin.

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

• Modificare registerWith per includere il nostro nuovo costruttore nella 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); 
}

• Modificare onMethodCall per includere il metodo openBrowser nella 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(); 
   } 
}

• Scrivi il metodo openBrowser specifico della piattaforma per accedere al browser nella 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); 
}

• Il codice sorgente completo del plugin my_browser è il seguente:

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); 
   } 
}

• Crea un nuovo progetto, my_browser_plugin_test per testare il nostro plugin appena creato.

• Apri pubspec.yaml e imposta my_browser come dipendenza del plugin.

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

• Android Studio avviserà che pubspec.yaml è aggiornato come mostrato nell'avviso del pacchetto Android Studio fornito di seguito:

• Fare clic sull'opzione Ottieni dipendenze. Android Studio otterrà il pacchetto da Internet e lo configurerà correttamente per l'applicazione.

• Apri main.dart e includi il plugin my_browser come sotto -

import 'package:my_browser/my_browser.dart';

• Chiama la funzione openBrowser dal plugin my_browser come mostrato di seguito -

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

• Il codice completo del main.dart è il seguente:

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"), 
            ),
         ), 
      ); 
   }
}

• Eseguire l'applicazione e fare clic sul pulsante Apri browser e vedere che il browser viene avviato. Puoi vedere un'app Browser - Home page come mostrato nello screenshot mostrato sotto -

Puoi vedere un'app Browser - Schermata del browser come mostrato nello screenshot mostrato sotto -