Change color of Theme

Question

I wanted to change the color of the counter in my app. I want to do that: change the color of the counter to blue when counter bigger than 0. if counter smaller than 0 change the color of the counter to red.if counter equal to 0 change the color of the counter to green. is it possible? I did just for 2 colors.

it is my codes :

    import 'package:flutter/material.dart';

void main() {
  runApp(Myapp());
}

class Myapp extends StatefulWidget {
  @override
  _MyappState createState() => _MyappState();
}

class _MyappState extends State<Myapp> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Myhomepage(
        title: "My Home Page",
      ),
    );
  }
}

class Myhomepage extends StatefulWidget {
  final String title;

  Myhomepage({this.title});

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

class _MyhomepageState extends State<Myhomepage> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        centerTitle: true,
      ),
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          backgroundColor: Colors.grey[850],
          onPressed: () {
            setState(() {
              counter++;
            });
          }),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text(
                "Increase",
              ),
              color: Colors.green,
              onPressed: () {
                setState(() {
                  counter++;
                });
              },
            ),
            Text("The count of press button:"),
            Text(
              "$counter",
              style: Theme.of(context).textTheme.display2.copyWith(color: counter<=0 ? Colors.red : Colors.blue)

            ),
            RaisedButton(
              child: Text(
                "Decrease",
              ),
              color: Colors.red,
              onPressed: () {
                setState(() {
                  counter--;
                });
              },
            ),
          ],
        ),
      ),
    );
  }


}

it is my results :

Answer 1

Here's one way you can implement the system you want. I just made a function that returns the desired color.

class _MyhomepageState extends State<Myhomepage> {
  int counter = 0;

  Color _getCounterColor() {
    if (counter > 0) return Colors.blue;
    else if (counter < 0) return Colors.red;
    else return Colors.green;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        centerTitle: true,
      ),
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          backgroundColor: Colors.grey[850],
          onPressed: () {
            setState(() {
              counter++;
            });
          }),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text(
                "Increase",
              ),
              color: Colors.green,
              onPressed: () {
                setState(() {
                  counter++;
                });
              },
            ),
            Text("The count of press button:"),
            Text(
              "$counter",
              style: Theme.of(context).textTheme.display2.copyWith(color: _getCounterColor()),
            ),
            RaisedButton(
              child: Text(
                "Decrease",
              ),
              color: Colors.red,
              onPressed: () {
                setState(() {
                  counter--;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}