Desain UI

Flutter sebagai salah satu framework untuk membangun mobile apps memiliki dua desain tampilan yang berbeda. Hal ini untuk mengakomodir dua sistem tampilan aplikasi perangkat bergerak yang berbeda, yaitu Android dan iOS ( iPhone ). 

Dua sistem UI yang berbeda ini disebut dengan MaterialApp() dan CupertinoApp(). MaterialApp() adalah pondasi dasar dari widget yang akan memiliki gaya ( style ) tampilan untuk UI Android. Sebaliknya, CupertinoApp() akan menampilkan tampilan bergaya iOS.

Hal ini penting dan perlu untuk dipahami oleh mobile dev agar membuat sebuah aplikasi yang sesuai dengan kebutuhan dan pangsa pasar yang akan dituju. Selain karena UI dari kedua sistem ini memiliki perbedaan yang mencolok.

Secara default inisiasi proyek flutter pertama kali akan meng-generate UI untuk Android, yaitu menggunakan gaya MaterialApp(). Developer yang akan membuat proyek iOS tinggal menggantinya menjadi CupertinoApp().

Perhatikan potongan kode yang di blok berikut 

Bila akan membuat proyek iOS, ubah

Mudah bukan ? Inilah salah satu bentuk kemudahan yang diberikan oleh flutter.

Pertanyaan yang sering muncul di kalangan developer yang menggunakan flutter. Apakah fitur yang diberikan sama antara MaterialApp() dan CupertinoApp() ? 

Sejujurnya, penggunaan widget dasar CupertinoApp() tidak selengkap seperti menggunakan MaterialApp(). Terdapat beberapa hal yang perlu dibuat sendiri untuk UI iOS. Kebanyakan fitur yang disertakan dalam bentuk MaterialApp(). 

Penggunaan widget dasar MaterialApp() tidak secara otomatis memaksa pengembang hanya bisa menggunakan widget UI untuk Android, pengembang masih bisa menggunakan dan menajalan widget gaya iOS di dalamnya.

✍🏻 Perbedaan Pengguaan

Perbedaan pada desain sistem kedua ekosistem ini adalah penulisan kode yang pada MaterialApp() ditulis 

Contoh Membuat Button

Android

Sedang di CupertinoApp() menjadi 

Contoh Membuat Button

iOS

Setiap widget / komponen yang akan digunakan untuk ekosistem iOS identitasnya diawali dengan kata Cupertino. Lihat referensi resminya

Hasilnya

Contoh lain dari menampilkan / membuat sebuah Button iOS yang diterapkan penuh di dalam widget CupertinoApp()

Button dalam iOS terlihat bukan seperti tombol, melainkan seperti teks biasa.

Perbedaan penulisan lain, contoh

📱Android - MaterialApp()

1. Scaffold()
2. ElevatedButton()
3. Switch()
4. DatePickerDialog()
5. TextField()

📱iOS - CupertinoApp()

1. CupertinoPageScaffold()
2. CupertinoButton()
3. CupertinoSwitch()
4. CupertinoDatePicker()
5. CupertinoTextField()

✍🏻 Implementasi 

Dalam widget MaterialApp(), baris kode dimulai dengan bentuk penulisan

import 'package:flutter/material.dart';

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      theme: ThemeData(

        colorScheme: .fromSeed(seedColor: Colors.deepPurple),

      ),

      home: const MyHomePage(),

    );

  }

}

class MyHomePage extends StatefulWidget {

  const MyHomePage({super.key});

  @override

  State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text("Widget Demo"),

        backgroundColor: Theme.of(context).colorScheme.inversePrimary,

      ),

      body: Center(

        child: Column(

          mainAxisAlignment: .center,

          children: [

            ElevatedButton(

              onPressed: () {

              },

              child: Text("Android Button!")

            )

          ],

        ),

      ),

    );

  }

}

Hasilnya

Sedangkan dalam CupertinoApp()

import 'package:flutter/cupertino.dart';

void main() => runApp(const PageScaffoldApp());

class PageScaffoldApp extends StatelessWidget {

  const PageScaffoldApp({super.key});

 

  @override

  Widget build(BuildContext context) {

    return const CupertinoApp(

      theme: CupertinoThemeData(brightness: Brightness.light),

      home: PageScaffoldExample(),

    );

  }

}

class PageScaffoldExample extends StatefulWidget {

  const PageScaffoldExample({super.key});

  @override

  State<PageScaffoldExample> createState() => _PageScaffoldExampleState();

}

class _PageScaffoldExampleState extends State<PageScaffoldExample> {

  @override

  Widget build(BuildContext context) {

    return CupertinoPageScaffold(

      navigationBar: const CupertinoNavigationBar(

        middle: Text('CupertinoPageScaffold Sample'),

      ),

      child: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: <Widget>[

            Center(

              child: CupertinoButton(

                onPressed: (){

                },

                child: Text("iOS Button!"),

              ),

            ),

          ],

        ),

      ),

    );

  }

}

Hasilnya

Dengan fungsi yang hampir sama, penamaan dan pemanggilan penggunaan widget berbeda.
Sampai disini dulu artikel terkait materi flutter, semoga bermanfaat! 👋