Naikkan dan Turunkan Penghitung

Termasuk bagian Membuat Aplikasi Interaktif dalam perjalanan Flutter di Coddy. Pelajaran 13 dari 34.

Fungsi juga bisa berada di dalam class State. Di sana, fungsi itu bisa membaca variabel milik State dan memanggil setState:

void _increase() {
  setState(() {
    _count++;
  });
}

_count++ adalah bentuk singkat dari _count = _count + 1, dan _count-- mengurangi nilainya satu. Fungsi yang menjadi bagian dari class disebut method, dan method privat diawali dengan _, seperti variabel.

Berikan fungsi itu kepada tombol menggunakan namanya, tanpa tanda kurung, seperti pada Your Own Functions: IconButton(icon: Icon(Icons.add), onPressed: _increase).

Tantangan

Mudah

Penghitung hanya bertambah. Tambahkan method _decrease yang mengurangi nilainya satu di dalam setState, serta IconButton dengan Icons.remove sebelum angka yang memanggilnya.

Coba sendiri

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _count = 0;

  void _increase() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('$_count', style: TextStyle(fontSize: 48)),
            IconButton(icon: Icon(Icons.add), onPressed: _increase),
          ],
        ),
      ),
    );
  }
}