Menu
CoddyTech
flag Ar iconالعربيةdown icon

تعطيل زر بصريًا

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

في درس الزر الأول، جعلت onPressed: null الزر رماديًا. والآن يمكنك تحديد ذلك أثناء تشغيل التطبيق: عيّن الدالة إلى onPressed عندما يكون الزر مناسبًا، وعيّن null عندما لا يكون كذلك.

ElevatedButton(
  onPressed: _count > 0 ? _decrease : null,
  child: const Text('Minus'),
)

يختار ? : بين الطريقة وnull. في كل مرة تعيد فيها setState بناء الشاشة، يُجرى التحقق مجددًا، لذلك يتحول الزر إلى اللون الرمادي ثم يصبح مفعّلًا من تلقاء نفسه.

يُخبر الزر الرمادي الأشخاص بسبب عدم حدوث أي شيء قبل أن ينقروا عليه. أما الزر الذي يمكن الضغط عليه لكنه لا يفعل شيئًا بصمت، فيبدو وكأنه معطّل.

challenge icon

التحدي

سهل

يمكن أن يصبح عدد العناصر في سلة التسوق أقل من الصفر. اجعل زر Remove باهتًا عندما لا توجد عناصر، بحيث لا يمكن الضغط عليه إلا عندما تكون قيمة _items أكبر من 0.

جرّب بنفسك

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 _items = 0;

  void _add() {
    setState(() {
      _items++;
    });
  }

  void _remove() {
    setState(() {
      _items--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Cart')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Items: $_items', style: const TextStyle(fontSize: 24)),
            const SizedBox(height: 16),
            ElevatedButton(onPressed: _add, child: const Text('Add')),
            ElevatedButton(onPressed: _remove, child: const Text('Remove')),
          ],
        ),
      ),
    );
  }
}
quiz iconاختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

جميع دروس إضافة التفاعلية

تدرّب بنفسك: مترجم Flutter عبر الإنترنت