Trying to change text whilst user cursors flutter

Question

I am making a crypto app which gets live crypto data, and puts it into a graph. Once a user toggles on the graph, a variable catches the value, and I try to update the price text to resemble the value.

So the text below "Bitcoin" which on the image displays "51120 $" should display the value of the cursor on the graph (which on the image displays 51185).

When someone cursurs on the graph, I pass a function:

LineTouchTooltipData(
                            
                            getTooltipItems: (touchedSpots) {
                              _aCallbackFunction(touchedSpots[0].y);

We pass the y value of the cursor to the function, so I as shown in the code below, during the build method can set a variable equal to the y value of the cursor.

so variable liveData is equal to the data that we passed to the function.

 @override Widget build(BuildContext context, ) {
void _aCallbackFunction(double data) {
  livePrice = data;
  print(livePrice);
}

As you see in the code above, I print the value, and the value is accurate with the cursors value.

flutter: 51297.961286325546
flutter: 51271.14153804512
flutter: 51070.254057329286
flutter: 50989.604327562614
flutter: 51106.40729916659
etc....

By the widget where I display the price, I have set the text to be the livePrice, hoping it will update its value when we cursor the graph. However, the text stays the same, and does not update its value, even though livePrice variable changes value.

Text(
livePrice.toStringAsFixed(0) + " \$",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold),
),

The widget is stateful. This is my code:

class CoinView extends StatefulWidget {
  final String id;
  final String name;
  final String symbol;
  final String imageUrl;
  dynamic price;
  final dynamic change;
  final dynamic changePercentage;
  final Function getGraphData;
  final List<FlSpot> spotValues;
  final double minValue;
  final double maxValue;
  final DateTime selectedRange;

  CoinView(
      this.id,
      this.name,
      this.symbol,
      this.imageUrl,
      this.price,
      this.change,
      this.changePercentage,
      this.getGraphData,
      this.spotValues,
      this.minValue,
      this.maxValue,
      this.selectedRange);

  @override
  State<CoinView> createState() => _CoinViewState();
}

class _CoinViewState extends State<CoinView> {
  void changeRange(DateTime range) {
    widget.spotValues.clear();
    chartData.clear();
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) {
          return LoadingScreen(
              widget.id,
              widget.name,
              widget.symbol,
              widget.imageUrl,
              widget.price,
              widget.change,
              widget.changePercentage,
              range);
        },
      ),
    );
  }

  late dynamic livePrice = widget.price;

  @override
  List<Color> gradientColors = [
    const Color(0xff23b6e6),
    const Color(0xff02d39a),
  ];

  

  

    @override
      Widget build(BuildContext context) {
        void _aCallbackFunction(double data) {
          livePrice = data;
          print(livePrice);
        }
    
        return Scaffold(
          appBar: AppBar(
            elevation: 0.0,
            backgroundColor: Colors.transparent,
            leading: IconButton(
              icon: Icon(
                Icons.arrow_back,
                color: Colors.white.withOpacity(0.5),
              ),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => MyApp()),
                );
              },
            ),
          ),
          body: Stack(
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Padding(
                            padding: const EdgeInsets.only(top: 20, left: 20),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Container(
                                  
                                  child: Row(
                                    children: [
                                      Container(
                                        height: 30,
                                        child: Image.network(widget.imageUrl),
                                      ),
                                      SizedBox(
                                        width: 10,
                                      ),
                                      Text(
                                        widget.name,
                                        style: TextStyle(
                                            color: Colors.white,
                                            fontSize: 40,
                                            fontWeight: FontWeight.bold),
                                      ),
                                    ],
                                  ),
                                ),
                                SizedBox(height: 20),
                                Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      livePrice.toStringAsFixed(0) + " \$",
                                      style: TextStyle(
                                          fontSize: 30,
                                          fontWeight: FontWeight.bold),
                                    ),

score 0 · Answer 1 · answered Dec 25 '21 at 21:37

0

I'd recommend moving your _aCallbackFunction function outside your build method and calling setState inside that function.

void _aCallbackFunction(double data) {
  setState(() => livePrice = data);
  print(livePrice);
}

@override Widget build(BuildContext context, ) {
  //...
}

answered Dec 25 '21 at 21:37

Roaa

1,212
7
11

Thank you! I tied this, but it did not work since setState was called during build, however, i solved it. When i called the callback function i wrapped it with Future.delayed and set duration to 0 seconds, and now it works! – Victor Kennedy Dec 26 '21 at 21:43

Trying to change text whilst user cursors flutter

1 Answers1