Flutter and Dart Packages

Dalam mengembangkan aplikasi Flutter, kita tidak perlu membuat segala sesuatunya dari awal, namun kita dapat menggunakan kode-kode program yang dibuat oleh orang lain yang tersedia secara publik. Kode-kode tersebut disebut sebagai Packages. Untuk mendapatkan packages yang dibutuhkan, kita dapat mencarinya di website https://pub.dev/.

Xylophone App

Untuk mempraktekkan penggunaan packages, kita akan membuat aplikasi xylophone. Aplikasi ini akan memiliki 7 buah tombol yang akan mengeluarkan suara saat ditekan. Untuk dapat memainkan suara, kita akan menggunakan packages audioplayers yang dapat digunakan untuk memainkan suara.

New Project

Buat sebuah project baru dan sesuaikan kode main.dart seperti berikut ini.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(),
      ),
    );    
  }
}

Add Package

Buka website https://pub.dev/ dan ketikkan audioplayers pada kolom pencarian. Masuk ke halaman package audioplayers dan perhatikan cara install di tab Installing.

Tambahkan package audioplayers di pubspec.yaml pada bagian dependencies.

dependencies:
  audioplayers: ^6.1.0

Klik tombol Get Packages yang ada di atas kanan untuk mendownload dan menambahkan package audioplayers ke project.

Untuk menggunakan package audioplayers, kita harus mengimpor package tersebut di kode. Tambahkan

import 'package:audioplayers/audioplayers.dart';

di bagian atas main.dart.

Add Sounds to Project

Buat folder assets dan tambahkan file audio berikut ini.

File Audio

Tambahkan folder assets kedalam pubspec.yaml.

assets:
  - assets/

Play Audio

Tambahkan sebuah ElevatedButton kedalam aplikasi dan buat objek player yang merupakan instance dari class AudioPlayer. Untuk memainkan audio, gunakan fungsi play dari objek player.

ElevatedButton(
  onPressed: () async {
    final player = AudioPlayer();
    await player.play(AssetSource('note1.wav'));
  },
  child: null,
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.red,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(0),
    ),
  ),
)

Alternative Package

Jika package audioplayers tidak dapat digunakan, misalkan error atau tidak ada suaranya, maka bisa menggunakan package just_audio.

Tambahkan package audioplayers di pubspec.yaml pada bagian dependencies kemudian save.

dependencies:
  just_audio: ^0.9.41

Import just_audio di main.dart.

import 'package:just_audio/just_audio.dart';

Ubah kode pada ElevatedButton.

ElevatedButton(
  onPressed: () async {
    final player = AudioPlayer();
    await player.setAsset(note);
    player.play();
  },
  child: null,
  style: ElevatedButton.styleFrom(
    primary: Colors.red,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(0),
    ),
  ),
)

Chalenge

• Lanjutkan aplikasi sampai memiliki tampilan seperti diatas dan dapat mengeluarkan suara note1 - note7.
• Buat fungsi untuk membuat tombol, sehingga tidak terjadi pengulangan kode.

Basic Audio Player

Kita akan membuat aplikasi pemutar musik sederhana seperti berikut ini

// Import library utama Flutter
import 'package:flutter/material.dart';

// Import library untuk memainkan audio
import 'package:audioplayers/audioplayers.dart';

void main() {
  // Fungsi utama yang menjalankan aplikasi Flutter
  runApp(const MyApp());
}

// Widget utama aplikasi
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // MaterialApp berfungsi untuk membuat struktur dasar aplikasi
    return const MaterialApp(
      title: 'Basic Audio Player',
      home: AudioPlayerPage(), // Halaman utama aplikasi
    );
  }
}

// Halaman utama dengan kontrol audio
class AudioPlayerPage extends StatefulWidget {
  const AudioPlayerPage({super.key});

  @override
  State<AudioPlayerPage> createState() => _AudioPlayerPageState();
}

class _AudioPlayerPageState extends State<AudioPlayerPage> {
  // Membuat objek AudioPlayer dari package audioplayers
  final player = AudioPlayer();

  // Variabel untuk menyimpan status apakah audio sedang diputar
  bool isPlaying = false;

  // Ganti dengan link audio Anda
  final url =
      'https://raw.githubusercontent.com/yest/data/refs/heads/main/decode.mp3';

  @override
  void dispose() {
    // Method dispose dipanggil saat widget dihapus
    // Tujuannya agar resource audio player dibersihkan
    player.dispose();
    super.dispose();
  }

  // Fungsi untuk memutar dan menghentikan audio
  void togglePlayPause() async {
    if (isPlaying) {
      // Jika sedang memutar audio, maka jeda (pause)
      await player.pause();
    } else {
      // Jika belum memutar, maka mulai memutar dari URL
      await player.play(UrlSource(url));
    }

    // Perbarui tampilan tombol (Play ↔ Pause)
    setState(() {
      isPlaying = !isPlaying;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // AppBar untuk judul aplikasi
      appBar: AppBar(title: const Text('Basic Audio Player')),

      // Isi utama aplikasi
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Ikon musik, berubah sesuai status audio
            Icon(
              isPlaying ? Icons.music_note : Icons.music_off,
              size: 80,
              color: Colors.blueAccent,
            ),

            const SizedBox(height: 20),

            // Tombol Play/Pause
            ElevatedButton.icon(
              // Ganti ikon sesuai status audio
              icon: Icon(isPlaying ? Icons.pause : Icons.play_arrow),

              // Ganti teks sesuai status
              label: Text(isPlaying ? 'Pause' : 'Play'),

              // Saat tombol ditekan, jalankan fungsi togglePlayPause
              onPressed: togglePlayPause,

              // Desain tombol
              style: ElevatedButton.styleFrom(
                padding:
                    const EdgeInsets.symmetric(horizontal: 30, vertical: 15),
              ),
            ),
          ],
        ),
      ),
    );
  }
}