oleh Ashita Prasad ( LinkedIn , Twitter ), fluttergems.dev

Ini adalah artikel kedua dalam seri artikel mendalam “Mastering Dart & Flutter DevTools” . Dalam artikel ini, Anda akan mempelajari Flutter Inspector DevTools melalui contoh studi kasus aplikasi. Jika Anda ingin melihat artikel lain dalam seri ini, cukup klik tautan yang disediakan di bawah ini:

• Bagian 1: Pendahuluan & Instalasi
• Bagian 2: Inspektur Flutter [Anda di Sini]
• Bagian 3: Alat Ukuran Aplikasi
• Bagian 4: Tampilan Jaringan
• Bagian 5: Tampilan Logging
• Bagian 6: Tampilan Profiler CPU
• Bagian 7: Tampilan Memori
• Bagian 8: Tampilan Kinerja

Karena aplikasi seluler tumbuh dengan sangat cepat (~6k aplikasi dirilis per hari di Apple dan Google Play Store digabungkan), ada persaingan sengit untuk menarik perhatian dan retensi pengguna. Antarmuka pengguna (UI) aplikasi memainkan peran penting dalam keseluruhan pengalaman pengguna yang penting untuk mempertahankan pengguna. UI yang dirancang dengan baik dapat membuat aplikasi lebih intuitif dan mudah digunakan, sementara UI yang dirancang dengan buruk dapat membuat aplikasi yang paling kuat sekalipun menjadi sulit dan membuat frustrasi untuk digunakan. UI yang baik juga dapat membantu membedakan aplikasi Anda dari yang lain di pasar dan membuatnya lebih menarik bagi pengguna. Oleh karena itu, UI yang dirancang dengan baik sangat penting untuk kesuksesan aplikasi apa pun.

Di Flutter, Anda dapat mendesain dan membangun Antarmuka Pengguna (UI) yang indah melalui penggunaan widget. Untuk membuat tata letak di Flutter, Anda bisa menggunakan kombinasi widget ini untuk membuat struktur dan tampilan antarmuka pengguna aplikasi Anda. Namun, apa yang terjadi jika tata letak aplikasi Anda bermasalah dan UI tidak cocok dengan desain yang diinginkan?

Di sinilah Flutter Inspector datang untuk menyelamatkan kita. Ini dapat digunakan untuk memahami tata letak yang ada serta mendiagnosis masalah tata letak apa pun yang mungkin ada di aplikasi. Dan bagian terbaiknya adalah debugging visual Tata Letak dapat dilakukan dengan cepat.

Tujuan dari artikel ini adalah untuk memandu Anda melalui alat Flutter Inspector yang dapat digunakan untuk men-debug masalah tata letak apa pun dan memahaminya dengan lebih baik menggunakan aplikasi contoh kehidupan nyata.

Inspektur Flutter

Flutter Inspector adalah alat yang dapat digunakan untuk memeriksa pohon widget aplikasi Flutter. Dengan menggunakan alat ini, Anda dapat dengan mudah memvisualisasikan dan memeriksa tata letak, ukuran, dan properti visual dari widget yang menyusun UI aplikasi. Alat ini juga dapat digunakan untuk mengidentifikasi masalah kinerja, melakukan debugging visual aplikasi, dan memberikan informasi mendetail tentang widget.

Untuk lebih memahami bagaimana Anda dapat memanfaatkan alat Flutter Inspector, mari kita lihat latihan studi kasus. Dalam latihan ini, kita akan mulai dengan tata letak UI di sebelah kiri, seperti yang ditunjukkan pada gambar di bawah. Tujuan kami adalah mengidentifikasi masalah di UI dan men-debugnya secara visual menggunakan Flutter Inspector. Setelah menyelesaikan semua masalah UI secara visual, kami akan membuat perubahan kode yang diperlukan dan mengubah tata letak menjadi UI yang diinginkan (layar kanan).

Sekarang, mari kita mulai dengan studi kasus.

Langkah 1: Mendapatkan Kode Sumber

Buat salinan lokal dari repositori di bawah ini

