简体   繁体   中英

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').

Below this textField I have another 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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM