如何根据flutter中从套接字接收到的值的变化来更改文本颜色

tv6aics1  于 2022-12-19  发布在  Flutter
关注(0)|答案(2)|浏览(104)

我想改变文本背景颜色为红色时,股票的当前价值下跌,绿色时,股票上涨。我正在使用套接字接收流数据的flutter。任何人有什么想法来解决这个问题?我会给予一个例子,我想。
I want my app to function like this
我试图从本地套接字保存当前值,但没有得到预期的结果。
这是我的代码,我想根据值改变颜色:
那么,如何比较来自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,
      );
    },
  ),
),
ylamdve6

ylamdve61#

首先,你需要将之前的值存储在一个变量中,你将使用这个变量来进行比较,你还需要一个变量来相应地改变颜色。

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

然后你需要参考这个值来计算差值并设置颜色。

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

nzkunb0c2#

谢谢你@beckzile的逻辑,我已经解决了这个问题,我初始化的值从流到一个变量与一个沉默的延迟,并比较它与当前流数据,这里是解决的代码:-

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

相关问题