Tutorial Flutter Statelesswidget Dan Statefulwidget Lengkap

Flutter statelesswidget and statefulwidget

- Flutter widget dibangun dengan memakai modern framework yang terinspirasi dari React, dan ide utamanya yaitu semua komponen dalam Flutter yaitu widget. Widget menjelaskan bagaimana suatu komponen yang terlihat dan bagaimana state atau kondisinya.

Banyak macam-macam widget yang ada pada Flutter, namun utamanya dibagi menjadi 2, yaitu :

StatelessWidget : widget yang tidak mempunyai state, atau kondisinya tidak berubah-ubah. Contohnya dikala menampilkan gambar, text, maupun widget lainnya dan tidak ada perubahan atau tetap.

StatefulWidget : widget yang mempunyai state yang sanggup berubah-ubah. Contohnya yaitu dikala ada tombol di klik akan mengubah komponen lain. Untuk sanggup memakai StatefulWidget kau membutuhkan 2 class yaitu class yang mewarisi / extends ke StatefulWidget dan class yang extends ke State.

Untuk mempelajari lebih dalam bagaimana perbedaannya, mari kita coba untuk mengimplementasikan kodenya. Ikuti langkah-langkahnya hingga selesai ya.

1. Buat project flutter

Pertama, buatlah project gres atau kau sanggup memakai project yang sudah ada. Pastikan dikala pertama kali menciptakan project, laptop terkoneksi dengan internet dan tunggu hingga proses sinkronisasi selesai.

2. Membuat StatelessWidget

Seperti yang sudah dijelaskan sebelumnya, StatelessWidget tidak mempunyai state sehingga kondisinya selalu tetap. Contohnya kita akan menciptakan tampilan untuk menampilkan Text dan Button namun tidak ada perubahan kondisi.

Buka file main.dart pada folder lib, dan ganti kodenya menjadi menyerupai berikut :

import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart';  void main() {   runApp(MaterialApp(     title: "Flutter Widget",     debugShowCheckedModeBanner: false,     home: MyApp(),   )); }  class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         title: Text("StatelessWidget"),       ),       body: Center(         child: Column(           mainAxisAlignment: MainAxisAlignment.center,           children: <Widget>[             Text(                 "This is StatelessWidget",             ),             Padding(                 padding: EdgeInsets.only(bottom: 10.0),             ),             MaterialButton(               onPressed: (){},               color: Colors.blueAccent,               child: Text(                 "Click Me",                 style: TextStyle(color: Colors.white),               ),             ),           ],         ),       ),     );   } } 

Sekarang coba jalankan dengan emulator atau device, karenanya menyerupai berikut :

Tutorial statelesswidget

Kita lihat bahwa tidak ada perubahan atau kondisi yang berubah didalamnya, inilah konsep StatelessWidget. Lalu bagaimana caranya semoga ada state yang berubah ? Caranya yaitu memakai StatefulWidget.

3. Membuat StatefulWidget

Untuk memakai StatefulWidget, kita perlu menciptakan 2 class. Ubah semua isyarat pada file main.dart menjadi menyerupai berikut :

import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart';  void main() {   runApp(MaterialApp(     title: "Flutter Widget",     debugShowCheckedModeBanner: false,     home: MyApp(),   )); }  class MyApp extends StatefulWidget {   @override   _MyAppState createState() => _MyAppState(); }  class _MyAppState extends State<MyApp> {    String statusClicked;    @override   void initState() {     super.initState();     statusClicked = "off";   }    void onClickButton() {     setState(() {       statusClicked == "on" ? statusClicked = "off" : statusClicked = "on";     });   }    @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         title: Text("StatefulWidget"),       ),       body: Center(         child: Column(           mainAxisAlignment: MainAxisAlignment.center,           children: <Widget>[             Text("Status clicked is $statusClicked"),             Padding(               padding: EdgeInsets.only(bottom: 10.0),             ),             MaterialButton(               color: statusClicked == "on" ? Colors.blue : Colors.red,               textColor: Colors.white,               onPressed: () {                 onClickButton();               },               child: Text(statusClicked == "on" ? "ON" : "OFF"),             ),           ],         ),       ),     );   } } 

Sekarang coba jalankan, karenanya menyerupai berikut :

tutorial flutter statefulwidget

flutter statefulwidget

Kita lihat, dikala tombol di klik ada perubahan kondisi dan tampilan didalamnya, inilah yang dinamakan StatefulWidget.

Source code 

Untuk source code lengkap latihan StatelessWidget dan StatefulWidget, kau sanggup mempelajarinya di repository berikut :

Github Saya

Kesimpulan

Ketika menciptakan tampilan yang kondisinya selalu tetap maka gunakan StatelessWidget, tetapi kalau didalamnya terdapat perubahan state maka gunakan StatefulWidget. Selanjutnya kau sanggup mempelajari widget lainnya atau kau sanggup mengikuti artikel berikut untuk meningkatkan skill kamu.

Pelajari juga :

Tutorial flutter menciptakan layout sederhana

Tutorial flutter menampilkan gambar dengan ImageWidget

Share this post