{"id":61,"date":"2025-09-21T04:12:12","date_gmt":"2025-09-21T04:12:12","guid":{"rendered":"https:\/\/infokand23.my.id\/2015\/?p=61"},"modified":"2025-09-23T11:24:59","modified_gmt":"2025-09-23T11:24:59","slug":"setup-flutter-development-stateless-statefull-widget-basic-widgets","status":"publish","type":"post","link":"https:\/\/infokand23.my.id\/2015\/setup-flutter-development-stateless-statefull-widget-basic-widgets\/","title":{"rendered":"SETUP FLUTTER DEVELOPMENT, STATELESS, & STATEFULL WIDGET, BASIC WIDGETS"},"content":{"rendered":"\n

Praktikum kali ini kita membahas mengenai dasar flutter seperti stateless dan statefull. Flutter merupakan sebuah open source framework untuk membuat aplikasi multi platform hanya dengan satu kode. Agar lebih memahami materi ini langsung saja kita ke langkah-langkah pengerjaan. <\/p>\n\n\n\n

A. Lingkungan Pengembangan <\/strong><\/p>\n\n\n\n

Sediakan lingkungan flutter development berupa git, Android Studio, Visual Studio Code, dan instal SDK Flutter. <\/p>\n\n\n\n

Download GIT<\/mark> : https:\/\/github.com\/git-for-windows\/git\/releases\/download\/v2.51.0.windows.1\/Git-2.51.0-64-bit.exe<\/a><\/p>\n\n\n\n

Download Visual Studio : https:\/\/c2rsetup.officeapps.live.com\/c2r\/downloadVS.aspx?sku=community&channel=Release&version=VS2022&source=VSLandingPage&includeRecommended=true&cid=2030<\/a><\/p>\n\n\n\n

Download Android Studio : https:\/\/developer.android.com\/studio#get-android-studio<\/a><\/p>\n\n\n\n

B. Stateless dan Statefull Widget<\/strong><\/p>\n\n\n\n

Stateless <\/mark><\/p>\n\n\n\n

Stateless widget digunakan ketika laman yang kita bikin datanya tidak mengalami perubahan ketika sebuah state dijalankan. Widget ini bersifat statis atau tetap biasanya hanya berisi text, logo aplikasi dan sebagainya. Untuk membuat laman Stateless silakan buat class pada directory lib dengan nama stateless.dart. Kemudian tambahkan kode program seperti berikut.<\/p>\n\n\n\n

    \n
  1. <\/li>\n<\/ol>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    output :<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Statefull<\/mark><\/p>\n\n\n\n

    Statefull Widget merupakan widget dinamis yang ketika sebuah state berubah maka tampilan UI juga berubah. Contohnya ketika tombol diklik atau ditekan maka tombol berubah warna atau form input lainnya berubah. Ada dua hal yang perlu kita ketahui di Statefull widget :<\/p>\n\n\n\n

      \n
    1. MyStateFulWidget : class utama widget (immutable\/tetap) kelas ini dianalogikan sebagai pintu masuk saja dan di dalamnya tidak terdapat state <\/li>\n\n\n\n
    2. _MyStateFulWidgetState : Berfungsi pegang variabel yang bisa berubah misalnya counter, warna, input,text,dll<\/li>\n<\/ol>\n\n\n\n

      Untuk membuat Statefull widget silakan buat class statefull dan tambahkan kode pogram berikut <\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      Output :<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      C. Basic Widget <\/p>\n\n\n\n

      Dari dua langkah di atas terdapat dasar-dasar widget yang telah kita implementasikan diantaranya :<\/p>\n\n\n\n

      Text<\/mark><\/p>\n\n\n\n

      Text merupakan widget dasar yang digunakan utnuk menampilkan text pada layer. <\/p>\n\n\n\n

      Text memiliki proprti berikut :<\/p>\n\n\n\n

        \n
      • data : Berisi teks yang akan ditampilkan<\/li>\n\n\n\n
      • style : menerima objek TextStyle yang digunakan untuk mengontrol tampilan<\/li>\n\n\n\n
      • teks seperti fontSize, color, fontWeight (bold), fontStyle (italic)<\/li>\n\n\n\n
      • textAlign : mengatur teks secara horizontal seperti TextAlign.center, left, right<\/li>\n\n\n\n
      • maxLines :berfungsi membatas jumlah baris yang akan ditampilkan<\/li>\n\n\n\n
      • overflow : w mengatur teks yang terlalu panjang (TextOverflow.ellipsis) untuk menambahkan \u201c\u2026..\u201d di akhir teks<\/li>\n<\/ul>\n\n\n\n

        Container<\/mark><\/p>\n\n\n\n

        Container merupakan widget yang berfungsi sebagai KOTAK yang dapat menampung ssatu widget child dan menyediakan berbagai properti untuk dekorasi, mengatur posisi dan mengatur ukuran widget.<\/p>\n\n\n\n

        Properti Container :<\/p>\n\n\n\n

          \n
        • child : properti yang menerima satu widget yang akan ditempatkan didalam container<\/li>\n\n\n\n
        • color : mengatur warna background<\/li>\n\n\n\n
        • width dan height : mengatur lebar dan tinggi container<\/li>\n\n\n\n
        • padding : mengatur jarak antara konten dengan bagian dalam container<\/li>\n\n\n\n
        • margin : mengatur jarak antara container dengan widget lain diluar container<\/li>\n\n\n\n
        • decoration : properti yang menerima objek BoxDecoration yang dapat mengatur warna, border, corner radius dan shadow pada Container<\/li>\n<\/ul>\n\n\n\n

          ElevatedButton<\/mark><\/p>\n\n\n\n

          ElevatedButton merupakan widget yang mewakili tombol dan memiliki shadow
          Properti :<\/p>\n\n\n\n

            \n
          • onPressed berfungsi untuk menerima sebuah fungsi atau callback ketika tombol di tekan<\/li>\n\n\n\n
          • child properti yang berisi satu widget yang akan ditampilkan didalam tombol biasanya Text
            atau Icon<\/li>\n\n\n\n
          • style properti yang menerima objek ButtonStyle sehingga dapat menyesuaikan tampilan
            tombol seperti backgroundColor, foregroundColor, padding dan shape<\/li>\n<\/ul>\n\n\n\n

            Icon<\/mark><\/p>\n\n\n\n

            Icon merupakan widget yang digunakan untuk menampilkan icon, Flutter telah menyediakan set icon
            seperti Material Icons dari Google atau Cupertino Icons dari Apple
            Properti :<\/p>\n\n\n\n

              \n
            • icon properti yang menerima object IconData yang merepresentasikan ikon yang akan
              ditampilkan dari kelas Icons atau CupertinoIcons<\/li>\n\n\n\n
            • color mengatur warna ikon<\/li>\n\n\n\n
            • size mengatur ukuran ikon dalam piksel<\/li>\n<\/ul>\n\n\n\n

              Image<\/mark><\/p>\n\n\n\n

              Image merupakan widget dasar yang digunakan untuk menampikan gambar dari berbagai sumber
              seperti asset, network, memory (byte data), file system.
              Properti :<\/p>\n\n\n\n

                \n
              • image properti yang menerima object ImageProvider seperti AssetImage, NetworkImage dll)<\/li>\n\n\n\n
              • width dan height mengatur lebar dan tinggi gambar<\/li>\n\n\n\n
              • fit digunakan untuk menyesuaikan ukuran gambar seperti cover, fill, contain<\/li>\n\n\n\n
              • aligment digunakan untuk mengatur posisi gambar<\/li>\n<\/ul>\n\n\n\n

                CircleAvatar<\/mark>
                CircleAvatar adalah widget yang sering digunakan untuk menampilkan gambar profil pengguna atau
                inisialnya dalam bentuk lingkaran.
                Properti :<\/p>\n\n\n\n

                  \n
                • Child Widget yang akan ditampilkan di dalam lingkaran seperti Text (inisial) atau Icon.<\/li>\n\n\n\n
                • backgroundImage Digunakan untuk menampilkan gambar dari ImageProvider, seperti
                  NetworkImage atau AssetImage.<\/li>\n\n\n\n
                • radius Mengontrol ukuran lingkaran, ukuran defaultnya adalah 20.<\/li>\n\n\n\n
                • backgroundColor Mengatur warna latar belakang lingkaran<\/li>\n<\/ul>\n\n\n\n

                  C. Tugas<\/strong><\/p>\n\n\n\n

                  Membuat profil pribadi menggunakan staless widget.<\/p>\n\n\n\n

                  \"\"<\/figure>\n\n\n\n
                  \"\"<\/figure>\n\n\n\n
                  \"\"<\/figure>\n\n\n\n
                  \"\"<\/figure>\n\n\n\n
                  \"\"<\/figure>\n\n\n\n

                  D<\/strong>. Simpulan<\/strong><\/p>\n\n\n\n

                  Dari praktikum ini dapat disimpulkan bahwa proses pengembangan aplikasi dengan Flutter membutuhkan pemahaman awal mengenai instalasi dan konfigurasi lingkungan pengembangan yang tepat. Selain itu, pemahaman tentang perbedaan antara Stateless Widget<\/strong> dan Stateful Widget<\/strong> menjadi hal yang sangat penting, karena keduanya merupakan fondasi utama dalam membangun antarmuka pengguna. Stateless Widget digunakan untuk tampilan yang statis, sedangkan Stateful Widget memungkinkan tampilan aplikasi berubah sesuai interaksi dan perubahan data. Praktikum ini juga memberikan pengalaman dalam menggunakan berbagai basic widgets seperti Text<\/code>, Container<\/code>, ElevatedButton<\/code>, Icon<\/code>, Image<\/code>, dan CircleAvatar<\/code>, yang menjadi komponen dasar dalam menyusun tampilan aplikasi Flutter. Dengan menguasai konsep dasar ini, pengembangan aplikasi yang lebih kompleks di Flutter akan menjadi lebih mudah dipahami dan diterapkan.<\/p>\n\n\n\n

                  <\/p>\n","protected":false},"excerpt":{"rendered":"

                  Praktikum kali ini kita membahas mengenai dasar flutter seperti stateless dan statefull. Flutter merupakan sebuah open source framework untuk membuat aplikasi multi platform hanya dengan satu kode. Agar lebih memahami materi ini langsung saja kita ke langkah-langkah pengerjaan. A. Lingkungan Pengembangan Sediakan lingkungan flutter development berupa git, Android Studio, Visual Studio Code, dan instal SDK Flutter. Download GIT : https:\/\/github.com\/git-for-windows\/git\/releases\/download\/v2.51.0.windows.1\/Git-2.51.0-64-bit.exe Download Visual Studio : https:\/\/c2rsetup.officeapps.live.com\/c2r\/downloadVS.aspx?sku=community&channel=Release&version=VS2022&source=VSLandingPage&includeRecommended=true&cid=2030 Download Android Studio : https:\/\/developer.android.com\/studio#get-android-studio B. Stateless dan Statefull Widget Stateless Stateless widget digunakan ketika laman yang kita bikin datanya tidak mengalami perubahan ketika sebuah state dijalankan. Widget ini bersifat statis atau tetap biasanya hanya berisi text, logo aplikasi dan sebagainya. Untuk membuat laman Stateless silakan buat class pada directory lib dengan nama stateless.dart. Kemudian tambahkan kode program seperti berikut. output : Statefull Statefull Widget merupakan widget dinamis yang ketika sebuah state berubah maka tampilan UI juga berubah. Contohnya ketika tombol diklik atau ditekan maka tombol berubah warna atau form input lainnya berubah. Ada dua hal yang perlu kita ketahui di Statefull widget : Untuk membuat Statefull widget silakan buat class statefull dan tambahkan kode pogram berikut Output : C. Basic Widget Dari dua langkah di atas terdapat dasar-dasar widget yang telah kita implementasikan diantaranya : Text Text merupakan widget dasar yang digunakan utnuk menampilkan text pada layer. Text memiliki proprti berikut : Container Container merupakan widget yang berfungsi sebagai KOTAK yang dapat menampung ssatu widget child dan menyediakan berbagai properti untuk dekorasi, mengatur posisi dan mengatur ukuran widget. Properti Container : ElevatedButton ElevatedButton merupakan widget yang mewakili tombol dan memiliki shadowProperti : Icon Icon merupakan widget yang digunakan untuk menampilkan icon, Flutter telah menyediakan set iconseperti Material Icons dari Google atau Cupertino Icons dari AppleProperti : Image Image merupakan widget dasar yang digunakan untuk menampikan gambar dari berbagai sumberseperti asset, network, memory (byte data), file system.Properti : CircleAvatarCircleAvatar adalah widget yang sering digunakan untuk menampilkan gambar profil pengguna atauinisialnya dalam bentuk lingkaran.Properti : C. Tugas Membuat profil pribadi menggunakan staless widget. D. Simpulan Dari praktikum ini dapat disimpulkan bahwa proses pengembangan aplikasi dengan Flutter membutuhkan pemahaman awal mengenai instalasi dan konfigurasi lingkungan pengembangan yang tepat. Selain itu, pemahaman tentang perbedaan antara Stateless Widget dan Stateful Widget menjadi hal yang sangat penting, karena keduanya merupakan fondasi utama dalam membangun antarmuka pengguna. Stateless Widget digunakan untuk tampilan yang statis, sedangkan Stateful Widget memungkinkan tampilan aplikasi berubah sesuai interaksi dan perubahan data. Praktikum ini juga memberikan pengalaman dalam menggunakan berbagai basic widgets seperti Text, Container, ElevatedButton, Icon, Image, dan CircleAvatar, yang menjadi komponen dasar dalam menyusun tampilan aplikasi Flutter. Dengan menguasai konsep dasar ini, pengembangan aplikasi yang lebih kompleks di Flutter akan menjadi lebih mudah dipahami dan diterapkan.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-61","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/infokand23.my.id\/2015\/wp-json\/wp\/v2\/posts\/61","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/infokand23.my.id\/2015\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/infokand23.my.id\/2015\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/infokand23.my.id\/2015\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/infokand23.my.id\/2015\/wp-json\/wp\/v2\/comments?post=61"}],"version-history":[{"count":5,"href":"https:\/\/infokand23.my.id\/2015\/wp-json\/wp\/v2\/posts\/61\/revisions"}],"predecessor-version":[{"id":88,"href":"https:\/\/infokand23.my.id\/2015\/wp-json\/wp\/v2\/posts\/61\/revisions\/88"}],"wp:attachment":[{"href":"https:\/\/infokand23.my.id\/2015\/wp-json\/wp\/v2\/media?parent=61"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/infokand23.my.id\/2015\/wp-json\/wp\/v2\/categories?post=61"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/infokand23.my.id\/2015\/wp-json\/wp\/v2\/tags?post=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}