вернуть цветную коробку после нажатия кнопки - PullRequest
Новая
       22

вернуть цветную коробку после нажатия кнопки

0 голосов
/ 20 февраля 2019

Я пытаюсь научиться трепетать, и сейчас я работаю над щелчками кнопок.

У меня есть очень простая программа ниже, где целая сумма = 5. Если пользователь возвращает 5 в текстовом поле и нажимаетКнопка отправки Моя цель - вернуть зеленый квадрат под кнопкой отправки.Если пользователь напечатает что-нибудь еще, квадрат будет красным.

Я на самом деле понятия не имею, с чего начать, больше, чем в своем коде, поэтому любая помощь, которая направляет меня в правильном направлении, очень ценится.,Спасибо. 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'buttonclicks',
      theme: ThemeData(primarySwatch: Colors.deepOrange),
      home: FirstClass(),
    );
  }
}

class FirstClass extends StatefulWidget {
  @override
  _FirstClassState createState() => _FirstClassState();
}

class _FirstClassState extends State<FirstClass> {
  int sum = 5;
  String enterAnswer;

  void handleCorrect() {
    setState(() {
      Container(
        height: 60.0,
        width: 70.0,
        decoration: BoxDecoration(color: Colors.green),
        child: Text('CORRECT'),
      );
    });
  }

  void handleFalse() {
    setState(() {
      Container(
        height: 60.0,
        width: 70.0,
        decoration: BoxDecoration(color: Colors.red),
        child: Text('FALSE'),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BUTTON-CLICKS'),
      ),
      body: Container(
        child: Center(
          child: Column(
            children: <Widget>[
              Container(
                width: 50.0,
                child: TextField(
                  textAlign: TextAlign.center,
                  autofocus: true,
                  keyboardType: TextInputType.number,
                  onChanged: (val) {
                    enterAnswer = val;
                  },
                ),
              ),
              RaisedButton(
                  child: Text('SUBMIT'),
                  onPressed: () {
                    if (enterAnswer.isNotEmpty) {
                      if (enterAnswer == sum) {
                        handleCorrect();   //setState
                      } else {
                        handleFalse();    //setState
                      }
                    }
                  }),
              Container(
                //handleCorrect or handleFalse
                child: Text("RETURN A GREEN OR A RED BOX"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

1 Ответ

0 голосов
/ 20 февраля 2019

Как насчет чего-то вроде следующего.Вы должны вызвать setState при нажатии кнопки и установить состояние, чтобы определить, какой цвет показывать. 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'buttonclicks',
      theme: ThemeData(primarySwatch: Colors.deepOrange),
      home: FirstClass(),
    );
  }
}

class FirstClass extends StatefulWidget {
  @override
  _FirstClassState createState() => _FirstClassState();
}

class _FirstClassState extends State<FirstClass> {
  int sum = 5;
  String enterAnswer;
  Color containerColor;

  void setColorForAnswer()
  {
    setState(() {
     containerColor = enterAnswer != null && enterAnswer.isNotEmpty
                    ? (int.parse(enterAnswer) == sum
                        ? Colors.green
                        : Colors.red)
                    : Colors.transparent; 
    });
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BUTTON-CLICKS'),
      ),
      body: Container(
        child: Center(
          child: Column(
            children: <Widget>[
              Container(
                width: 50.0,
                child: TextField(
                  textAlign: TextAlign.center,
                  autofocus: true,
                  keyboardType: TextInputType.number,
                  onChanged: (val) {
                    enterAnswer = val;
                  },
                ),
              ),
              RaisedButton(
                  child: Text('SUBMIT'),
                  onPressed: () {
                    setColorForAnswer();
                  }),
              Container(
                width: 50,
                height: 50,
                color: containerColor,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
...