Cara buat Aplikasi Responsive dan Cross Platfom Flutter

Flutter adalah framework yang memungkinkan untuk membuat aplikasi multi platform namun hanya dalam satu kode base (cross platform). Jadi sangat memungkinkan kita dapat membuat aplikasi dengan tampilan dan layout yang berbeda, jika kamu tahu konsep web responsive, dimana tampilan website akan beradaptasi berdasarkan ukuran screen (layar browser), Flutter juga bisa seperti itu. Tetapi ada salah satu kelebihan flutter lain, aplikasi kamu bisa mempunyai layout yang berbeda tergantung platform mana aplikasi kamu jalankan. Bisa saja aplikasi desktop windows akan berbeda dengan di Mac. Cukup menggunakan satu source code saja, sehingga pengembangan aplikasi lebih cepat.

Demo Implementasi Responsive Flutter

Flutter memungkinkan setiap platform akan berbeda tampilannya, di IOS, di Android, di MacOS, Windows. Coba perhatikan video ini:

Saya buat aplikasi ini dalam satu source code { whatsnako adalah aplikasi chat yang hilarious }, Ketika ukuran dimensi width dibawah 650 tampilan aplikasi menampilkan tabview. Dan ukuran tabview akan nge-pas dengan perangkat mobile. Tipsnya adalah menentukan layout mana yang akan digunakan untuk ukuran width mobile device, lalu aplikasi flutter akan menyesuaikan (responsive) dengan perangkat sebagai host.

Flutter Make Application have different style in multiple platform

Namun layout device minimum rata-rata adalah 360 pixel, apa yang terjadi ketika ukuran lebar layout diturunkan bahkan hingga 100 pixel? teks akan mengisi ruang kosong kebawah sehingga tampilannya jadi jelek. Sebagai developer kamu harusnya bisa mengatisipasi case seperti ini.

Kondisi ini akan menimbulkan masalah layout ketika aplikasi flutter didebug seperti error RenderBox was not laid out. Solusinya dengan melakukan wrapping widget dengan sizedbox dengan ukuran yang fixed.

Sizedbox(
 width: your_fixed_size,
 //
)

Kalau kamu lihat video diatas, ketika ukuran lebar device dibuat minimum, layout akan dibuat “not responsive” tetapi bisa discroll untuk menjangkau daerah layout yang terpotong. Untuk tampilan aplikasi desktop, kamu bisa lihat layout tabview hilang dan diganti dengan desain seperti ini.

Make Flutter Apps Responsive and different in cross-platform

Bagaimana caranya, yuk simak.

Snippet Kode untuk Deteksi Platform Aplikasi Flutter Berjalan, membuat aplikasi flutter bisa cross platform!

Untuk ini kamu bisa gunakan boolean untuk eksekusi Screen widget mana yang akan dipakai pada OS tertentu pada saat projek fluttermu jalan. Contoh yang cukup jelas bisa dilihat di sini. Dan ini adalah kode snippetnya.

if (kIsWeb) {
    doSomething("For Web");
} else {
  if (Platform.isAndroid) {
    doSomething("For Android");
  } else if (Platform.isIOS) {
    doSomething("For IOS");
  } else if (Platform.isLinux) {
    doSomething("For Linux");
  } else if (Platform.isMacOS) {
    doSomething("For Mac");
  } else if (Platform.isWindows) {
    doSomething("For Windows");
  }
}

Platform.isAndroid dan if lainnya akan menghasilkan nilai true dan false. Namun pada snippet kode diatas, akan menjalankan kode didalam statemen if yang mempunyai value true. Misal compiling aplikasi terdeteksi berupa web, maka kisWeb == true sehingga jalankan kode dalam statemen tersebut.

Tutorial Membuat Aplikasi Flutter Responsive

Sederhananya untuk membuat aplikasi flutter responsif adalah dengan membagi layout menjadi beberapa golongan tergantung pada lebar layar device.

Hey nakama koding, untuk kodenya seperti ini:

