Bộ đếm tăng giảm

Thuộc phần Tạo tính tương tác trong hành trình Flutter của Coddy. Bài học 13 trên 34.

Hàm có thể nằm trong lớp State. Tại đó, hàm có thể đọc các biến của State và gọi setState:

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

_count++ là cách viết ngắn của _count = _count + 1, còn _count-- trừ đi một. Hàm thuộc về một lớp được gọi là phương thức (method), còn phương thức riêng tư bắt đầu bằng _, giống như các biến.

Gán hàm cho nút bằng tên của hàm, không có dấu ngoặc đơn, như trong Your Own Functions: IconButton(icon: Icon(Icons.add), onPressed: _increase).

Thử thách

Dễ

Bộ đếm chỉ tăng. Thêm một phương thức _decrease để giảm đi một đơn vị bên trong setState, rồi thêm một IconButton có Icons.remove ở trước số và gọi phương thức đó.

Tự làm thử

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),
          ],
        ),
      ),
    );
  }
}