const Widget'lar

Coddy'nin Flutter Journey'sinin Etkileşimli Uygulamalar bölümünün bir parçası. Ders 15 / 34.

Bir değerin önündeki const şu anlama gelir: kodu yazdığında bu değer sabittir ve asla değişmez. const Text('Score'), uygulama çalıştığı sürece Score gösterir.

Dart'a bunu neden söylüyoruz? setState ekranı yeniden oluşturduğunda Flutter, içindeki hiçbir şeyin değişmediğini bildiği için her const bileşeni atlayabilir. Bu nedenle VS Code ve Android Studio gibi Flutter kod düzenleyicileri, const olabilecek bir bileşenin altını çizer ve bunu eklemeni önerir. Bundan sonra bu kurstaki uygulamalarda uygun olan yerlerde const kullanılacak.

const içeriye kadar etki eder: bir bileşende, parantezlerinin içindeki her şey de const olur. Bu yüzden, değişmeyen en dıştaki bileşene bir kez yazarsın:

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

Bir değişken değişebilir, bu nedenle asla const içinde olamaz. Bu sütuna Text('$_score') eklersen Dart, "Not a constant expression" hatasıyla kodu derlemeyi reddeder. Çözüm: const'u sütundan kaldır ve değişmeyen her alt bileşene ekle:

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

Görev

Orta

Artı düğmesine bastığında skor artıyor, ancak ekranda hiç görünmüyor. Score öğesinin altına Text('$_score') ifadesini 48 boyutunda ekle. const ifadesini Column öğesinden, içindeki hiç değişmeyen bileşenlere taşıman gerekecek.

Kendin dene

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