Tips Flutter Cara Mengenal Widget dengan Mudah dan Cepat

Tips cara mengenal flutter widget mudah dan cepat
Tips cara mengenal flutter widget mudah dan cepat
Codingtive.com - "Everything is widgets", kita tahu bahwa segala sesuatu pada Flutter adalah widget, dan banyak sekali macam-macam widget yang dapat kita gunakan untuk membangun suatu aplikasi.

Bagaimana cara kita mengenal dan mengetahui widget dan cara menggunakannya dengan mudah ? Padahal kita tahu, didalam widget terdapat properties yang berbeda-beda, dan masalah yang sering dialami yaitu lupa apa saja yang dibutuhkan untuk membuat suatu widget.

Nah, untuk mengatasinya artikel ini sangat cocok buat kamu, akan kita bahas mengenai tips mengenal widget beserta komponen yang didalamnya.

Pertama, pastikan laptop kamu sudah install Android Studio atau edittor seperti Visual Studio Code, buat kamu pengguna Visual Studio Code untuk mempermudah dan membantu kamu menuliskan kode Flutter, baca artikel menggunakan visual studio code untuk Flutter.

Sebagai contoh untuk menerapkannya, kita langsung praktekan saja supaya lebih mengerti. Buatlah project Flutter atau kamu dapat menggunakan project sebelumnya yang sudah ada, kemudian buka file main.dart pada folder lib. Hapus semua kodenya dan tambahkan kode berikut :
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter'),
        ),
        body: Center(
            child: Text('Hello World!'),
        ),
      ),
    );
  }
}
Kode diatas, kita membuat layout sederhana menampilkan text Hello World ditengah. Nah, cara mengetahui suatu Widget beserta propertiesnya kalian tinggal tekan tahan Ctrl + arahkan kursor ke widget yang diinginkan. Sehingga muncul dialog tentang widget dan isinya, sebagai contoh untuk widget Text, gambarnya seperti berikut :
Flutter widget text
Flutter widget text
Ada cara lain untuk mengetahui detailnya yang lebih lengkap, caranya tekan tahan Ctrl + klik pada widget yang diinginkan. Sehingga membuka file dimana widget tersebut berada, kamu bisa tahu pengertian, cara menggunakan widget, properties dan pengaturan apa saja yang dapat kamu gunakan. Contoh untuk widget Text, gambarnya seperti berikut :
Flutter widget text class
Flutter widget text class
Caranya sama ketika kamu ingin mengetahui cara menggunakan properties dan apa tipenya, caranya tinggal tekan tahan Ctrl + arahkan kursor ke properties yang diinginkan.

Contohnya kamu ingin mengetahui tipe apa yang digunakan untuk properties style pada widget Text, maka muncul dialog yang berisi deskripsi dan tipe yang digunakan. Gambarnya seperti berikut :
Flutter widget TextStyle
Flutter widget TextStyle
Sehingga kita bisa tahu untuk properties style berupa TextStyle.  Cara yang sudah kamu praktekan juga dapat digunakan untuk widget lainnya, jika kamu lupa ketika membuat suatu widget, tinggal gunakan saja cara tersebut.

Demikian tips untuk mengenal widget pada Flutter dengan mudah dan cepat, jangan lupa subscribe website codingtive untuk mendapatkan tutorial dan artikel menarik lainnya. Semoga bermanfaat ya.

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Tips Flutter Cara Mengenal Widget dengan Mudah dan Cepat"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel