更改主题颜色

Question

我想在我的应用程序中更改计数器的颜色。我想这样做：当计数器大于 0 时，将计数器的颜色更改为蓝色。如果计数器小于 0，则将计数器的颜色更改为 red.if 计数器等于 0，将计数器的颜色更改为绿色。可能吗？我只做了 2 种颜色。

这是我的代码:

    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--;
                });
              },
            ),
          ],
        ),
      ),
    );
  }


}

这是我的结果:

Answer 1

这是您实现所需系统的一种方法。我刚刚做了一个 returns 所需颜色的函数。

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--;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

更改主题颜色

Change color of Theme

flutter

flutter-layout

flutter-theme