Buka repo di GitHub seperti yang ditunjukkan di bawah ini.

Klik tombol hijau <> Code, lalu kunjungi Localtab dan klik Download ZIPuntuk mengunduh kode sumber untuk latihan ini.

Ekstrak file menggunakan alat unzip apa pun.

Kami sekarang memiliki salinan lokal dari sumber di folder flutter_inspector_demo-master.

Langkah 2: Membuka Proyek di VS Code

Luncurkan VS Code, buka folder proyek di VS Code dan buka pubspec.yamlfile.

Klik Get Packagesuntuk mengambil semua paket yang diperlukan untuk proyek.

Langkah 3: Meluncurkan Flutter Inspector di VS Code

Sebelum kita meluncurkan Flutter Inspector, kita harus menjalankan aplikasinya.

Klik No Devicedi bilah status dan pilih perangkat target. Jika perangkat default sudah dipilih, Anda dapat mengkliknya dan mengubah perangkat target.

Kami akan melanjutkan dan memilih emulator android sebagai perangkat target.

Sekarang, klik Rununtuk menjalankan aplikasi (fungsi utama) seperti yang ditunjukkan pada gambar di bawah.

Flutter Inspector dapat diluncurkan menggunakan petunjuk berikut:

Click Dart DevTools in status bar > 
Click Open DevTools in Web Browser > Click Flutter Inspector tab

      
                

                    
                    
                
            

Jendela Flutter Inspector memiliki tiga bagian utama:

1. Toolbar
2. Panel Pohon Widget
3. Layout Explorer/Widget Detail Tree Pane

1. Bilah Alat Inspektur Flutter

Toolbar Flutter Inspector menyediakan fitur yang membantu dalam men-debug masalah tata letak secara visual. Untuk mengaktifkan fitur apa pun, Anda hanya perlu menekan tombol yang sesuai di bilah alat. Fitur yang tersedia adalah:

• Pilih Mode Widget — Widget dapat dipilih di Panel Pohon Widget interaktif untuk memeriksa propertinya. Tapi, ini bisa merepotkan jika pohon widgetnya dalam. Mengaktifkan mode ini memungkinkan pengguna memilih widget langsung di UI aplikasi, sehingga dapat diperiksa lebih lanjut.
• Animasi lambat — Saat animasi lambat diaktifkan, semua animasi berjalan 5 kali lebih lambat sehingga memudahkan inspeksi visual. Ini berguna untuk mengamati dan mengutak-atik animasi apa pun yang mungkin tidak terlihat sepenuhnya benar.
• Tampilkan panduan — Saat fitur ini diaktifkan, panduan digambar di aplikasi yang menampilkan kotak render, perataan, bantalan, tampilan gulir, kliping, dan pengatur jarak. Alat ini dapat digunakan untuk lebih memahami dan memodifikasi tata letak seperti menyelaraskan widget dengan lebih baik atau menghapus padding yang tidak diinginkan.
• Tampilkan garis dasar — ​​Alat ini berguna untuk memeriksa perataan teks secara visual menggunakan garis dasar yang merupakan garis horizontal yang digunakan untuk memposisikan teks. Memilih opsi ini akan membuat semua garis dasar terlihat, memungkinkan Anda memeriksa perataan vertikal teks dengan tepat.
• Sorot pengecatan ulang — Alat ini berguna untuk menyorot widget yang sering dicat ulang, yang dapat menghambat kinerja aplikasi. Setiap kali sebuah kotak dicat ulang, sebuah garis tepi digambar di sekelilingnya dengan warna pelangi yang berputar.
• Sorot gambar berukuran besar — ​​Seperti namanya, alat ini menyoroti gambar beresolusi tinggi yang menggunakan terlalu banyak memori dengan membalikkan warna dan membalikkannya. Memperbaiki gambar-gambar ini penting karena dapat menyebabkan kinerja yang buruk, terutama pada perangkat kelas bawah dan jika Anda memiliki banyak gambar di layar seperti di GridView atau ListView.