class ResponsiveHelper {

  static bool isMobilePhone() {
    if (!kIsWeb) {
      return true;
    }else {
      return false;
    }
  }

  static bool isWeb() {
    return kIsWeb;
  }

  static bool isConstraintRange(BoxConstraints constraint, range){
    if (constraint.maxWidth < range) {
      return true;
    }  else{
      return false;
    }
  }

  static bool isMobile(context) {
    final size = MediaQuery.of(context).size.width;
    if (size <= 650 || !kIsWeb) {
      return true;
    } else {
      return false;
    }
  }

  static bool isTab(context) {
    final size = MediaQuery
        .of(context)
        .size
        .width;
    if (size < 1300 && size >= 650) {
      return true;
    } else {
      return false;
    }
  }

  static bool isDesktop(context) {
    final size = MediaQuery
        .of(context)
        .size
        .width;
    if (size >= 1300) {
      return true;
    } else {
      return false;
    }
  }
}

Logika pemrogramannya adalah, memisahkan layout berdasarkan tiga kategori:

Kategori isDesktop: Yaitu jika ukuran presentasi device berada diatas 1300, maka diasumsikan layar desktop
Kategori isTab: Jika ukuran presentasi device berada diantara 650 hingga 1300 maka diasumsikan layar tablet
Kategori isMobile jika presentasi device dibawah 650 pixel maka dianggap layar mobile.

Implementasi Flutter: Penerapan Kode Responsive Helper

Kelas responsive helper ini mempunyai banyak boolean static sehingga fungsi dapat langsung dipanggil dan tidak perlu melakukan inisialisasi. Oke, kita akan menjelaskan bagaimana kode ini diimplementasikan:

Buat terlebih dahulu flutter jika menggunakan command, sintaksnya flutter create --org com.package_name project_name
Buat kode responsive helper (Salin kode diatas)
Lalu buat kelas widget ScreenOptions, tujuannya untuk memilih screen yang akan ditampilkan, terapkan layoutbuilder dalam Widget build(BuildContext context)
Didalam layout builder inilah yang akan mengerjakan logic untuk membangun layout berdasarkan if statement. Buat if logic berdasarkan platfrom sesuai yang kamu mau.
Jika kamu ingin membuat layout yang responsive cukup inisialisasi widget tersebut dalam masing-masing if statement.

Berikut ini adalah contoh penerapannya:

class ScreenOptions extends StatefulWidget {
  final Widget mobileScreenLayout;
  final Widget webScreenLayout;
  final Widget minimalScreenLayout;

  const ScreenOptions(
      {Key? key,
      required this.mobileScreenLayout,
      required this.webScreenLayout, required this.minimalScreenLayout})
      : super(key: key);

  @override
  State<ScreenOptions> createState() => _ScreenOptionsState();
}

class _ScreenOptionsState extends State<ScreenOptions> {

  @override
  void initState() {
    super.initState();
    init();
  }

  init() async {
    //
  }

  @override
  void setState(fn) {
    if (mounted) super.setState(fn);
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      if (ResponsiveHelper.isDesktop(context) || ResponsiveHelper.isTab(context)) {
        return widget.webScreenLayout;
      } else if (constraints.maxWidth <= 360) {
        return widget.minimalScreenLayout;
      }
      else {
        return widget.mobileScreenLayout;
      }
    });
  }
}

Untuk mempermudah kelas mempunyai 3 parameter yang kita namakan webScreenLayout, minimalScreenLayout, mobileScreenLayout.

Penjelasan ScreenOptions, bagaimana Widget menghasilkan layout yang berbeda di tiap platform

webscreenlayout menyimpan parameter layout khusus untuk “browser” jika ukuran presentasi dengan kriteria lebar media diatas 1300 (isDesktop) atau 650 hingga 1300 (isTab).

minimalScreenlayout untuk ukuran lebar aplikasi sama dengan dibawah 360 px.

Jika tidak maka tampilkan screen untuk mobile.

