Membuat Tampilan Responsive di Flutter: Panduan Lengkap

September 24, 2025
oleh Edusoft Center

DAFTAR ISI

Pendahuluan

Ketika mengembangkan aplikasi mobile, salah satu tantangan terbesar yang sering dihadapi developer adalah konsistensi tampilan (UI) di berbagai perangkat. Tidak semua pengguna memakai smartphone dengan ukuran layar yang sama. Ada yang menggunakan layar kecil, ada pula yang memakai tablet berlayar besar, bahkan sebagian menggunakan perangkat foldable dengan ukuran layar fleksibel.

Bayangkan Anda membuat aplikasi toko online sederhana. Saat dicoba di ponsel 6 inci, tampilannya terlihat pas. Namun, saat dibuka di tablet 11 inci, tampilan menjadi terlalu renggang, tombol terlihat kecil, dan teks terlihat aneh. Situasi ini akan menurunkan pengalaman pengguna (user experience).

Flutter, framework besutan Google, menawarkan solusi cerdas untuk masalah ini. Dengan pendekatan responsive UI, aplikasi dapat menyesuaikan tampilan berdasarkan ukuran layar, orientasi, maupun densitas piksel. Artikel ini akan membahas secara detail bagaimana membuat UI Flutter menjadi responsif, khususnya dengan dua pendekatan utama: MediaQuery dan LayoutBuilder.

1. Apa Itu Responsive UI di Flutter?

Responsive UI adalah pendekatan desain tampilan aplikasi agar elemen-elemen antarmuka dapat menyesuaikan diri terhadap:

Ukuran layar (kecil, sedang, besar).
Orientasi layar (portrait atau landscape).
Densitas piksel (HD, FHD, Quad HD, dst).

Dengan kata lain, UI yang responsif tidak kaku. Widget tidak dipaksa memiliki ukuran tetap, melainkan menyesuaikan dengan ruang yang tersedia.

Contoh:

Tombol login tetap proporsional di HP 5 inci maupun tablet 10 inci.
Grid produk menampilkan 2 kolom di HP, tapi 4 kolom di tablet.

2. Mengapa Responsive UI Penting dalam Pengembangan Aplikasi?

Ada beberapa alasan utama:

Pengalaman pengguna (UX) yang konsisten
Aplikasi terasa rapi dan nyaman meskipun dibuka di perangkat berbeda.
Skalabilitas
Tidak perlu membuat aplikasi khusus untuk HP dan tablet.
Efisiensi waktu
Satu kode bisa berjalan di banyak perangkat tanpa modifikasi besar.
Kualitas aplikasi lebih profesional
Aplikasi responsif biasanya mendapatkan review lebih baik karena lebih mudah digunakan.

3. Tantangan Membuat Aplikasi Multi-Perangkat

Beberapa masalah yang sering muncul:

Ukuran layar yang bervariasi
Mulai dari smartphone mini hingga tablet.
Orientasi layar
Portrait vs landscape membuat tata letak berubah drastis.
Densitas piksel
Layar kecil bisa punya resolusi tinggi, sehingga ukuran relatif lebih penting daripada ukuran absolut.
Perangkat foldable
Layar bisa berubah ukurannya saat dilipat/dibuka.

4. Pendekatan Umum untuk Membuat UI Responsive

Flutter menyediakan beberapa cara, antara lain:

Menggunakan ukuran relatif (persentase layar).
Widget fleksibel seperti Flexible, Expanded, Wrap.
MediaQuery untuk mendapatkan ukuran layar.
LayoutBuilder untuk menyesuaikan tata letak berdasarkan constraints.
OrientationBuilder untuk menyesuaikan tampilan portrait/landscape.
Library pihak ketiga untuk mempermudah scaling.

5. Mengenal MediaQuery

Apa Itu MediaQuery?

MediaQuery digunakan untuk mendapatkan informasi tentang layar perangkat.

Contoh informasi yang bisa didapat:

MediaQuery.of(context).size.width → lebar layar.
MediaQuery.of(context).size.height → tinggi layar.
MediaQuery.of(context).orientation → orientasi layar.
MediaQuery.of(context).devicePixelRatio → kepadatan piksel.

