Bir Düğmeyi Pasifleştirme

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

İlk Düğmenizde, onPressed: null bir düğmeyi griye çevirmişti. Artık uygulama çalışırken karar verebilirsiniz: düğme kullanılabilir olduğunda onPressed'e işlevi, kullanılamadığında ise null değerini verin.

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

? :, yöntem ile null arasında seçim yapar. setState ekranı her yeniden oluşturduğunda karşılaştırma yeniden çalışır; böylece düğme kendiliğinden griye döner ve yeniden etkinleşir.

Griye dönmüş bir düğme, dokunmadan önce insanlara neden hiçbir şey olmayacağını anlatır. Basılabilen ama sessizce hiçbir şey yapmayan bir düğme ise bozuk gibi görünür.

Görev

Kolay

Sepetteki ürün sayısı sıfırın altına düşebilir. Ürün olmadığında Remove düğmesini devre dışı bırakın; böylece yalnızca _items 0'dan büyükken basılabilir.

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