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 :
Kita lihat, dikala tombol di klik ada perubahan kondisi dan tampilan didalamnya, inilah yang dinamakan StatefulWidget.
 |
| tutorial flutter statefulwidget |
 |
| flutter statefulwidget |
Related
Source code
Untuk source code lengkap latihan StatelessWidget dan StatefulWidget, kau sanggup mempelajarinya di repository berikut :
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 :
0 Response to "Tutorial Flutter Statelesswidget Dan Statefulwidget Lengkap"
Post a Comment