Flutter adalah framework pengembangan UI open-source yang dibikin oleh Google. Ini terlalu mungkin pengembang untuk membawa dampak aplikasi native cross-platform bersama dengan cepat dan efisien.

Di sisi lain, Gemini AI sedia kan kebolehan kecerdasan buatan yang mampu menaikkan interaktivitas dan faedah aplikasi Anda. Dengan menggabungkan kebolehan keduanya, Anda bakal mampu menciptakan aplikasi Pokedex yang tidak cuma menampilkan Info lengkap mengenai beraneka Pokémon, tapi termasuk mengimbuhkan pengalaman pengguna yang menyenangkan dan inovatif.

Dalam tutorial ini, kami bakal mengupas cara demi cara sistem pengembangan aplikasi Pokedex, terasa dari persiapan awal, desain antarmuka pengguna, integrasi Gemini AI, hingga bagian pengujian. Tujuan dari artikel ini adalah untuk mengimbuhkan anjuran komprehensif yang mampu diikuti oleh pemula sekalipun.

Dengan begitu, Anda bakal mampu menyadari dasar-dasar Flutter dan Gemini AI, serta menggunakannya untuk menciptakan aplikasi yang fungsional dan menarik. Mari kami terasa petualangan koding ini dan lihat Flutter serta Gemini AI mampu bekerja serupa untuk membawa ide Anda jadi kenyataan!

Persiapan Tools

Sebelum terasa membangun aplikasi Pokedex bersama dengan manfaatkan teknologi Gemini AI, Anda kudu buat persiapan beberapa perihal berikut.

Flutter SDK

Unduh Flutter SDK cocok bersama dengan perangkat yang kamu manfaatkan dari website resmi Flutter.

Integrated Development Environment (IDE)

Visual Studio Code atau Android Studio yang cocok bersama dengan Flutter.

Emulator Android atau Simulator iOS

Anda termasuk kudu buat persiapan emulator Android atau simulator iOS cocok bersama dengan preferensi, ya! Jika virtual device tidak memungkinkan, Anda mampu manfaatkan real device.

Gemini AI API key

Anda mampu dapatkan API key di AI Studio by Google.

Mendesain Fitur Aplikasi Pokedex

Mendesain fitur adalah cara urgent di dalam meyakinkan aplikasi tidak cuma fungsional, tapi termasuk menarik bagi pengguna. Dalam pengembangan aplikasi ini, kami fokus terhadap dua daerah utama: halaman utama untuk navigasi dan tampilan awal, serta halaman teliti untuk Info mendalam mengenai tiap-tiap Pokémon.

Konsultasikan dengan ahlinya sekarang: Ade prasetyo

Berikut adalah rencana untuk halaman utama dan halaman teliti yang bakal kami implementasikan di dalam aplikasi Pokedex.

membuat aplikasi pokedexmembuat aplikasi pokedex

Inisialisasi Proyek

Memulai sebuah proyek aplikasi Pokedex bersama dengan Flutter melibatkan beberapa tahapan inisialisasi yang penting, termasuk pengaturan awal, penambahan library yang dibutuhkan, dan setup file konfigurasi, layaknya env.json.

Init Project Flutter

Langkah pertama adalah menginisialisasi proyek Flutter baru. Buka terminal atau cmd terhadap folder cocok bersama dengan keinginan, lalu lakukan perintah berikut.

flutter create pokedex

cd pokedex

Perintah “flutter create” bakal membawa dampak susunan basic proyek Flutter di di dalam folder pokedex. Setelah itu, pindah ke direktori proyek bersama dengan “cd pokedex”.

Penambahan Library yang Dibutuhkan

Selanjutnya, tambahkan library atau package yang dibutuhkan untuk mengimplementasikan fitur-fitur di dalam aplikasi Pokedex. Berikut adalah contoh penambahan beberapa library lazim yang bakal digunakan terhadap file pubspec.yaml.

#pubspec.yaml

dependencies:  cupertino_icons: ^1.0.6  dartz: ^0.10.1  dio: ^5.3.3equatable: ^2.0.5flutter:

sdk: flutter

flutter_gemini: ^2.0.4

go_router: ^14.2.0

google_fonts: ^6.1.0

image_picker: ^1.1.2

provider: ^6.0.5

Setelah mengimbuhkan library baru di pubspec.yaml, lakukan perintah “flutter pub get” untuk mengunduh dan menginstal library berikut di dalam proyek Flutter.

Setup env.json

Untuk mengelola konfigurasi, layaknya URL endpoint API, kunci API, atau variabel-variabel environment lainnya, buatlah file env.json di dalam proyek Flutter. Berikut adalah contoh susunan basic env.json.

# env.json

{

    “API_KEY”: “YOUR_APIKEY”,

    “BASE_URL”: “https://pokeapi.co/api/v2”

}

Pastikan untuk mengimbuhkan env.json di dalam file .gitignore kalau Anda mengelola proyek manfaatkan Git, untuk melindungi kerahasiaan Info sensitif, layaknya kunci API.

