Why does text widget not update when variable inside it changes?

Question

In my code, I want to create a simple counter that is triggered when a button on another page is clicked. I create the counter on the button page and then send it to the main page where it is displayed.

void onTap() {

    Widget displayWidget() {
      int drinks = 0;
      return Container(
        child: InkWell(
          child: Stack(
            alignment: Alignment.center,
            children: <Widget>[
              Container(child: Image(image: AssetImage('Images/HabitBars/pinkBar.png'))),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Text("Target: ${glasses.toString()}"),
                  Container(
                    child: Row(
                      children: <Widget>[
                        IconButton(
                            icon: Icon(Icons.remove),
                            onPressed: () {
                              setState(() {
                                drinks--;
                              });
                            }
                        ),
                        Text(drinks.toString()),
                        IconButton(
                            icon: Icon(Icons.add),
                            onPressed: () {
                              setState(() {
                                drinks++;
                              });
                            }
                        ),
                      ],
                    ),
                  )
                ],
              )
            ],
          ),
        ),
      );
    }

    Navigator.push(context, MaterialPageRoute(builder: (context) => MainPage(displayWidget())));

  }

This is the function that is called when the button is pressed.

The code for MainPage is below

import 'package:flutter/material.dart';
import './NewHabitPage.dart';
import 'gloabals.dart' as globals;

class MainPage extends StatefulWidget {
  Widget habit;
  MainPage(this.habit);
  @override
  State createState() => MainPageState(newHabit: habit);
}

class MainPageState extends State<MainPage> {

   Widget newHabit;

  MainPageState({this.newHabit}) {
    if (newHabit != null) {
      globals.habits.add(newHabit);
    }
  }


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: Text("Your Habits", style: TextStyle(color: Colors.green, fontFamily: 'Raleway', fontSize: 30.0), textAlign: TextAlign.center,),
          leading: IconButton(icon: Icon(Icons.dehaze, color: Colors.green,), onPressed: () => print("YEET")),
          backgroundColor: Colors.white,
          elevation: 0.0,
          centerTitle: true,
        ),
        bottomNavigationBar: GestureDetector(
          onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => NewHabitPage())),
          child: Container(
              child: Image(image: AssetImage('Images/newHabit.png')),
          ),
        ),
        body: HabitView(habits: globals.habits,),
      ),
    );
  }
}

class HabitView extends StatefulWidget {
  List<Widget> habits;
  HabitView({@required this.habits});

  @override
  State createState() => HabitViewState(habits: habits);
}

class HabitViewState extends State<HabitView> {

  HabitViewState({@required this.habits});
  List<Widget> habits;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: ListView.builder(
          itemBuilder: (context, i) {
            if (habits.length == 0){
              return Center(
                  child: Padding(
                    padding: const EdgeInsets.all(50.0),
                    child: Text("Wow such empty", style: TextStyle(color: Colors.grey, fontSize: 15.0),),
                  ));
            } else {
              return habits[i];
            }
          },
          itemCount: habits.length == 0? 1 : habits.length,
      ),
    );
  }
}

Globals is a file where i store global variables. Currently the only global variable is a widget list that i use for listview.builder, it is called globals.habits.

The issue is when I send the widget from onTap to MainPage, on clicking the icon button the text(it uses the drinks variable) doesn't change despite the drinks variable changing.

I'm quiet new to flutter so am not sure about how to some things work.

Fakhri Nurfauzan · Accepted Answer · 2019-07-31 08:03:57Z

1

Try using provider. Your problem is similar with flutter - UI change ONLY Take Effect if tap another element

answered Jul 31, 2019 at 8:03

Fakhri Nurfauzan

961 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Augustin R Over a year ago

Well he can also use redux, blocs...

Aryaman Arora Over a year ago

Thanks! I fixed the problem with a different method though - I made the widget in the ontap() function a different class.

Collectives™ on Stack Overflow

Why does text widget not update when variable inside it changes?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related