Di Flutter, setiap bagian UI yang dirender di layar adalah widget. Tata letak antarmuka pengguna aplikasi Flutter terdiri dari hierarki widget yang lebih dikenal sebagai pohon widget. Pohon itu terdiri dari widget individual, yang masing-masing memiliki properti dan widget turunannya sendiri. Struktur hierarki ini adalah alasan utama mengapa Flutter mampu menyusun dan merender antarmuka pengguna secara efisien. Panel Pohon Widget berguna untuk melihat pohon widget ini dan dapat digunakan untuk memilih widget apa pun di pohon untuk memeriksa lebih lanjut tata letak dan propertinya.

3. Layout Explorer/Widget Detail Tree Pane

Setiap kali widget fleksibel ( Row, Column, Flex) atau anak mana pun dari widget fleksibel dipilih di Panel Pohon Widget, tata letaknya dapat divisualisasikan di Layout Explorer (ditampilkan di atas). Tampilan ini juga menyediakan berbagai alat yang dapat digunakan untuk mengubah tata letak yang ada secara visual. Untuk mendapatkan tampilan yang lebih rinci dari semua properti dan nilai widget yang dipilih, Anda dapat mengklik Tab Pohon Detail Widget seperti yang ditunjukkan di bawah ini.

Setelah mengenal antarmuka (anatomi) Halaman Flutter Inspector, mari kita lanjutkan ke studi kasus.

Studi kasus

Tujuan kita adalah menggunakan Flutter Inspector untuk men-debug masalah tata letak secara visual di aplikasi contoh sehingga kita bisa mendapatkan UI yang diinginkan.

Melihat kedua UI tersebut, kami dapat mengidentifikasi 4 masalah utama dalam tata letak:

• Masalah Tata Letak #1 — Teks meluap di baris pertama.
• Masalah Tata Letak #2 — Emoji tidak ditempatkan dengan baik dan tidak berada di tengah ruang vertikal tersisa yang tersedia di halaman.
• Masalah Tata Letak #3 — Pemisah horizontal tidak ada.
• Masalah Tata Letak #4 — Tombol kirim tidak rata tengah.

Masalah Tata Letak #1

Masalah pertama yang perlu kita selesaikan di UI kita adalah teks yang meluap.

Saat meluncurkan Flutter Inspector, kita bisa melihat Error 1/1di Widget Tree Panel.

Klik pada Tombol Bawah seperti yang ditunjukkan pada gambar di bawah untuk menavigasi ke widget penyebab kesalahan. Kesalahan yang ditemui adalah ‘A RenderFlex overflowed by...’kesalahan, yang merupakan salah satu kesalahan yang paling sering terjadi. Anda dapat melihat garis-garis kuning & hitam yang menunjukkan area luapan di UI aplikasi dan Layout Explorer.

Seperti yang ditunjukkan pada gambar di bawah, alasan kesalahan ini adalah karena widget anak Texttidak dibatasi ukurannya dan mencoba untuk menjadi lebih lebar ( by 237 pixels) dari lebar yang diizinkan oleh induknya ( Row).

Seperti yang ditunjukkan pada gambar di bawah, kita dapat men-debug masalah ini langsung dari Layout Explorer dengan menyetel flexwidget Textsebagai 1. Dengan cara ini kita memberi tahu Textwidget bahwa widget hanya dapat diperluas hingga mengisi ruang yang tersedia di sepanjang sumbu utama widget Rowwidget.

Voila! Masalahnya sekarang sudah diperbaiki.

Tapi, tunggu sebentar. Jika Anda melanjutkan dan memulai ulang aplikasi, masalahnya kembali menghantui kami.

Ini karena memperbaiki masalah apa pun secara visual menggunakan Layout Explore tidak permanen karena tidak ada perubahan kode yang dilakukan. Ini adalah alat debugging visual yang dapat digunakan untuk bermain-main dan mengidentifikasi solusi yang tepat. Setelah sampai pada solusi, Anda sekarang harus melakukan perubahan kode yang diperlukan untuk mempertahankan solusi.

Mari kita lanjutkan dan modifikasi kode Soal #1 yang ada di bawah ini

