Menggunakan plugin dengan aplikasi web Flutter

Flutter adalah toolkit UI Google untuk membuat aplikasi yang cantik dan dikompilasi secara native dari satu codebase untuk seluler, web, dan desktop. Dalam codelab ini, Anda akan menyelesaikan aplikasi yang melaporkan jumlah bintang di repositori GitHub. Anda akan menggunakan Dart DevTools untuk melakukan proses debug sederhana. Anda akan mempelajari cara menghosting aplikasi di Firebase. Terakhir, Anda akan menggunakan plugin Flutter untuk menjalankan aplikasi dan membuka kebijakan privasi yang dihosting.

Yang akan Anda pelajari

  • Cara menggunakan plugin Flutter di aplikasi web
  • Perbedaan antara paket dan plugin
  • Cara men-debug aplikasi web menggunakan Dart DevTools
  • Cara menghosting aplikasi di Firebase

Prasyarat: Sebelum mempelajari codelab ini, Anda sudah harus memiliki pengetahuan dasar tentang Flutter. Jika Anda baru menggunakan Flutter, sebaiknya mulailah dengan Menulis aplikasi Flutar pertama di web.

Apa yang ingin Anda pelajari dari codelab ini?

Saya baru mengenal topik ini, jadi saya ingin melihat ringkasan yang bagus. Saya sedikit paham soal topik ini, tetapi saya perlu mengingat kembali. Saya sedang mencari kode contoh untuk digunakan dalam project saya. Saya sedang mencari penjelasan tentang sesuatu yang spesifik.

Plugin (disebut juga paket plugin) adalah paket Dart khusus yang berisi API yang ditulis dalam kode Dart yang dikombinasikan dengan satu atau beberapa penerapan khusus platform. Paket plugin dapat ditulis untuk Android (menggunakan Kotlin atau Java), iOS (menggunakan Swift atau Objective-C), web (menggunakan Dart), macOS (menggunakan dart), atau kombinasi dari platform tersebut. (Bahkan, Flutter mendukung plugin gabungan, yang memungkinkan dukungan untuk berbagai platform agar dapat dipecah ke beberapa paket.)

Paket adalah library Dart yang dapat digunakan untuk memperluas atau menyederhanakan fungsionalitas aplikasi Anda. Seperti yang disebutkan sebelumnya, plugin merupakan jenis paket. Untuk informasi selengkapnya tentang paket dan plugin, lihat Plugin Flutter atau Paket Dart?

Anda memerlukan tiga software untuk menyelesaikan lab ini: Flutter SDK, editor, dan browser Chrome. Anda dapat menggunakan editor pilihan Anda, seperti Android Studio atau IntelliJ dengan plugin Flutter dan Dart yang sudah diinstal, atau Visual Studio Code dengan ekstensi Flutter dan Dart Code. Anda akan men-debug kode menggunakan Dart DevTools di Chrome.

Untuk codelab ini, kami menyediakan banyak kode awal sehingga Anda dapat langsung mengerjakan bagian yang menarik.

b2f84ff91b0e1396.pngBuat aplikasi Flutter sederhana yang berbasis template.

Buat project Flutter bernama star_counter dan migrasikan ke keamanan null sebagai berikut.

$ flutter create star_counter
$ cd star_counter
$ dart migrate --apply-changes

b2f84ff91b0e1396.png Perbarui file pubspec.yaml. Perbarui file pubspec.yaml di bagian atas project:

pubspec.yaml

name: star_counter
description: A GitHub Star Counter app
version: 1.0.0+1
environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_markdown: ^0.6.0
  github: ^8.0.0
  intl: ^0.17.0

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

b2f84ff91b0e1396.png Ambil dependensi yang telah diperbarui. Klik tombol Pub get di IDE Anda, atau jalankan flutter pub get dari bagian atas project di command line.

b2f84ff91b0e1396.png Ganti konten lib/main.dart. Hapus semua kode dari lib/main.dart, yang membuat Aplikasi penghitung jumlah tombol yang ditekan bertema materi. Tambahkan kode berikut, yang akan menyiapkan aplikasi penghitung jumlah bintang di repositori GitHub, yang belum selesai:

lib/main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(StarCounterApp());
}

class StarCounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.light,
      ),
      routes: {
        '/': (context) => HomePage(),
      },
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String _repositoryName = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ConstrainedBox(
          constraints: BoxConstraints(maxWidth: 400),
          child: Card(
            child: Padding(
              padding: EdgeInsets.all(16.0),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    'GitHub Star Counter',
                    style: Theme.of(context).textTheme.headline4,
                  ),
                  TextField(
                    decoration: InputDecoration(
                      labelText: 'Enter a GitHub repository',
                      hintText: 'flutter/flutter',
                    ),
                    onSubmitted: (text) {
                      setState(() {
                        _repositoryName = text;
                      });
                    },
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 32.0),
                    child: Text(
                      _repositoryName,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

b2f84ff91b0e1396.pngJalankan aplikasi. Jalankan aplikasi di Chrome. Jika Anda menggunakan IDE, pilih Chrome terlebih dahulu dari menu pull-down perangkat. Jika Anda menggunakan command line, jalankan flutter run -d chrome dari bagian atas paket. (Jika flutter devices menunjukkan bahwa Anda telah mengonfigurasikan web tetapi tidak ada perangkat terhubung lainnya, perintah flutter run akan ditetapkan secara default ke Chrome.)

Chrome dijalankan, dan Anda akan melihat tampilan seperti berikut:

97cb2368f34eb03c.png

Masukkan teks tertentu ke kolom teks, lalu tekan Tampilkan. Teks yang Anda ketik ditampilkan di bagian bawah jendela.

Selanjutnya, Anda memodifikasi aplikasi untuk menampilkan jumlah bintang pada repositori tersebut, bukannya menampilkan teks yang dimasukkan dalam format "google/flutter.widgets".

b2f84ff91b0e1396.pngBuat file baru di lib bernama star_counter.dart:

lib/star_counter.dart

import 'package:flutter/material.dart';
import 'package:github/github.dart';
import 'package:intl/intl.dart' as intl;

class GitHubStarCounter extends StatefulWidget {
  /// The full repository name, e.g. torvalds/linux
  final String repositoryName;

  GitHubStarCounter({
    required this.repositoryName,
  });

  @override
  _GitHubStarCounterState createState() => _GitHubStarCounterState();
}

class _GitHubStarCounterState extends State<GitHubStarCounter> {
  // The GitHub API client
  late GitHub github;

  // The repository information
  Repository? repository;

  // A human-readable error when the repository isn't found.
  String? errorMessage;

  void initState() {
    super.initState();
    github = GitHub();

    fetchRepository();
  }

  void didUpdateWidget(GitHubStarCounter oldWidget) {
    super.didUpdateWidget(oldWidget);

    // When this widget's [repositoryName] changes,
    // load the Repository information.
    if (widget.repositoryName == oldWidget.repositoryName) {
      return;
    }

    fetchRepository();
  }

  Future<void> fetchRepository() async {
    setState(() {
      repository = null;
      errorMessage = null;
    });

    if (widget.repositoryName.isNotEmpty) {
      var repo = await github.repositories
          .getRepository(RepositorySlug.full(widget.repositoryName));
      setState(() {
        repository = repo;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context).textTheme;
    final textStyle = textTheme.headline4?.apply(color: Colors.green);
    final errorStyle = textTheme.bodyText1?.apply(color: Colors.red);
    final numberFormat = intl.NumberFormat.decimalPattern();

    if (errorMessage != null) {
      return Text(errorMessage!, style: errorStyle);
    }

    if (widget.repositoryName.isNotEmpty && repository == null) {
      return Text('loading...');
    }

    if (repository == null) {
      // If no repository is entered, return an empty widget.
      return SizedBox();
    }

    return Text(
      '${numberFormat.format(repository!.stargazersCount)}',
      style: textStyle,
    );
  }
}

cf1e10b838bf60ee.png Pengamatan

  • Penghitung bintang menggunakan paket Dart github untuk membuat kueri GitHub tentang jumlah bintang yang diperoleh repositori.
  • Anda dapat menemukan paket dan plugin di pub.dev.
  • Anda juga dapat mencari dan menelusuri paket untuk platform tertentu. Jika Anda memilih FLUTTER dari halaman landing, pilih WEB di halaman berikutnya. Ini akan menampilkan semua paket yang berjalan di web. Jelajahi halaman paket atau gunakan kotak penelusuran untuk mempersempit hasil.
  • Komunitas Flutter menyumbangkan paket dan plugin ke pub.dev. Jika melihat halaman untuk paket github, Anda akan melihat bahwa paket ini berfungsi untuk semua aplikasi Dart atau Flutter, termasuk WEB.
  • Anda mungkin sangat memperhatikan paket yang ditandai sebagai Flutter Favorites. Program Flutter Favorites mengidentifikasi paket yang memenuhi kriteria tertentu, seperti kelengkapan fitur dan perilaku runtime yang baik.
  • Kemudian, tambahkan plugin dari pub.dev ke contoh ini.

b2f84ff91b0e1396.pngTambahkan import berikut ke main.dart:

lib/main.dart

import 'star_counter.dart';

b2f84ff91b0e1396.png Gunakan widget GitHubStarCounter baru.

Di main.dart, ganti widget Text (baris 60-62) dengan 3 baris baru yang menetapkan GitHubStarCounterWidget:

lib/main.dart

Padding(
  padding: const EdgeInsets.only(top: 32.0),
  child: GitHubStarCounter(              // New
    repositoryName: _repositoryName,     // New
  ),                                     // New
),

b2f84ff91b0e1396.pngJalankan aplikasi.

Lakukan hot restart pada aplikasi dengan mengklik tombol Jalankan lagi di IDE (tanpa menghentikan aplikasi terlebih dahulu), mengklik tombol hot restart 293160db29e53878.png di IDE, atau dengan mengetik r di konsol. Tindakan ini akan mengupdate aplikasi tanpa memuat ulang browser.

Jendela ini terlihat sama seperti sebelumnya. Masukkan repositori yang sudah ada, seperti repositori yang disarankan: flutter/flutter. Jumlah bintang dilaporkan di bawah kolom teks, misalnya:

78a5f531b1acfd58.png

Apakah Anda siap untuk melakukan proses debug? Di aplikasi yang berjalan, masukkan repositori yang tidak ada, seperti foo/bar. Widget akan macet dan menampilkan pesan "Memuat...". Anda akan memperbaikinya sekarang.

b2f84ff91b0e1396.png Jalankan Dart DevTools.

Anda mungkin sudah tidak asing dengan Chrome DevTools, tetapi untuk men-debug aplikasi Flutter, Anda harus menggunakan Dart DevTools. Dart DevTools dirancang untuk men-debug dan membuat profil aplikasi Dart dan Flutter. Ada sejumlah cara untuk menjalankan Dart DevTools, bergantung pada alur kerja Anda. Halaman berikut berisi petunjuk tentang cara menginstal dan menjalankan DevTools:

b2f84ff91b0e1396.png Munculkan debugger.

Halaman browser awal yang Anda lihat saat Dart DevTools dijalankan dapat berbeda, bergantung pada cara Anda menjalankannya. Klik tab Debugger 3d8c8053deda4caa.png untuk memunculkan debugger.

b2f84ff91b0e1396.png Munculkan kode sumber star_counter.dart.

Di kolom teks Library, di sebelah kiri bawah, masukkan "star_counter". Klik dua kali entri package:star_counter/star_counter.dart dari hasil untuk membukanya dalam tampilan File.

b2f84ff91b0e1396.png Tetapkan titik henti sementara.

Temukan baris berikut di sumber: var repo = await github.repositories. Baris tersebut seharusnya ada di baris 52. Klik di sebelah kiri nomor baris, dan sebuah lingkaran akan muncul, yang menunjukkan bahwa Anda telah menetapkan titik henti sementara. Titik henti sementara juga akan muncul dalam daftar Titik henti sementara di sebelah kiri. Di kanan atas, pilih kotak centang Berhenti pada pengecualian. UI-nya akan terlihat seperti berikut:

eeec16d42e7012ba.png

b2f84ff91b0e1396.png Jalankan aplikasi.

Masukkan repositori yang tidak ada, lalu tekan Tampilkan. Di panel error, di bawah panel kode, Anda akan melihat bahwa paket github menampilkan pengecualian "repositori tidak ditemukan":

Error: GitHub Error: Repository Not Found: /
    at Object.throw_ [as throw] (http://localhost:52956/dart_sdk.js:4463:11)
    at http://localhost:52956/packages/github/src/common/xplat_common.dart.lib.js:1351:25
    at github.GitHub.new.request (http://localhost:52956/packages/github/src/common/xplat_common.dart.lib.js:10679:13)
    at request.next (<anonymous>)
    at http://localhost:52956/dart_sdk.js:37175:33
    at _RootZone.runUnary (http://localhost:52956/dart_sdk.js:37029:58)
    at _FutureListener.thenAwait.handleValue (http://localhost:52956/dart_sdk.js:32116:29)
    at handleValueCallback (http://localhost:52956/dart_sdk.js:32663:49)
    at Function._propagateToListeners (http://localhost:52956/dart_sdk.js:32701:17)
    at _Future.new.[_completeWithValue] (http://localhost:52956/dart_sdk.js:32544:23)
    at async._AsyncCallbackEntry.new.callback (http://localhost:52956/dart_sdk.js:32566:35)
    at Object._microtaskLoop (http://localhost:52956/dart_sdk.js:37290:13)
    at _startMicrotaskLoop (http://localhost:52956/dart_sdk.js:37296:13)
    at http://localhost:52956/dart_sdk.js:32918:9

b2f84ff91b0e1396.png Perbaiki error.

Di star_counter.dart, temukan kode berikut (baris 52-58):

if (widget.repositoryName.isNotEmpty) {
  var repo = await github.repositories
      .getRepository(RepositorySlug.full(widget.repositoryName));
  setState(() {
    repository = repo;
  });
}

Ganti kode tersebut dengan kode yang menggunakan pemblokiran try-catch, agar berperilaku lebih lancar dengan memperbaiki error dan menampilkan pesan:

lib/star_counter.dart

if (widget.repositoryName.isNotEmpty) {
  try {
    var repo = await github.repositories
        .getRepository(RepositorySlug.full(widget.repositoryName));
    setState(() {
      repository = repo;
    });
  } on RepositoryNotFound {
    setState(() {
      repository = null;
      errorMessage = '${widget.repositoryName} not found.';
    });
  }
}

b2f84ff91b0e1396.png Lakukan hot restart pada aplikasi.

Di DevTools, kode sumber diperbarui untuk mencerminkan perubahan. Sekali lagi, masukkan repositori yang tidak ada. Anda akan melihat tampilan berikut:

f1b3847ee101a85b.png

f5077295022a18df.pngAnda telah menemukan hal yang istimewa!

Pada langkah ini, Anda akan menambahkan halaman kebijakan privasi ke aplikasi. Pertama-tama, Anda akan menyematkan teks kebijakan privasi di kode Dart.

b2f84ff91b0e1396.png Tambahkan file lib/privacy_policy.dart. Di direktori lib, tambahkan file privacy_policy.dart ke project Anda:

lib/privacy_policy.dart

import 'package:flutter/widgets.dart';
import 'package:flutter_markdown/flutter_markdown.dart';

class PrivacyPolicy extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Markdown(
      data: _privacyPolicyText,
    );
  }
}

// The source for this privacy policy was generated by
// https://app-privacy-policy-generator.firebaseapp.com/
var _privacyPolicyText = '''
## Privacy Policy

Flutter Example Company built the Star Counter app as an Open Source app. This SERVICE is provided by Flutter Example Company at no cost and is intended for use as is.

This page is used to inform visitors regarding our policies with the collection, use, and disclosure of Personal Information if anyone decided to use our Service.

If you choose to use our Service, then you agree to the collection and use of information in relation to this policy. The Personal Information that we collect is used for providing and improving the Service. We will not use or share your information with anyone except as described in this Privacy Policy.

The terms used in this Privacy Policy have the same meanings as in our Terms and Conditions, which is accessible at Star Counter unless otherwise defined in this Privacy Policy.
''';

b2f84ff91b0e1396.pngTambahkan import berikut ke main.dart:

lib/main.dart

import 'privacy_policy.dart';

b2f84ff91b0e1396.pngTambahkan rute (halaman) baru untuk kebijakan privasi.

Setelah baris 17, tambahkan rute untuk halaman kebijakan privasi:

lib/main.dart

routes: {
  '/': (context) => HomePage(),
  '/privacypolicy': (context) => PrivacyPolicy(),  // NEW
},

b2f84ff91b0e1396.pngTambahkan tombol untuk menampilkan kebijakan privasi.

Pada metode build() _HomePageState, tambahkan TextButton ke bagian bawah Column, setelah baris 65:

lib/main.dart

TextButton(
  style: ButtonStyle(
    foregroundColor: MaterialStateProperty.all(Colors.blue),
    overlayColor: MaterialStateProperty.all(Colors.transparent),
  ),
  onPressed: () => Navigator.of(context).pushNamed('/privacypolicy'),
  child: Text('Privacy Policy'),
),

b2f84ff91b0e1396.pngJalankan aplikasi.

Lakukan hot restart pada aplikasi. Sekarang akan terdapat link Kebijakan Privasi di bagian bawah layar:

ae990c7f6e0918e5.png

b2f84ff91b0e1396.png Klik tombol Kebijakan Privasi.

Perlu diketahui bahwa kebijakan privasi akan ditampilkan, dan URL tersebut berubah menjadi /privacypolicy.

c233a1dea9abfaec.png

b2f84ff91b0e1396.pngKembali.

Gunakan tombol Kembali pada browser untuk kembali ke halaman pertama. Perilaku ini bisa Anda dapatkan secara gratis.

Keuntungan dari halaman yang dihosting adalah Anda dapat mengubah halaman tersebut tanpa merilis aplikasi versi baru.

Dari command line, di root project, gunakan petunjuk berikut:

b2f84ff91b0e1396.png Instal Firebase CLI.

b2f84ff91b0e1396.png Login ke Firebase untuk melakukan autentikasi menggunakan firebase login.

b2f84ff91b0e1396.png Lakukan inisialisasi pada project Firebase menggunakan firebase init.

Gunakan nilai berikut:

  • Fitur Firebase yang mana? Hosting
  • Penyiapan project: Buat project baru
  • Apa nama projectnya? [namaanda]-my-flutter-app (harus unik)
  • Apa nama project Anda? Tekan Tampilkan untuk menerima nama default (yang sama dengan nama yang digunakan dalam pertanyaan sebelumnya).
  • Direktori publik apa? build/web (Ini penting.)
  • Konfigurasikan sebagai aplikasi satu halaman? Ya
  • Siapkan build dan deployment otomatis dengan GitHub? Tidak

Pada baris perintah, Anda akan melihat pesan berikut setelah selesai menjalankan firebase init:

55135b9eda3c41ef.png

Setelah menyelesaikan perintah init, file berikut akan ditambahkan ke project Anda:

  • firebase.json, yang merupakan file konfigurasi
  • .firebaserc, yang berisi data project Anda

Pastikan kolom public di firebase.json mencantumkan build/web, misalnya:

firebase.json

{
  "hosting": {
    "public": "build/web",    # This is important!
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

b2f84ff91b0e1396.pngBuat versi rilis aplikasi Anda.

Konfigurasikan IDE Anda untuk membuat versi rilis aplikasi menggunakan salah satu pendekatan berikut:

  • Di Android Studio atau IntelliJ, cantumkan --release di kolom Argumen tambahan pada dialog Jalankan Edit Konfigurasi. Kemudian, jalankan aplikasi Anda.
  • Pada command line, jalankan flutter build web --release.

Konfirmasikan bahwa langkah ini berhasil dengan memeriksa direktori build/web project Anda. Direktori harus berisi sejumlah file, termasuk index.html.

b2f84ff91b0e1396.pngDeploy aplikasi.

Pada command line, jalankan firebase deploy dari bagian atas project untuk men-deploy konten direktori build/web publik. Ini menunjukkan URL tempat hosting, https://project-id>.web.app.

Di browser, buka https://<project-id>.web.app atau https://<project-id>.web.app/#/privacypolicy untuk melihat versi kebijakan privasi yang sedang berjalan.

Selanjutnya, Anda akan menghosting kebijakan privasi sebagai halaman HTML menggunakan Firebase, bukannya menyematkannya di kode Dart.

b2f84ff91b0e1396.pngHapus privacy_policy.dart.

Hapus file dari direktori lib project Anda.

b2f84ff91b0e1396.pngPerbarui main.dart.

Di lib/main.dart, hapus pernyataan impor import privacy_policy.dart dan widget PrivacyPolicyPage di bagian bawah.

b2f84ff91b0e1396.pngTambahkan privacy_policy.html.

Tempatkan file ini di direktori web project Anda.

web/privacy_policy.html

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Privacy Policy</title>
</head>

<body>
<h2 id="privacy-policy">Privacy Policy</h2>
<p>Flutter Example Company built the Star Counter app as an Open Source app. This SERVICE is provided by Flutter Example Company at no cost and is intended for use as is.</p>
<p>This page is used to inform visitors regarding our policies with the collection, use, and disclosure of Personal Information if anyone decided to use our Service.</p>
<p>If you choose to use our Service, then you agree to the collection and use of information in relation to this policy. The Personal Information that we collect is used for providing and improving the Service. We will not use or share your information with anyone except as described in this Privacy Policy.</p>
<p>The terms used in this Privacy Policy have the same meanings as in our Terms and Conditions, which is accessible at Star Counter unless otherwise defined in this Privacy Policy.</p>
</body>
</html>

Selanjutnya, gunakan plugin url_launcher untuk membuka kebijakan privasi di tab baru.

Aplikasi web Flutter merupakan Aplikasi Satu Halaman (SPA). Oleh karena itu, penggunaan mekanisme perutean standar pada contoh web kami akan membuka kebijakan privasi di halaman yang sama. Di sisi lain, plugin peluncur URL membuka tab baru di browser, menjalankan salinan lain dari aplikasi, dan mengarahkan rute aplikasi ke halaman yang dihosting.

b2f84ff91b0e1396.pngTambahkan dependensi.

Dalam file pubspec.yaml, tambahkan dependensi berikut (dan perlu diingat, spasi sangatlah penting dalam file YAML, jadi pastikan barisnya diawali dengan dua spasi):

pubspec.yaml

  url_launcher: ^6.0.0

b2f84ff91b0e1396.png Ambil dependensi baru.

Hentikan aplikasi karena penambahan dependensi mengharuskan agar aplikasi dimulai ulang sepenuhnya. Klik tombol Pub get di IDE Anda, atau jalankan flutter pub get dari bagian atas project di command line.

b2f84ff91b0e1396.pngTambahkan import berikut ke main.dart:

lib/main.dart

import 'package:url_launcher/url_launcher.dart';

b2f84ff91b0e1396.pngPerbarui pengendali TextButton.

Selain itu, di main.dart, ganti kode yang dipanggil saat pengguna menekan tombol Kebijakan Privasi. Kode asli (pada baris 71) menggunakan mekanisme perutean normal Flutter:

onPressed: () => Navigator.of(context).pushNamed('/privacypolicy'),

Kode baru untuk onPressed memanggil paket url_launcher:

lib/main.dart

onPressed: () => launch(
  '/privacy_policy.html',
  enableJavaScript: true,
  enableDomStorage: true,
),

b2f84ff91b0e1396.pngJalankan aplikasi.

Klik tombol Kebijakan Privasi untuk membuka file di tab baru. Keuntungan utama penggunaan paket url_launcher adalah (setelah halaman kebijakan privasi dihosting) paket ini berfungsi di platform seluler dan web. Manfaat lainnya adalah Anda bisa mengubah halaman kebijakan privasi yang dihosting tanpa mengompilasi ulang aplikasi.

Setelah menyelesaikan project, jangan lupa:

b2f84ff91b0e1396.png Hapus project Firebase Anda.

Selamat, Anda berhasil menyelesaikan aplikasi Penghitung Bintang GitHub! Anda juga telah sedikit mencoba Dart DevTools, yang dapat Anda gunakan untuk men-debug dan membuat profil semua aplikasi Dart dan Flutter, bukan hanya aplikasi web.

Apa selanjutnya?

Terus pelajari Flutter: