This document discusses stateful widgets in Flutter. It provides two examples of stateful widgets. The first example demonstrates updating text when a button is pressed. The second example increments a counter and cycles through a string array when a button is pressed. The document concludes by assigning students a homework task to create a random dice rolling app as a stateful widget project.

1. SMKN 2 JAKARTA
STATEFULL WIDGET
2
Tema :
Statefull Widget
Hardware :
• laptop / pc
Software :
• flutter sdk
• android studio / visual studio code
• flutlab.io
Dokumentasi : https://docs.flutter.dev/development/ui/interactive
Materi :
Example 1
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: const MyApp(),
));
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
//1. buat default variabel
String _value = "Tulisan ini akan muncul pertama kali di run";
//2 .buat function tekan
void _tekan(){
setState(() {
_value = "Ketika Di klik tulisan ini akan tampil";
});
}
@override

2. Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Statefull Widget'),
),
body: Container(
padding: const EdgeInsets.all(32.0),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
_value,
textAlign: TextAlign.center,
style: TextStyle(fontSize: 30.0),
),
SizedBox(
height: 20.0,
),
ElevatedButton(
onPressed: () {
//function tekan taruh di sini
_tekan();
},
child: const Text('Klik Aku Dong !'),
),
],
),
),
),
);
}
}
Output :

3. Example 2
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: MyApp(),
),
);
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
//deklarasikan variabel
int _counter = 0;
//variabel array
List<String> strings = ["Flutter", "is ", "Awesome"];
String displayString = "";
//lalu yang terakhir tambah functionnya
void pressDone() {
setState(() {
displayString = strings[_counter];
_counter = _counter < 2 ? _counter + 1 : 0;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Contoh Statefull kedua'),
),
body: Container(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
displayString,
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.bold,
),
),
Padding(
padding: const EdgeInsets.all(15.0),
),
ElevatedButton(
style: ButtonStyle(

4. backgroundColor: MaterialStatePropertyAll(Colors.red),
),
onPressed: () {
// print('object');
//masukkan function pressdong
pressDone();
},
child: const Text("Press Dong !"),
),
],
),
),
),
);
}
}
Output:

5. Latihan Statefull Widget
buatlah program seperti di bawah ini yang mengatur keluarnya angka dadu secara random :

6. Penilaian tugas :
• push project dadu ke github setiap siswa, lalu kirim linknya ke google classroom
• tidak boleh plagiat code
• untuk file asset gambar dadu dapat di download link :
https://github.com/herry88/kumpulangambarjobsheet/tree/master/imagedadu