Hot Reload Durumu Korur

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

Önizlemede değişikliklerini uygulamanın iki yolu vardır. Çalıştır, uygulamayı sıfırdan başlatır. Sıcak yeniden yükleme, uygulama çalışmaya devam ederken yeni kodunu devreye alır ve State'i korur: sayaç aynı sayıyı göstermeye devam eder.

Deneyin: birkaç kez artı düğmesine basın, sayının rengini değiştirin ve Sıcak yeniden yükleme'ye basın. Yeni renk görünür ve sayaç değeri değişmez. Bir ekranı biçimlendirirken bu, bulunduğunuz yere dönmek için tekrar tekrar dokunmanızı önler.

Sıcak yeniden yükleme, yeni kodunuzla ekranı yeniden oluşturur ancak yeni bir State oluşturmaz. Bu nedenle, başlangıç değerinde int _count = 0; değerini int _count = 10; olarak değiştirmek gibi bir değişiklik görünmez: bu satır yalnızca State oluşturulduğunda çalışır. Değişikliği görmek için Çalıştır'a basın.

Aynı durum main için ve bir StatelessWidget'ı StatefulWidget'a dönüştürmek için de geçerlidir. Sıcak yeniden yüklemeden sonra bir değişiklik görünmüyorsa Çalıştır'a basın.

Görev

Kolay

Sayı boyutunu 64 ve rengini Colors.deepPurple yap. Önce artı düğmesine birkaç kez bas, ardından Hot reload kullan ve sayacın aynı kaldığını gör.
Sayacın 10 ile başlamasını sağla. Hot reload'un bunu göstermediğine, Run'ın ise gösterdiğine dikkat et.

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: 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++;
    });
  }

  void _decrease() {
    setState(() {
      _count--;
    });
  }

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