Contoh Implementasi MediaQuery

import 'package:flutter/material.dart';

class MediaQueryExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final screenHeight = MediaQuery.of(context).size.height;

    return Scaffold(
      appBar: AppBar(title: Text("Contoh MediaQuery")),
      body: Center(
        child: Container(
          width: screenWidth * 0.8,
          height: screenHeight * 0.2,
          color: Colors.blue,
          child: Center(
            child: Text(
              "Lebar: $screenWidth, Tinggi: $screenHeight",
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

👉 Dengan ini, ukuran container selalu proporsional.

6. Mengenal LayoutBuilder

Apa Itu LayoutBuilder?

LayoutBuilder adalah widget yang memungkinkan Anda membangun tampilan berdasarkan constraints (batasan ruang).

Studi Kasus LayoutBuilder

import 'package:flutter/material.dart';

class LayoutBuilderExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Contoh LayoutBuilder")),
      body: LayoutBuilder(
        builder: (context, constraints) {
          if (constraints.maxWidth < 600) {
            return Center(child: Text("Tampilan HP"));
          } else {
            return Center(child: Text("Tampilan Tablet"));
          }
        },
      ),
    );
  }
}

👉 Jika lebar < 600 → layout HP, jika ≥ 600 → layout tablet.

7. MediaQuery vs LayoutBuilder

Aspek	MediaQuery	LayoutBuilder
Fungsi	Dapatkan ukuran layar	Bangun UI sesuai constraints
Cocok untuk	Hitung ukuran relatif	Layout berbeda (HP vs tablet)
Kelebihan	Mudah, simpel	Fleksibel, powerful
Kekurangan	Kurang fleksibel untuk layout kompleks	Lebih verbose

8. Implementasi Responsive Text dan Image

Responsive Text

Gunakan FittedBox atau AutoSizeText:

FittedBox(
  child: Text("Teks Responsive", style: TextStyle(fontSize: 30)),
)

Responsive Image

Image.asset(
  "assets/banner.png",
  width: MediaQuery.of(context).size.width * 0.9,
)

9. OrientationBuilder untuk Portrait & Landscape

OrientationBuilder(
  builder: (context, orientation) {
    if (orientation == Orientation.portrait) {
      return Column(children: [Text("Portrait")]);
    } else {
      return Row(children: [Text("Landscape")]);
    }
  },
)

10. Responsive Grid Layout di Flutter

GridView.count(
  crossAxisCount: MediaQuery.of(context).size.width < 600 ? 2 : 4,
  children: List.generate(20, (index) {
    return Card(
      child: Center(child: Text("Item $index")),
    );
  }),
)

👉 HP menampilkan 2 kolom, tablet 4 kolom.

11. Library Pihak Ketiga

1. flutter_screenutil

Memudahkan scaling ukuran font, padding, margin.

2. responsive_builder

Menyediakan widget ScreenTypeLayout untuk layout berbeda di HP, tablet, desktop.

12. Best Practices

Gunakan ukuran relatif (persentase).
Hindari angka statis untuk ukuran widget.
Uji di emulator dengan ukuran layar berbeda.
Gunakan kombinasi MediaQuery + LayoutBuilder.
Pertimbangkan library pihak ketiga jika proyek besar.

13. Kesalahan Umum

Menggunakan ukuran fixed pixel.
Tidak menguji di tablet.
Mengabaikan orientasi landscape.
Font terlalu kecil di layar besar.

14. Cara Menguji Responsive UI

Gunakan emulator dengan resolusi berbeda.
Aktifkan fitur Device Preview di Flutter.
Coba di perangkat fisik (HP + tablet).

15. Kesimpulan

Membuat UI responsive di Flutter adalah hal yang wajib agar aplikasi terlihat rapi di semua perangkat.

Gunakan MediaQuery untuk ukuran relatif.
Gunakan LayoutBuilder untuk layout adaptif.
Tambahkan OrientationBuilder untuk portrait/landscape.
Gunakan grid dan widget fleksibel.
Pertimbangkan library pihak ketiga.

Dengan pemahaman ini, Anda bisa membangun aplikasi Flutter yang fleksibel, scalable, dan profesional.