// Problem #1
Row(
  children: const [
    Text(
      'Please provide your valuable feedback by sharing your experience with us!',
      style: TextStyle(
        fontSize: 18.0,
      ),
    ),
  ],
),

Kode yang dimodifikasi diberikan di bawah ini:

// Problem #1
Row(
  children: const [
    Expanded(
      child: Text(
        'Please provide your valuable feedback by sharing your experience with us!',
        style: TextStyle(
          fontSize: 18.0,
        ),
      ),
    ),
  ],
),

Setelah memperbaiki masalah tata letak pertama, UI aplikasi kami terlihat sebagai berikut.

Masalah Tata Letak #2

Masalah selanjutnya yang perlu kita perbaiki adalah tata letak emoji.

Seperti yang ditunjukkan pada gambar di atas, emoji harus berada di tengah ruang vertikal yang tersisa. Selain itu, emoji harus diberi jarak yang sama.

Sebelum melangkah lebih jauh, mari kita lanjutkan dan aktifkan Show Guidelinesmode dari toolbar seperti yang ditunjukkan pada gambar di bawah. Panduan ini akan membantu kami men-debug tata letak dengan lebih baik secara visual.

Mari kita mulai dengan membuat jarak yang rata di antara emoji.

Seperti yang ditunjukkan pada gambar di atas, klik Rowwidget di pohon widget yang berisi Emojiwidget. Di Layout Explorer, widget di dalam Rowsaat ini disejajarkan startdengan sumbu utama. Klik pada dropdown dan pilih perataan sebagai spaceEvenly. Sekarang Anda dapat mengamati bahwa Emojiwidget ditempatkan secara merata seperti yang kita inginkan.

Selanjutnya, kami ingin memperluas Rowemoji yang berisi ini untuk menempati seluruh ruang vertikal yang tersisa.

Seperti yang terlihat di Widget Tree Pane pada gambar di atas, widget Rowyang memuatnya Emojiadalah anak kedua dari Column. Lanjutkan dan klik Columnwidget induk dan gulir ke bawah untuk menemukannya Rowdi penjelajah tata letak. Sekarang, atur flexini Rowsebagai 1. Karena induknya Rowadalah a Column, sumbu utamanya berada di sepanjang arah vertikal. Jadi pengaturan flexas 1memberitahu ini Rowbahwa itu dapat berkembang secara vertikal selama Columnizinnya.

Meskipun kami dapat memperluas baris emoji secara vertikal, tetap saja emoji tidak berada di tengah seperti yang diinginkan. Ini karena setiap Emojiwidget Columnberisi emoji Textdan label Textsebagai anaknya. Saat baris melebar secara vertikal, kolom juga melebar, seperti yang dapat dilihat melalui panduan. Namun, anak-anak ini disejajarkan dengan awal sumbu utama Columnwidget, sehingga posisinya tidak berubah. Seperti yang ditunjukkan pada gambar di bawah, kita dapat mengubah perataannya melalui Layout Explorer. Klik Columnwidget di dalam setiap Emojiwidget dan ubah perataan sumbu utama menjadi center.

Karena ini adalah solusi yang diperlukan, mari kita lanjutkan dan buat perubahan kode yang diperlukan.

class Emoji extends StatelessWidget {
  ....

  @override
  Widget build(BuildContext context) {
    return Column(
      
      // Add this line to align Emoji & Text to center
      mainAxisAlignment: MainAxisAlignment.center,

      children: [
        ...      
      ],
    );
  }
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {

  ...
              //Problem #2

              // Wrap the Row widget inside an expanded widget to 
              // expand vertically
              Expanded(
                child: Row(
                  
                  // Add spaceEvenly main axis alignment inside Row
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,

                  children: const [
                    Emoji('', 'Good'),
                    Emoji('', 'Average'),
                    Emoji('', 'Bad'),
                  ],
                ),
              ),
    ...
  }
}

