StatefulWidget Yazma

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

Bu kez StatefulWidget bileşenini kendin yazıyorsun. Ekranda I feel Sleepy yazar ve Drink coffee düğmesine basıldığında bu ifade I feel Awake olarak değişmelidir. Bir StatelessWidget bunu asla yapamaz.

Bir StatelessWidget bileşenini StatefulWidget bileşenine dönüştürmek üç adım gerektirir:

extends StatelessWidget ifadesini extends StatefulWidget olarak değiştir ve build metodunu createState ile değiştir.
Altına State sınıfını yaz ve build metodunu değiştirmeden oraya taşı.
Değişen değişkeni build metodunun dışına, State sınıfının en üstüne taşı.

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

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

class _HomePageState extends State<HomePage> {
  String _mood = 'Sleepy';

  @override
  Widget build(BuildContext context) {
    ...
  }
}

3. adım önemlidir. build metodunun en üstündeki bir değişken, build her çalıştığında yeniden oluşturulur; bu nedenle setState çağrısından sonra değeri tekrar 'Sleepy' olur. State sınıfının en üstünde ise bir kez oluşturulur ve ona verdiğin değeri korur.

Görev

Orta

HomePage'i _HomePageState sınıfına sahip bir StatefulWidget'a dönüştür. Ruh hâlini State'in en üstünde String _mood = 'Sleepy'; içinde tut ve Drink coffee'nin setState ile 'Awake' olarak değiştirmesini sağla.

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 StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    String mood = 'Sleepy';
    return Scaffold(
      appBar: AppBar(title: Text('Mood')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('I feel $mood', style: TextStyle(fontSize: 32)),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {},
              child: Text('Drink coffee'),
            ),
          ],
        ),
      ),
    );
  }
}