简体   繁体   English

如何在框中设置默认颜色并根据输入更改颜色?

[英]How do I set a default color in my box and let the color change depending on input?

I am making an easy math-app for my daughter. 我正在为女儿制作一个简单的数学应用程序。 Right now i have a TextField (with the decorationColor white) that shows a question (like '2+5=') and then she can type in the answer in the same box (displaying '2+5=7'). 现在我有一个显示问题的TextField(装饰颜色为白色)(例如'2 + 5 ='),然后她可以在同一框中键入答案(显示'2 + 5 = 7')。

Below this textField I have another textField. 在此textField下面,我还有另一个textField。 This field puts out the correct answer when the user has tapped a button. 用户点击按钮后,此字段将给出正确答案。 If the user has answere correct, the decorationColors turns green, and if the answer is wrong the decorationColors turns red. 如果用户的回答正确,则装饰颜色变为绿色,如果答案错误,则装饰颜色变为红色。

The problem is that I'm having trouble letting this box being white before the button for correction is being pressed. 问题是,在按下校正按钮之前,我很难让此框变白。 At this moment there is no color until it turns green or red. 此时,直到变为绿色或红色为止,没有颜色。

I have put each box in separate classes right now, so I won't mess up too much if I do something wrong. 我现在将每个框放在单独的类中,所以如果我做错了什么,我也不会太混乱。

Any help putting some color as 'default' to this second box is highly appreciated. 我们非常感谢您对将颜色设置为“默认”到第二个框的任何帮助。 Thank you. 谢谢。

   import 'package:flutter/material.dart';

class CorrectionTextField extends StatelessWidget {
  final String text;
  final boxPaint;

  CorrectionTextField({this.text, this.boxPaint = Colors.white});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(right: 10.0, top: 8.0),
      child: Container(
        constraints: BoxConstraints.expand(height: 60.0, width: 150),
        decoration: BoxDecoration(
          color: boxPaint,
          borderRadius: BorderRadius.all(const Radius.circular(15.0)),
          border: Border.all(color: Colors.black54, width: 4.0),
        ),
        child: Center(
          child:
          Text(text, style: TextStyle(color: Colors.white, fontSize: 
48.0)),
        ),
      ),
    );
  }
}

Next Class: 下一课:

  Color correctionColor = Colors.white;
   var correct = Colors.green;
  var incorrect = Colors.red;
....
  body: Column(
      children: <Widget>[
        operationField,
        correctionField,

You can specify a default value for any instance variable in the constructor, to add a default color you could write: 您可以为构造函数中的任何实例变量指定默认值,以添加可以编写的默认颜色:

CorrectionTextField({
    this.text,
    this.boxPaint = Colors.white,
});

That way, it will be set to white if no color property is specified when instantiating the widget. 这样,如果在实例化窗口小部件时未指定颜色属性,则将其设置为白色。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何更改HTML框角的颜色? - How do I change the color of an HTML box corner? 如何在 PowerShell 控制台中更改默认的连字符属性颜色? - How do I change the default hyphenated properties color in PowerShell console? 如何在Summernote中更改默认的文本突出显示颜色? - How do I change the default text highlighting color in Summernote? 如何根据用户输入更改android应用的背景颜色? - How do I change the background color of my android app based on user input? 如何使用jQuery更改输入border-color,具体取决于其值? - How to change input border-color, with jQuery, depending on its value? 当我设置了通用字体颜色时,如何更改文本颜色? - How do I change text color when I have a universal font color set? 如何更改菜单栏中单击按钮的颜色? - How do I change the color of the clicked button in my menu bar? 如何更改 css 中文本的颜色? - how do i change the color of my text in css? 如何以编程方式更改MFC中组框的默认标题颜色? - How to change default caption color of group box in MFC programmatically? Robocode(java):如何使我的机器人根据getEnergy()的结果更改颜色? - Robocode (java): how can I make my robot change color depending on the result of getEnergy()?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM