Skip to main content
7 de 7
se eliminaron 287 caracteres en el cuerpo
Shockz
  • 299
  • 3
  • 16

Como manipular desde un boton el comportamiento o estado de otros widgets

Esta actividad de mi aplicacion consiste en un 1vs1 de a ver quien tiene mejor tiempo de reaccion.

He estado probando varias cosas para que al pulsar un boton cambie de estado los otros dos widgets de mi actividad, dado que los otros dos widgets son StreamBuilders con GestureDetector dentro de ellos...

Concretamente lo que quiero es que al pulsar el boton se cambie el estado de ambos widgets a Estados.Espera (basicamente como si les dieras simultaneamente a ambos a empezar).

Lo que intente fue: usar un booleano que cambie de estado al darle al boton y asi en cada uno de los StreamBuilders cambie de estado , pero no funciono dado que quitando cuando se arranca la actividad y se crean los widgets a partir de ahi solo reaccionan ante Taps(o clicks).

Mi otra idea fue simular un tap en cada widget pero no encontre apenas informacion en Google, así que no consegui hacer eso..

Tengo sospechas de que deberia usar algo como async y await para que los 2 widgets en cuestion esten esperando el cambio de estado del bool que acciona el boton, pero no se como implementarlo a mi caso concreto..

El Funcionamiento de cada Widget StreamBuilder por individual es el siguiente:

Funcionamiento de cada Widget StreamBuilder por individual

Pues mi actividad de momento luce así:

introducir la descripción de la imagen aquí

El codigo de mi clase es : (Editado para reducir codigo a lo mas esencial) (Aqui figura el intento fallido de usar un booleano)

import 'dart:async';
import 'dart:math';
import 'package:provider/provider.dart';
import 'package:reactions/src/funcions/main_highscores.dart';
import 'package:reactions/src/models/estados.dart';
import 'package:reactions/src/models/highscore.dart';
import 'package:reactions/src/models/tipos_modos.dart';
import 'package:flutter/material.dart';
import 'package:reactions/src/funcions/tester.dart';
import 'package:rxdart/rxdart.dart';

// ignore: must_be_immutable
class DosJugadores extends StatefulWidget {
  TiposModos tipo; //Tipod de juego (TEST, ...)

  DosJugadores(this.tipo, {Key key}) : super(key: key);

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

class _DosJugadoresState extends State<DosJugadores> {
  //Variables compartidas
  MaterialColor colorPantalla;

  //Variables jugador 1
  Tester tester;
  String texto = '';
  String textoIntento = '';
  String resultTimeText = '';
  int numeroIntento = 0;
  String textoAvg = '';
  Stopwatch stopwatch;
  Duration tiempoEspera;
  List<double> arrayIntentos = new List();
  Timer _timer = Timer(Duration(minutes: 0), () => {});

  //Variables jugador 2
  Tester tester1;
  String texto1 = '';
  String textoIntento1 = '';
  String resultTimeText1 = '';
  int numeroIntento1 = 0;
  String textoAvg1 = '';
  Stopwatch stopwatch1;
  Duration tiempoEspera1;
  List<double> arrayIntentos1 = new List();
  Timer _timer1 = Timer(Duration(minutes: 0), () => {});
  bool comienzo = false;

  void initState() {
    super.initState();
    tester = Tester();
    tester1 = Tester();
    colorPantalla = Colors.blue;
    numeroIntento = 0;
    numeroIntento1 = 0;
    arrayIntentos = new List();
    arrayIntentos1 = new List();
    comienzo = false;
  }

  @override
  Widget build(BuildContext context) {
    //final MainHighscores mainHighscores = Provider.of<MainHighscores>(context);

    return Column(children: <Widget>[
      stream1(),

       Container(
            height: 50,
            width: MediaQuery.of(context).size.width,
            child: RaisedButton(
              elevation: 12,
              color: Colors.yellow,
              splashColor: Colors.yellow,
              onPressed: () {
        
              },
              child: Text(
                'Test',
                style: TextStyle(
                  fontSize: 40,
                  color: Colors.black,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
          ),
      stream2(),
    ]);
  }

  StreamBuilder<MapEntry<Estados, double>> stream1() {
    return StreamBuilder<MapEntry<Estados, double>>(
        stream: Observable.combineLatest2(
          tester.estados$,
          tester.resultTime$,
          (a, b) => MapEntry(a, b),
        ),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return Container();
          }
          final state = snapshot.data.key;
          final resultTime = snapshot.data.value;
          print("estaods1");
          print(snapshot.data.key);

          unJugadorInfoSet1(state, widget.tipo, resultTime);

          if (comienzo == true) {
            tester.nextScreen(Estados.Espera);
            comienzo = false;
          }
          return GestureDetector(
            onTap: () {
              if (_timer.isActive) {
                _timer.cancel();
                tester.nextScreen(Estados.ErrorToque);
              } else {
                tester.nextScreen(state);
              }
},
            child: RotatedBox(quarterTurns: -2, child: jugador1(state)),
          );
        });
  }

 StreamBuilder<MapEntry<Estados, double>> stream2() {
    return StreamBuilder<MapEntry<Estados, double>>(
        stream: Observable.combineLatest2(
          tester1.estados$,
          tester1.resultTime$,
          (a, b) => MapEntry(a, b),
        ),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return Container();
          }
          final state = snapshot.data.key;
          final resultTime = snapshot.data.value;
          print("estaods2");
          print(snapshot.data.key);
          unJugadorInfoSet2(state, widget.tipo, resultTime);
          if (comienzo == true) {
            tester1.nextScreen(Estados.Espera);
            comienzo = false;
          }
          return GestureDetector(
            onTap: () {
              if (_timer1.isActive) {
                _timer1.cancel();
                tester1.nextScreen(Estados.ErrorToque);
              } else {
                tester1.nextScreen(state);
              }

 },
            child: jugador2(state),
          );
        });
  }
}

int next(int min, int max) => min + Random().nextInt(max - min);

Y la clase Tester es esta:

import 'package:rxdart/rxdart.dart';
import 'package:reactions/src/models/estados.dart';

class Tester {
  Stopwatch _stopwatch = Stopwatch();

  BehaviorSubject<Estados> _estados$;
  BehaviorSubject<Estados> get estados$ => _estados$;

  BehaviorSubject<double> _resultTime$;
  BehaviorSubject<double> get resultTime$ => _resultTime$;

  Tester() {
    _estados$ = BehaviorSubject<Estados>.seeded(Estados.Comienzo);
    _resultTime$ = BehaviorSubject<double>.seeded(0.0);
  }

  void nextScreen(Estados currentState) {
    switch (currentState) {
      case Estados.Comienzo:
        _estados$.add(Estados.Espera);
        break;
      case Estados.Espera:
        _estados$.add(Estados.Toque);
        _stopwatch.start();
        break;
      case Estados.Toque:
        _stopwatch.stop();
        _resultTime$.add(_stopwatch.elapsedMilliseconds.toDouble());
        _estados$.add(Estados.Resultados);
        break;
      case Estados.Resultados:
        _stopwatch.reset();
        _estados$.add(Estados.Comienzo);
        break;
      case Estados.ErrorToque:
        _estados$.add(Estados.ErrorPantalla);
        break;
      case Estados.ErrorPantalla:
        _estados$.add(Estados.Comienzo);
        break;
      default:
        _estados$.add(Estados.Comienzo);
    }
  }

  void dispose() {
    _estados$.close();
    _resultTime$.close();
  }
}

--Si quieren probarlo, dejo esta version completa usando solo main.dart--

import 'package:flutter/material.dart';
import 'package:reactions/src/ui/estadisticas/estatidisticas.dart';

import 'package:provider/provider.dart';
import 'package:reactions/src/funcions/main_highscores.dart';
import 'package:reactions/src/ui/menus/principal.dart';
import 'dart:async';
import 'dart:math';

import 'package:rxdart/rxdart.dart';



void main() => runApp(Reactions());

class Reactions extends StatefulWidget {
  @override
  _Reactions createState() => _Reactions();
}

class _Reactions extends State<Reactions> {
  MainHighscores mainHighscores;

  void initState() {
    mainHighscores = MainHighscores();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Provider<MainHighscores>.value(
        value: mainHighscores,
        child: MaterialApp(
          title: 'Reactions',
          debugShowCheckedModeBanner: false,
          darkTheme: ThemeData(
            //Se indica que el tema tiene un brillo oscuro
            brightness: Brightness.dark,
            //primarySwatch: Colors.pink,
          ),
          routes: {
            '/estadisticas': (context) => Estadisticas(),
            '/home': (context) => MenuPrincipal(),
          },
          theme: ThemeData(fontFamily: 'Asap'),
          home: DosJugadores(TiposModos.Test),
        ));
  }
}


enum TiposModos {
  Test,
  Mejorde3,
  Mejorde5,
}

enum Estados {
  Comienzo,
  Espera,
  Toque,
  ErrorToque,
  ErrorPantalla,
  Resultados,
}







// ignore: must_be_immutable
class DosJugadores extends StatefulWidget {
  TiposModos tipo; //Tipod de juego (TEST, ...)

  DosJugadores(this.tipo, {Key key}) : super(key: key);

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

class _DosJugadoresState extends State<DosJugadores> {
  //Variables compartidas
  MaterialColor colorPantalla;

  //Variables jugador 1
  Tester tester;
  String texto = '';
  String textoIntento = '';
  String resultTimeText = '';
  int numeroIntento = 0;
  String textoAvg = '';
  Stopwatch stopwatch;
  Duration tiempoEspera;
  List<double> arrayIntentos = new List();
  Timer _timer = Timer(Duration(minutes: 0), () => {});

  //Variables jugador 2
  Tester tester1;
  String texto1 = '';
  String textoIntento1 = '';
  String resultTimeText1 = '';
  int numeroIntento1 = 0;
  String textoAvg1 = '';
  Stopwatch stopwatch1;
  Duration tiempoEspera1;
  List<double> arrayIntentos1 = new List();
  Timer _timer1 = Timer(Duration(minutes: 0), () => {});
  bool comienzo = false;

  void initState() {
    super.initState();
    tester = Tester();
    tester1 = Tester();
    colorPantalla = Colors.blue;
    numeroIntento = 0;
    numeroIntento1 = 0;
    arrayIntentos = new List();
    arrayIntentos1 = new List();
    comienzo = false;
  }

  @override
  Widget build(BuildContext context) {

    return Column(children: <Widget>[
      stream1(),

       Container(
            height: 50,
            width: MediaQuery.of(context).size.width,
            child: RaisedButton(
              elevation: 12,
              color: Colors.yellow,
              splashColor: Colors.yellow,
              onPressed: () {
        
              },
              child: Text(
                'Test',
                style: TextStyle(
                  fontSize: 40,
                  color: Colors.black,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
          ),
      stream2(),
    ]);
  }

  StreamBuilder<MapEntry<Estados, double>> stream1() {
    return StreamBuilder<MapEntry<Estados, double>>(
        stream: Observable.combineLatest2(
          tester.estados$,
          tester.resultTime$,
          (a, b) => MapEntry(a, b),
        ),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return Container();
          }
          final state = snapshot.data.key;
          final resultTime = snapshot.data.value;
          print("estaods1");
          print(snapshot.data.key);

          unJugadorInfoSet1(state, widget.tipo, resultTime);

          if (comienzo == true) {
            tester.nextScreen(Estados.Espera);
            comienzo = false;
          }
          return GestureDetector(
            onTap: () {
              if (_timer.isActive) {
                _timer.cancel();
                tester.nextScreen(Estados.ErrorToque);
              } else {
                tester.nextScreen(state);
              }
            },
            child: RotatedBox(quarterTurns: -2, child: jugador1(state)),
          );
        });
  }

  StreamBuilder<MapEntry<Estados, double>> stream2() {
    return StreamBuilder<MapEntry<Estados, double>>(
        stream: Observable.combineLatest2(
          tester1.estados$,
          tester1.resultTime$,
          (a, b) => MapEntry(a, b),
        ),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return Container();
          }
          final state = snapshot.data.key;
          final resultTime = snapshot.data.value;
          print("estaods2");
          print(snapshot.data.key);
          unJugadorInfoSet2(state, widget.tipo, resultTime);
          if (comienzo == true) {
            tester1.nextScreen(Estados.Espera);
            comienzo = false;
          }
          return GestureDetector(
            onTap: () {
              if (_timer1.isActive) {
                _timer1.cancel();
                tester1.nextScreen(Estados.ErrorToque);
              } else {
                tester1.nextScreen(state);
              }

            },
            child: jugador2(state),
          );
        });
  }

  //Gestion de textos de los estados Jugador 1
  void unJugadorInfoSet1(Estados state, TiposModos tipo, double resultTime) {
    switch (state) {
      case Estados.Comienzo:
        colorPantalla = Colors.blue;
        texto = "Dale para comenzar!!";
        break;

      case Estados.Espera:
        colorPantalla = Colors.pink;

        texto = "Pulsa cuando la pantalla se ponga verde";

        tiempoEspera = Duration(milliseconds: next(1500, 5500));
        _timer = Timer(tiempoEspera, () => tester.nextScreen(state));
        break;

      case Estados.Toque:
        colorPantalla = Colors.green;
        texto = "Dalee!";
        break;

      case Estados.Resultados:
        colorPantalla = Colors.blue;
        texto = "Tu tiempo de reacción fue:";
        resultTimeText = resultTimeTest(resultTime);
        if (TiposModos.Mejorde3 == tipo) {
          textoIntento = "Intento " + (numeroIntento + 1).toString() + "/3";
          if (numeroIntento == 2)
            textoAvg =
                "Media(AVG): " + getAverageText(widget.tipo, numeroIntento);
        } else if (TiposModos.Mejorde5 == tipo) {
          textoIntento = "Intento " + (numeroIntento + 1).toString() + "/5";
          if (numeroIntento == 4)
            textoAvg =
                "Media(AVG): " + getAverageText(widget.tipo, numeroIntento);
        }
        break;

      case Estados.ErrorPantalla:
        colorPantalla = Colors.red;
        texto = "Muy pronto!!";
        break;

      default:
        colorPantalla = Colors.blue;
        texto = "Dale para comenzar!!";
    }
  }

//Gestion de textos de los estados Jugador 2
  void unJugadorInfoSet2(Estados state, TiposModos tipo, double resultTime) {
    switch (state) {
      case Estados.Comienzo:
        colorPantalla = Colors.blue;
        texto1 = "Dale para comenzar!!";
        break;

      case Estados.Espera:
        colorPantalla = Colors.pink;

        texto1 = "Pulsa cuando la pantalla se ponga verde";

        tiempoEspera1 = Duration(milliseconds: next(1500, 5500));
        _timer1 = Timer(tiempoEspera1, () => tester1.nextScreen(state));
        break;

      case Estados.Toque:
        colorPantalla = Colors.green;
        texto1 = "Dalee!";

        break;

      case Estados.Resultados:
        colorPantalla = Colors.blue;
        texto1 = "Tu tiempo de reacción fue:";
        resultTimeText1 = resultTimeTest(resultTime);
        if (TiposModos.Mejorde3 == tipo) {
          textoIntento1 = "Intento " + (numeroIntento1 + 1).toString() + "/3";
          if (numeroIntento1 == 2)
            textoAvg =
                "Media(AVG): " + getAverageText(widget.tipo, numeroIntento1);
        } else if (TiposModos.Mejorde5 == tipo) {
          textoIntento1 = "Intento " + (numeroIntento1 + 1).toString() + "/5";
          if (numeroIntento1 == 4)
            textoAvg =
                "Media(AVG): " + getAverageText(widget.tipo, numeroIntento1);
        }
        break;

      case Estados.ErrorPantalla:
        colorPantalla = Colors.red;
        texto1 = "Muy pronto!!";
        break;

      default:
        colorPantalla = Colors.blue;
        texto1 = "Dale para comenzar!!";
    }
  }

//Encargada de diferenciar entre s y ms, y transformar el valor obtenido para modo Test//
  String resultTimeTest(double resultTime) {
    String resultTimeFinal = (resultTime / 1000).toStringAsFixed(3);
    if (resultTime < 1000) {
      resultTimeFinal = resultTimeFinal + " ms!";
    } else {
      resultTimeFinal = resultTimeFinal + " segundos!";
    }
    return resultTimeFinal;
  }

  double getAverage(TiposModos tipo, int numIntento) {
    double averageFinal = 0;

    if (tipo == TiposModos.Mejorde3 && numIntento == 3) {
      var sum = arrayIntentos.reduce((a, b) => a + b);
      averageFinal = sum / 3;
    } else if (tipo == TiposModos.Mejorde5 && numIntento == 5) {
      var sum = arrayIntentos.reduce((a, b) => a + b);
      averageFinal = sum / 5;
    }

    averageFinal = averageFinal / 1000;
    averageFinal = double.parse(averageFinal.toStringAsFixed(3));
    averageFinal = averageFinal * 1000;

    return averageFinal;
  }

