enter image description here

En cliquant sur le bouton Aller, je veux que le bouton 1 devienne rouge. Revenez ensuite au blanc. Ensuite, le bouton 2 doit devenir rouge, puis redevient blanc. Puis 3, 4 et ainsi de suite.

Je peux concevoir mon bouton de rappel de sorte que le bouton 1 devienne rouge. Je ne suis pas sûr, comment le ramener au blanc après 2 secondes, puis tourner le bouton suivant en rouge et ainsi de suite.

Main.dart

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final String apptitle = 'Test';

  Widget _goButtonClickCallback() {
    print("hello world. go tapped");
    // How do I control animation inside numListBuilder() from here? 
  }

  @override
  Widget build(BuildContext context) {
    var numList = [
      "1",
      "2",
      "3",
      "4",
      "5",
      "6",
      "7",
      "8",
    ];

    return MaterialApp(
      title: apptitle,
      theme: ThemeData(
        primarySwatch: Colors.deepOrange,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
          appBar: AppBar(
            title: Text(apptitle),
          ),
          body: Column(
            children: [
              NumberListBuilder(numList),
              SizedBox(height: 110),
              GoButton(_goButtonClickCallback)
            ],
          )),
    );
  }
}

NumberListBuilder.dart

import 'package:flutter/material.dart';

class NumberListBuilder extends StatefulWidget {
  final List<String> numberList;
  const NumberListBuilder(this.numberList);

  @override
  _NumberListBuilderState createState() => _NumberListBuilderState();
}

class _NumberListBuilderState extends State<NumberListBuilder> {
  List<TableRow> getButtonRows() {
    // list for all rows
    List<TableRow> rows = [];
    int numCols = 2;
    int numberListLength = widget.numberList.length;
    int numRows = 4

    var k = 0;
    for (var i = 0; i < numRows; i++) {
      List<Widget> rowChildren = [];
      for (var j = 0; j < numCols; j++) {
        rowChildren.add(Container(
            height: 80.0,
            child: FlatButton(
              color: Colors.white70,
              onPressed: () {},
              child: Text(
                widget.numberList[k++],
                style: TextStyle(
                  fontSize: 20.0,
                ),
              ),
            )));
      }
      rows.add(new TableRow(children: rowChildren));
    }
    return rows;
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Table(
        border: TableBorder.all(),
        children: getButtonRows(),
      ),
    );
  }
}
2
Piyush 27 août 2020 à 10:53

2 réponses

Meilleure réponse

Donc, pour expliquer cela simplement, vous devez redessiner toute votre grille toutes les 2 secondes, et dans cette méthode de construction, mettre une condition quant à la boîte à peindre en rouge et celle à peindre en blanc.

Le problème est que vous avez une autre classe qui dessine vos boîtes, mais que vous voulez contrôler comment elle le fait à partir de la classe principale. Cela peut être fait mais c'est compliqué, mieux vaut les mettre dans la même classe. J'ai fait ça pour toi.

Avis de non-responsabilité: Il existe de meilleures façons plus efficaces de le faire, mais cela devrait vous aider à démarrer car j'ai changé le moins possible.

Ce que j'ai changé:

  1. Classe de dessin de boîte J'ai ajouté conditionnel color: k == numberToHighlight-1 ? Colors.red : Colors.white70, ceci vérifie juste si la boîte doit être surlignée en rouge sinon elle est blanche.

  2. Déplacement de l'ensemble de la construction des boîtes dans la classe principale afin que l'état puisse être modifié facilement. En gros, je viens de créer une méthode avec le même nom que votre classe qui construit des boîtes.

  3. État ajouté int numberToHighlight = 0;

  4. Ajout d'une méthode qui s'appelle elle-même après un délai jusqu'à ce qu'elle colorie toutes les cases, puis cesse de s'appeler et réinitialise la valeur à 0.

  5. Changement de GoButton en FlatButton (car vous n'avez pas partagé ce code) ce n'est pas un problème.

Voici tout le code qui fonctionne (modifications minimes du vôtre):

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

      final String apptitle = 'Test';
    
      int numberToHighlight = 0;
    
      var numList = [
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
        ];
    
      void _goButtonClickCallback() {
        print("hello world. go tapped setting ${numberToHighlight}");
            
        if(numberToHighlight < numList.length)
        {
          setState(() {
            numberToHighlight++;
          });
          Future.delayed(const Duration(seconds: 2), _goButtonClickCallback);
        }
        else
        {
          setState(() {
            numberToHighlight = 0;
          });
        }
      }
    
      @override
      Widget build(BuildContext context) {
    
        List<TableRow> getButtonRows() {
          // list for all rows
          List<TableRow> rows = [];
          int numCols = 2;
          int numberListLength = numList.length;
          int numRows = 4;
    
          var k = 0;
          for (var i = 0; i < numRows; i++) {
            List<Widget> rowChildren = [];
            for (var j = 0; j < numCols; j++) {
              rowChildren.add(Container(
                  height: 80.0,
                  child: FlatButton(
                    color: k == numberToHighlight-1 ? Colors.red : Colors.white70,
                    onPressed: () {},
                    child: Text(
                      numList[k++],
                      style: TextStyle(
                        fontSize: 20.0,
                      ),
                    ),
                  )));
            }
            rows.add(new TableRow(children: rowChildren));
          }
          return rows;
        }
    
        Widget numberListbuilder()
        {
          return new Container(
          child: new Table(
            border: TableBorder.all(),
            children: getButtonRows(),
          ),
        );
        }
    
        return MaterialApp(
          title: apptitle,
          theme: ThemeData(
            primarySwatch: Colors.deepOrange,
            visualDensity: VisualDensity.adaptivePlatformDensity,
          ),
          home: Scaffold(
              appBar: AppBar(
                title: Text(apptitle),
              ),
              body: Column(
                children: [
                  numberListbuilder(),
                  SizedBox(height: 110),
                  FlatButton(
                    onPressed: _goButtonClickCallback,
                    child: Text("GO!"),
                    color: Colors.blue,
                  )
                ],
              )),
        );
    }
}
2
Jan 31 août 2020 à 03:50

Salut mon cher sur le bouton aller, vous devez appeler une minuterie d'abord vous définissez la couleur de chaque bouton avant la minuterie vous définissez la couleur sur rouge et la minuterie intérieure définit la couleur sur blanc essayez-le avec 1 bouton et continuez avec les autres de la même manière merci J'espère que cela aidera

 Timer(Duration(seconds: 2),(){
   //set the color 
 });
0
Azad Prajapat 27 août 2020 à 08:07