כתיבת StatefulWidget

חלק מהיחידה הוספת אינטראקטיביות במסלול ה-Flutter של Coddy. שיעור 12 מתוך 34.

הפעם תכתבו את StatefulWidget בעצמכם. במסך כתוב I feel Sleepy, ולחיצה על לשתות קפה אמורה לשנות את הטקסט ל־I feel Awake. בתור StatelessWidget, הוא לעולם לא יוכל לעשות זאת.

הפיכת StatelessWidget ל־StatefulWidget כוללת שלושה שלבים:

שנו את extends StatelessWidget ל־extends StatefulWidget, והחליפו את build שלו ב־createState.
כתבו את המחלקה State מתחתיו והעבירו אליה את build ללא שינוי.
העבירו את המשתנה שמשתנה אל מחוץ ל־build, לראש מחלקת State.

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 חשוב. משתנה בראש build נוצר מחדש בכל פעם ש־build רץ, ולכן אחרי setState ערכו יחזור להיות 'Sleepy'. בראש מחלקת State הוא נוצר פעם אחת, ושומר את הערך שנתתם לו.

אתגר

בינוני

הפוך את HomePage ל־StatefulWidget עם מחלקת _HomePageState. שמור את מצב הרוח בתוך String _mood = 'Sleepy'; בראש ה־State, וגרום ל־Drink coffee לשנות אותו ל־'Awake' באמצעות setState.

נסו בעצמכם

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