Kita panggil deh ScreenOptions ke dalam alamat routing, maupun body / child widget .

Cara nya seperti ini jika merupakan anak widget:

        body: Container(
          height: context.height(),
            decoration: BoxDecoration(
              color: WhatsNakoColor.sidebarColor,
              border: Border(
                right: BorderSide(
                  color: const Color(0xffcfd0d3).withOpacity(.3)
                )
              )
            ),
            child: ScreenOptions(mobileScreenLayout: YourMobileLayout(), minimalScreenLayout: YourMinimalScreenLayout(), webScreenLayout: YourWebLayout(),)),

Bagaimana dengan routing? caranya persis seperti diatas. Misal kita menggunakan material routing.

InkWell(
                      onPressed: () => Navigator.push(context, ScreenOptions(mobileScreenLayout: YourMobileLayout(), minimalScreenLayout: YourMinimalScreenLayout(), webScreenLayout: YourWebLayout()
child: Container()
                    ),

Tambahan: Solusi untuk layout dengan ukuran layar terlalu kecil menggunakan FLutter

Nah mungkin ada case dimana Constraint Perangkat terlalu kecil, jika memang tidak bisa dibuat layout yang baik, kamu buat saja ukuran layout mu tetap, jadi meskipun layar perangkat lebarnya 250 pixel, aplikasimu akan tetap memiliki ukuran lebar minimal 350 pixel. Drawbacknya tampilan aplikasi akan terpotong karena terlalu besar, untuk ini kamu bisa akali dengan wrap layout dengan Scroll widget, sehingga daerah yang tidak terjangkau layar bisa diakses dengan cara scroll. Berikut ini snippet kode untuk minimalScreenLayout (perhatikan kode yang di highlight).

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

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: SizedBox(
        width: 360,
        child: DefaultTabController(
          length: 3,
          child: Scaffold(
            appBar: AppBar(
              elevation: 0,
              backgroundColor: WhatsNakoColor.appBarColor,
              centerTitle: false,
              title: const Text(
                APPS_NAME,
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.grey,
                  fontWeight: FontWeight.bold,
                ),
              ),
              actions: [
                IconButton(
                  icon: const Icon(Icons.search, color: Colors.grey),
                  onPressed: () {},
                ),
                IconButton(
                  icon: const Icon(Icons.more_vert, color: Colors.grey),
                  onPressed: () {},
                ),
              ],
              bottom: const TabBar(
                indicatorColor: WhatsNakoColor.tabColor,
                indicatorWeight: 4,
                labelColor: WhatsNakoColor.tabColor,
                unselectedLabelColor: Colors.grey,
                labelStyle: TextStyle(
                  fontWeight: FontWeight.bold,
                ),
                tabs: [
                  Tab(
                    text: 'CHATS',
                  ),
                  Tab(
                    text: 'STATUS',
                  ),
                  Tab(
                    text: 'CALLS',
                  ),
                ],
              ),
            ),
            body: Container(
              width: 360,
              decoration: BoxDecoration(
                image: DecorationImage(
                  colorFilter: ColorFilter.mode(
                      WhatsNakoColor.sidebarColor.withOpacity(0.3),
                      BlendMode.dstATop),
                  image: const AssetImage(WhatsNakoImage.bgThanks),
                  fit: BoxFit.cover,
                ),
              ),
              height: double.maxFinite,
              child: const TabBarView(
                children: [
                  ContactListFragment(),
                  ViewStatusFragment(),
                  ViewCallsFragment(),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Oke, mungkin itu saja Tutorial membuat aplikasi responsive menggunakan flutter, semoga bisa menjadi referensi untuk kamu dalam belajar flutter. Tetaplah Nako kawan. Jangan lupa lihat tutorial mobile development juga, mungkin kamu akan tertarik.

Kata kunci: Flutter: Bagaimana jika ukuran layar device terlalu kecil? Membuat aplikasi flutter mempunyai desain yang berbeda di tiap platform