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 🙂

(1 votes)
Loading...

Similar Posts

Subscribe
Notify of
3 Answers
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
MasterFAQ
6 months ago

The problem you experience is how to use the button style

ElevatedButton.styleFrom

fit. If you

primary

color (or

backgroundColor

set directly in newer versions of Flutter), overwrite the standard color behavior for all button states – including the disabled state. This means that if the button is disabled (if

onPressed

on

null

), it maintains the blue color, instead of immediately changing to the deactivated (grey) color. This leads to the delayed visual feedback you observe.

Use

MaterialStateProperty

to determine how to change the background color of the button based on its condition. This allows you to specify different colors for different states and make sure that the visual feedback takes place immediately when the button is disabled.

MasterFAQ
6 months ago
Reply to  Letstryths

horny