Setelah membawa dampak file env.json, kami termasuk kudu membawa dampak sebuah abstract class sebagai penampung variabel dari env file. Mari kami bikin file class AppConfig sebagai berikut.

# app_config.dart

abstract class AppConfig {

  static const String apiKey = String.fromEnvironment(‘API_KEY’);

  static const String baseUrl = String.fromEnvironment(‘BASE_URL’);

  static const String baseUrlSvgImages =

      ‘https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/’;

  static const String baseUrlPngImages =

      ‘https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/’;

  static const String baseUrlGifImages =

      ‘https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-v/black-white/animated/’;

}

Dengan lakukan inisialisasi proyek ini secara benar, Anda siap untuk melanjutkan ke bagian selanjutnya di dalam pengembangan aplikasi Pokedex manfaatkan Flutter. Pastikan terus-menerus di dalam mengimbuhkan library dan mengelola konfigurasi proyek untuk memudahkan pengembangan selanjutnya.

Pembuatan Aplikasi Pokedex

Setelah berhasil lakukan setup awal proyek Flutter, cara setelah itu adalah mengawali pembangunan aplikasi Pokedex bersama dengan mengimplementasikan fitur-fitur utama. Berikut adalah langkah-langkah yang kudu dilakukan untuk mengawali pembuatan aplikasi.

Pengembangan Antarmuka Pengguna (UI)

Pengembangan antarmuka pengguna (UI) aplikasi Pokedex mengikuti desain yang udah direncanakan sebelumnya untuk meyakinkan kedisiplinan dan kejelasan visual.

Halaman utama dirancang bersama dengan manfaatkan Scaffold sebagai kerangka antarmuka pengguna dan manfaatkan widget lain, layaknya Container, Stack, Positioned, dan beberapa widget lainnya. Tombol pencarian bakal meminta gemini AI untuk mendeteksi gambar Pokémon yang dipilih oleh pengguna dan menampilkan card hasil pencarian.

Halaman utama pokedex

Halaman teliti Pokémon dirancang bersama dengan layout yang terstruktur, manfaatkan widget Container, Column, dan Row untuk menampilkan Info teliti secara informatif. Setiap halaman teliti Pokémon menampilkan gambar besar, nama lengkap, jenis, dan statistik Pokémon bersama dengan tata letak yang estetis.

Halaman teliti Pokedex

Implementasi Fitur-Fitur Utama

Setelah antarmuka pengguna (UI) aplikasi Pokedex dibikin cocok bersama dengan desain yang udah direncanakan, cara setelah itu adalah menghubungkan tiap-tiap elemen UI bersama dengan logika aplikasi manfaatkan class model, view type bersama dengan Provider, serta menyesuaikan navigasi bersama dengan Go Router.

Pada bagian ini, kami bakal membawa dampak class type untuk Pokémon dan detailnya. Berikut adalah penulisan kode untuk type Pokémon yang kami butuhkan.

​​class Pokemon {

  final String name;

  final String url;

  final String color;

  final ColorScheme? colorScheme;

  String get imageUrl => “$AppConfig.baseUrlPngImages$id.png”;

  String get gifUrl => “$AppConfig.baseUrlGifImages$id.gif”;

  String get svgUrl => “$AppConfig.baseUrlSvgImages$id.svg”;

  String get id => url.split(‘/’).where((element) => element.isNotEmpty).last;

  Pokemon({

    required this.name,

    required this.url,

    this.color = “”,

    this.colorScheme = const ColorScheme.dark(),

  });

  Pokemon copyWith({

    String? name,

    String? url,

    String? color,

    ColorScheme? colorScheme,

  }) {

    return Pokemon(

      name: name ?? this.name,

      url: url ?? this.url,

      color: color ?? this.color,

      colorScheme: colorScheme ?? this.colorScheme,

    );

  }

  factory Pokemon.fromJson(Map<String, dynamic> json) => Pokemon(

        name: json[“name”],

        url: json[“url”],

      );

  Map<String, dynamic> toJson() => {

        “name”: name,

        “url”: url,

      };

}

class DetailPokemon {

  final List<Ability> abilities;

  final int baseExperience;

  final List<Species> forms;

  final int height;

  final int id;

  final bool isDefault;

  final String locationAreaEncounters;

  final List<Move> moves;

  final String name;

  final int order;

  final Species species;

  final List<Stat> stats;

  final List<Type> types;

  final List<Pokemon> evolutionChain;

  final PokemonSpecies? pokemonSpecies;

  final int weight;

  String get idEvolution =>

      species.url.split(‘/’).where((element) => element.isNotEmpty).last;

  String get idSpecies =>

      species.url.split(‘/’).where((element) => element.isNotEmpty).last;

  String get imageUrl => “$AppConfig.baseUrlPngImages$id.png”;

  String get gifUrl => “$AppConfig.baseUrlGifImages$id.gif”;

  String get svgUrl => “$AppConfig.baseUrlSvgImages$id.svg”;

By Bilal