How can I change text color accordingly to the change in value receiving from socket in flutter-CodePudding

I want to change the text background color to red when the current value for stock goes down and green color when stock goes up. I am using socket to receive stream data in flutter. Anyone has any idea to solve this? I will give an example of which I want.

I want my app to function like this

I tried to save the current value from socket locally but I didn’t get the expected result.

This is my code, I want to change the color according to the value:

So how do I compare the current value from socket?

SizedBox(
  width: deviceWidth / 8.101,
  height: deviceHieght / 17.14,
  child: StreamBuilder(
    stream: streamSocket.getGoldAskPriceResponse,
    initialData: 000,
    builder: (context, snapshot) {
      return Text(
        snapshot.data!.toString(),
        style: roboto(
          deviceWidth / 35.55,
          FontWeight.w600,
          FontStyle.normal,
          Colors.white,
        ),
        textAlign: TextAlign.left,
      );
    },
  ),
),

CodePudding user response：

First of all, you need to store the previous value in a variable that you will be using to compare. You also need to have a variable to change the color accordingly.

var lastPrice = 0;
Color color = Colors.transparent;

And then you need to refer to this value to calculate the difference and set the color.

SizedBox(
  width: deviceWidth / 8.101,
  height: deviceHieght / 17.14,
  child: StreamBuilder(
    stream: streamSocket.getGoldAskPriceResponse,
    initialData: 000,
    builder: (context, snapshot) {
      final change = snapshot.data ?? lastPrice - lastPrice;
      if (change > 0) color = Colors.green;
      if (change < 0) color = Colors.red;
      // Remove this line if you prefer to keep the previous color
      if (change == 0) color = Colors.transparent;
      lastPrice = snapshot.data ?? 0;
      return Container(
        color: color,
        child: Text(
          snapshot.data!.toString(),
          style: roboto(
            deviceWidth / 35.55,
            FontWeight.w600,
            FontStyle.normal,
            Colors.white,
          ),
          textAlign: TextAlign.left,
        ),
      );
    },
  ),
),

CodePudding user response：

Thank you @beckzile for your logic,I have solved the issue,I initialized the value from stream to a variable with a slient delay and compared it with the current stream data,here is the solved code:-

             SizedBox(
              width: deviceWidth / 8.101,
              height: deviceHieght / 17.14,
              child: StreamBuilder(
                stream: streamSocket.getGoldAskPriceResponse,
                initialData: 000,
                builder: (context, snapshot) {
                  Future.delayed(const Duration(milliseconds: 200),() => lastPrice == snapshot.data);
                  print("last price"   lastPrice.toString());

                  final change = snapshot.data ?? lastPrice;
                  if (change > lastPrice) color = Colors.green;
                  if (change < lastPrice) color = Colors.red;

                  print("change"   change.toString());
                  // Remove this line if you prefer to keep the previous color
                  if (change == lastPrice) color = Colors.transparent;
                  lastPrice = snapshot.data ?? 0;
                  return Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(6),
                        border: Border.all(
                          color: const Color.fromRGBO(96, 101, 130, 0.5),
                          width: 1,
                        ),
                        color: color),
                    child: Text(
                      snapshot.data!.toString(),
                      style: roboto(
                        deviceWidth / 35.55,
                        FontWeight.w600,
                        FontStyle.normal,
                        Colors.white,
                      ),
                      textAlign: TextAlign.center,
                    ),
                  );