Widget const

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

const di depan sebuah nilai berarti: nilai ini tetap saat kamu menulis kode dan tidak pernah berubah. const Text('Score') akan menampilkan Score selama aplikasi berjalan.

Mengapa memberi tahu Dart tentang hal itu? Saat setState membangun ulang layar, Flutter bisa melewati setiap widget const, karena Flutter tahu tidak ada yang berubah di dalamnya. Itulah sebabnya editor kode Flutter, seperti VS Code dan Android Studio, menggarisbawahi widget yang bisa menjadi const dan menyarankan untuk menambahkannya. Mulai sekarang, aplikasi dalam kursus ini menggunakan const jika sesuai.

const berlaku hingga ke bagian dalam: pada sebuah widget, semua yang berada di dalam tanda kurungnya juga merupakan const. Jadi, tulis sekali saja pada widget terluar yang tidak pernah berubah:

const Column(
  children: [
    Text('Score'),
    Icon(Icons.star),
  ],
)

Variabel bisa berubah, jadi tidak pernah bisa berada di dalam const. Masukkan Text('$_score') ke dalam column tersebut dan Dart akan menolak untuk mengompilasinya, dengan error "Not a constant expression". Solusinya: hapus const dari column dan tambahkan pada setiap anak yang tidak berubah:

Column(
  children: [
    const Text('Score'),
    Text('$_score'),
  ],
)

Tantangan

Sedang

Skor bertambah saat kamu menekan tombol plus, tetapi layar tidak pernah menampilkannya. Di bawah Score, tambahkan Text('$_score') dengan ukuran 48. Kamu perlu memindahkan const dari Column ke widget di dalamnya yang tidak pernah berubah.

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: const HomePage(),
    );
  }
}

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

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

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

  void _goal() {
    setState(() {
      _score++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Game')),
      body: Center(
        child: const Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.sports_soccer, size: 64),
            Text('Score', style: TextStyle(fontSize: 24)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _goal,
        child: const Icon(Icons.add),
      ),
    );
  }
}