  String getAverageText(TiposModos tipo, int numIntento) {
    String averageFinalText = '';
    double average = 0;

    if (tipo == TiposModos.Mejorde3 && numIntento == 2) {
      var sum = arrayIntentos.reduce((a, b) => a + b);
      average = sum / 3;
    } else if (tipo == TiposModos.Mejorde5 && numIntento == 4) {
      var sum = arrayIntentos.reduce((a, b) => a + b);
      average = sum / 5;
    }

    if (average < 1000) {
      averageFinalText =
          (average / 1000).toStringAsFixed(3).split('.')[1].substring(0, 3) +
              " ms!";
    } else {
      averageFinalText = average.toStringAsFixed(3) + " Segundos!";
    }

    if (average == 0) {
      return '';
    } else {
      return averageFinalText;
    }
  }

//Layout del Jugador 1
  Material jugador1(Estados state) {
    return Material(
      color: colorPantalla,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            // height: MediaQuery.of(context).size.height / 2.8,
            height: MediaQuery.of(context).size.height / 2.83,
            width: MediaQuery.of(context).size.width,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  padding: EdgeInsets.only(top: 110.0),
                  child: Text(
                    texto,
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 30,
                      color: Colors.white,
                    ),
                  ),
                ),
                Container(
                  child: Align(
                    alignment: Alignment.center,
                    child: Text(
                      (state == Estados.Resultados) ? resultTimeText : "",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 30,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          Container(
              margin: const EdgeInsets.only(bottom: 20.0),
              child: Align(
                alignment: Alignment.bottomCenter,
                child: Text(
                  (state == Estados.Resultados) ? textoIntento : "",
                  style: TextStyle(
                    fontSize: 30,
                    color: Colors.white,
                  ),
                ),
              )),
          Container(
              width: MediaQuery.of(context).size.width / 1.1,
              child: Align(
                alignment: Alignment.bottomCenter,
                child: Text(
                  (state == Estados.Resultados) ? textoAvg : "",
                  style: TextStyle(
                    fontSize: 30,
                    color: Colors.white,
                  ),
                ),
              )),
        ],
      ),
    );
  }

//Layout del Jugador 2
  Material jugador2(Estados state) {
    return Material(
      color: colorPantalla,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            height: MediaQuery.of(context).size.height / 2.8,
            width: MediaQuery.of(context).size.width,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  padding: EdgeInsets.only(top: 110.0),
                  child: Text(
                    texto1,
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 30,
                      color: Colors.white,
                    ),
                  ),
                ),
                Container(
                  child: Align(
                    alignment: Alignment.center,
                    child: Text(
                      (state == Estados.Resultados) ? resultTimeText1 : "",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 30,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          Container(
              margin: const EdgeInsets.only(bottom: 20.0),
              child: Align(
                alignment: Alignment.bottomCenter,
                child: Text(
                  (state == Estados.Resultados) ? textoIntento1 : "",
                  style: TextStyle(
                    fontSize: 30,
                    color: Colors.white,
                  ),
                ),
              )),
          Container(
              width: MediaQuery.of(context).size.width / 1.1,
              child: Align(
                alignment: Alignment.bottomCenter,
                child: Text(
                  (state == Estados.Resultados) ? textoAvg1 : "",
                  style: TextStyle(
                    fontSize: 30,
                    color: Colors.white,
                  ),
                ),
              )),
        ],
      ),
    );
  }
}

int next(int min, int max) => min + Random().nextInt(max - min);



class Tester {
  Stopwatch _stopwatch = Stopwatch();

  BehaviorSubject<Estados> _estados$;
  BehaviorSubject<Estados> get estados$ => _estados$;

  BehaviorSubject<double> _resultTime$;
  BehaviorSubject<double> get resultTime$ => _resultTime$;

  Tester() {
    _estados$ = BehaviorSubject<Estados>.seeded(Estados.Comienzo);
    _resultTime$ = BehaviorSubject<double>.seeded(0.0);
  }

  void nextScreen(Estados currentState) {
    switch (currentState) {
      case Estados.Comienzo:
        _estados$.add(Estados.Espera);
        break;
      case Estados.Espera:
        _estados$.add(Estados.Toque);
        _stopwatch.start();
        break;
      case Estados.Toque:
        _stopwatch.stop();
        _resultTime$.add(_stopwatch.elapsedMilliseconds.toDouble());
        _estados$.add(Estados.Resultados);
        break;
      case Estados.Resultados:
        _stopwatch.reset();
        _estados$.add(Estados.Comienzo);
        break;
      case Estados.ErrorToque:
        _estados$.add(Estados.ErrorPantalla);
        break;
      case Estados.ErrorPantalla:
        _estados$.add(Estados.Comienzo);
        break;
      default:
        _estados$.add(Estados.Comienzo);
    }
  }

  void dispose() {
    _estados$.close();
    _resultTime$.close();
  }
}


Gracias de antemano.

Shockz
  • 299
  • 3
  • 16