Button in Flutter deaktiviert sich verzögert?

Moin,

ich habe hier eine Seite in Flutter programmiert. Man kann mit zwei Pfeilen (Elevated Buttons) steuern, welches Listenelement angezeigt werden soll. Ist das erste Element erreicht, soll der linke Pfeil ausgeblendet werden. Ist das letzte Element erreicht soll der rechte Button ausgeblendet werden. Das funktioniert auch einigermaßen. Man kann den Button dann direkt nicht mehr drücken, aber der Farbwechsel zu grau, passiert erst verzögert, was besonders stört, wenn man z.B. durch eine Bildergalerie schauen möchte. Ich kann mir leider nicht erklären warum und bin kurz davor die Farbe zusätzlich manuell grau zu machen. Das kann doch aber eigentlich nicht die Lösung sein...

import 'package:flutter/material.dart';


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


  @override
  State<ButtonProblem> createState() => _ButtonProblemState();
}


class _ButtonProblemState extends State<ButtonProblem> {
  late int currentIndex;
  late List<int> list;
  @override
  void initState() {
    super.initState();
    //Liste zum durchgehen
    list = [0, 1, 2, 3, 4, 5, 6];
    currentIndex = 0;
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Button Problem'),
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
      ),
      body: Column(children: [
        SizedBox(
          height: 20,
        ),
        Text("currentIndex: ${currentIndex.toString()}"),
        Text("current list item: ${list[currentIndex].toString()}"),
        SizedBox(
          height: 20,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton(
              onPressed: currentIndex > 0 ? () => navigateToPrevious() : null,
              style: ElevatedButton.styleFrom(
                primary: Colors.blue,
                minimumSize: const Size(150, 50),
              ),
              child: const Icon(Icons.arrow_back, color: Colors.white),
            ),
            ElevatedButton(
              onPressed: (currentIndex < list.length - 1)
                  ? () => navigateToNext()
                  : null,
              style: ElevatedButton.styleFrom(
                primary: Colors.blue,
                minimumSize: const Size(150, 50),
              ),
              child: Icon(Icons.arrow_forward, color: Colors.white),
            ),
          ],
        ),
      ]),
    );
  }


  navigateToPrevious() {
    setState(() {
      currentIndex--;
    });
  }


  navigateToNext() {
    setState(() {
      currentIndex++;
    });
  }
}

Wäre dankbar für jede Hilfe :)

Answer 1

[MasterFAQ]

Das Problem, das du erlebst, liegt daran, wie du den Stil des Buttons mit

ElevatedButton.styleFrom

anpasst. Wenn du die

primary

Farbe (oder

backgroundColor

in neueren Versionen von Flutter) direkt setzt, überschreibst du das standardmäßige Farbverhalten für alle Button-Zustände – einschließlich des deaktivierten Zustands. Das bedeutet, dass wenn der Button deaktiviert wird (wenn

onPressed

auf

null

gesetzt ist), er die blaue Farbe beibehält, anstatt sofort zur deaktivierten (grauen) Farbe zu wechseln. Das führt zu der von dir beobachteten verzögerten visuellen Rückmeldung.

Verwende

MaterialStateProperty

, um festzulegen, wie sich die Hintergrundfarbe des Buttons basierend auf seinem Zustand ändern soll. So kannst du verschiedene Farben für unterschiedliche Zustände angeben und sicherstellen, dass die visuelle Rückmeldung sofort erfolgt, wenn der Button deaktiviert wird.

Comments

[Letstryths]

Das funktioniert, vielen Dank!

[MasterFAQ]

@Letstryths

geil