اكتب StatefulWidget

جزء من قسم إضافة التفاعلية في رحلة Flutter على Coddy. الدرس 12 من 34.

هذه المرة ستكتب StatefulWidget بنفسك. تعرض الشاشة I feel Sleepy، ومن المفترض أن يؤدي الضغط على Drink coffee إلى تغييرها إلى 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، لذا سيعود إلى 'Sleepy' بعد setState. أما في أعلى فئة State، فيُنشأ مرة واحدة ويحتفظ بالقيمة التي تعيّنها له.

التحدي

متوسط

حوِّل HomePage إلى StatefulWidget مع فئة _HomePageState. احتفظ بالمزاج في String _mood = 'Sleepy'; في أعلى الحالة، واجعل 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'),
            ),
          ],
        ),
      ),
    );
  }
}