• Widget dibungkus di dalam widget Rowsehingga dapat menempati seluruh ruang vertikal yang tersisa.EmojiExpanded
• mainAxisAlignment: MainAxisAlignment.spaceEvenlyditambahkan ke baris di atas untuk menempatkan Emojiwidget secara merata dalam arah horizontal.
• mainAxisAlignment: MainAxisAlignment.centerditambahkan ke Columnwidget Emojiuntuk menyelaraskan tengah anak-anaknya secara vertikal.

Masalah Tata Letak #3

Tugas selanjutnya adalah mencari tahu kasus aneh dari pembagi horizontal yang hilang.

Saat memeriksa hierarki widget seperti yang ditunjukkan di bawah ini, kita dapat melihat bahwa meskipun Dividerwidget ada, tetap saja tidak terlihat di UI. Jika kita mengklik widget dan melihat Layout Explorer, lebarnya dihitung 0.0karena tidak ada batasan lebar yang diberikan.

Lanjutkan dan tetapkan nilai flexas 1sehingga batasan lebar diberikan dan meluas untuk menempati seluruh lebar yang tersedia dari Row.

Mari kita buat perubahan kode yang diperlukan dengan membungkus bagian Dividerdalam Expandedwidget seperti yang ditunjukkan di bawah ini:

// Problem #3
Row(
  children: const [
    // Wrap the Divider inside the Expanded widget
    // to provide width constrain
    Expanded(
      child: Divider(
        color: Colors.black,
      ),
    ),
  ],
),

Masalah Tata Letak #4

Tugas terakhir yang tersisa adalah menyelaraskan Submittombol ke tengah.

Masalah ini dapat diperbaiki dengan cepat dengan mengubah perataan sumbu utama anak di dalam Rowwidget terakhir. Klik pada widget dan pilih centerdari dropdown perataan sumbu utama seperti yang ditunjukkan di bawah ini.

Mari kita lanjutkan dan lakukan perubahan kode yang sesuai.

// Problem #4
Row(
  // Add mainAxisAlignment as center
  mainAxisAlignment: MainAxisAlignment.center,

  children: [
    ElevatedButton(
      onPressed: () {
        debugPrint('Submit button pressed.');
      },
      child: const Text(
        'Submit',
      ),
    ),
  ],
),

Hore! Kami telah berhasil mendapatkan Tata Letak UI yang diinginkan dengan bantuan alat Flutter Inspector yang membantu kami dalam men-debug masalah secara visual.

Pada artikel ini kami mengambil bantuan alat Flutter Inspector DevTools untuk men-debug secara visual Tata Letak UI yang berisi berbagai masalah. Kami mulai dengan Tata Letak yang diberikan dan mengidentifikasi berbagai masalah tata letak seperti teks yang meluap, jarak yang tidak rata antara emoji, pembagi horizontal yang hilang, dan tombol kirim yang tidak rata tengah. Menggunakan alat yang disediakan di dalam Flutter Inspector, kami menyelesaikan masalah tersebut, membuat perubahan kode yang diperlukan, dan akhirnya mendapatkan UI yang diinginkan.

Kami ingin mendengar pengalaman Anda dengan Flutter Inspector. Jika Anda menghadapi masalah apa pun saat menjalani latihan ini atau saat menjalankan alat untuk proyek Anda, jangan ragu untuk menyebutkannya di komentar dan kami pasti dapat memeriksanya. Juga, jika Anda memiliki saran lain, tambahkan di komentar.

Di artikel selanjutnya dari seri ini, kami telah membahas alat lain yang tersedia di paket DevTools yang dapat membantu Anda membuat aplikasi Flutter berperforma tinggi. Jangan lupa untuk memeriksa tautan di bawah untuk menavigasi ke alat yang ingin Anda pelajari selanjutnya:

• Bagian 1: Pendahuluan & Instalasi
• Bagian 3: Alat Ukuran Aplikasi
• Bagian 4: Tampilan Jaringan
• Bagian 5: Tampilan Logging
• Bagian 6: Tampilan Profiler CPU
• Bagian 7: Tampilan Memori
• Bagian 8: Tampilan Kinerja

Terima kasih khusus kepada Kamal Shree (GDE — Dart & Flutter) untuk meninjau artikel ini.