Tutorial Membuat Aplikasi Flutter Sederhana yang Menampilkan Teks dan Gambar

Flutter adalah sebuah framework open-source yang dikembangkan oleh Google untuk membangun aplikasi mobile (Android dan iOS), web, desktop, dan bahkan embedded systems. Dengan menggunakan Flutter, developer dapat membuat aplikasi yang memiliki tampilan dan performa yang konsisten pada berbagai platform.

Dalam artikel ini, saya akan memberikan tutorial tentang cara membuat aplikasi Flutter sederhana yang menampilkan teks dan gambar.

Persiapan

Sebelum memulai, pastikan Anda telah menginstal Flutter dan Android Studio atau Visual Studio Code pada komputer Anda.

Membuat Project Baru

Pertama-tama, kita perlu membuat project baru dengan menggunakan perintah flutter create myapp di terminal atau command prompt. Kemudian, buka project tersebut di Android Studio atau Visual Studio Code.

Mengubah Tampilan Aplikasi

Kita akan mengubah tampilan default aplikasi Flutter dengan menambahkan teks dan gambar. Buka file main.dart pada folder lib dan ubah kodenya menjadi sebagai berikut:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My Flutter App'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset('assets/flutter-logo.png'),
              Text(
                'Hello, World!',
                style: TextStyle(fontSize: 24),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Pada kode di atas, kita membuat class MyApp yang merupakan subclass dari StatelessWidget. Class MyApp merupakan entry point dari aplikasi kita dan memanggil class MaterialApp yang berisi konfigurasi tampilan dasar aplikasi.

Pada konfigurasi MaterialApp, kita menentukan halaman awal dengan menetapkan home menjadi Scaffold, yang merupakan sebuah widget dasar yang digunakan untuk membangun halaman aplikasi.

Pada Scaffold, kita menetapkan AppBar yang menampilkan judul “My Flutter App”. Pada bagian body, kita menampilkan gambar Flutter logo dan teks “Hello, World!” menggunakan widget Image dan Text.

Menambahkan Gambar

Kita juga perlu menambahkan gambar Flutter logo yang akan ditampilkan pada aplikasi. Untuk itu, buat folder baru bernama assets di root project dan simpan gambar Flutter logo (dalam format png atau jpg) di dalam folder tersebut. Kemudian, tambahkan kode berikut di file pubspec.yaml:

flutter:
  assets:
    - assets/flutter-logo.png

Kode di atas akan memuat gambar Flutter logo ke dalam aplikasi.

Menjalankan Aplikasi

Setelah menambahkan gambar dan mengubah tampilan aplikasi, kita dapat menjalankan aplikasi dengan menggunakan perintah flutter run di terminal atau command prompt. Aplikasi akan dijalankan di emulator atau perangkat yang terhubung dengan komputer Anda.

Kesimpulan

Dalam artikel ini, kita telah membuat aplikasi Flutter sederhana yang menampilkan teks dan gambar. Dalam pengembangan aplikasi selanjutnya, Anda dapat mengembangkan fitur-fitur yang lebih kompleks dengan memanfaatkan berbagai widget dan library yang tersedia di dalam Flutter