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.

Answer 1

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