Flutter update Text data in real time

Question

I am very new to Flutter and I'm stuck for an answer.

I want to make a very simple time picker style object without the need for a popover or other interference. So, therefore.....

I have a String object and a Text widget to display that String. The Text widget has a vertical drag gesture recognizer around it. When I drag, I use some calculations to adjust the String's value, with the expectation that this will be shown via the Text widget. This works, except for one major problem.

The Text widget can take 30 seconds or more to change, therefore it is impossible for the user to see the value they are selecting using the drag method.

Is there any way for force the Text widget to display the String when it is changed?

I have tried wrapping just the Text widget within the gesture recognizer, however the touch area is then too small, hence the other Text and the Padding widgets.

child: Padding(
  padding: EdgeInsets.fromLTRB(20,10, 20, 5),
  child: Column(
    children:<Widget>[
      Text("Start of Day",
        style: new TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 16.0,
          color: Colors.black,
        ),
      ),
      Text(_startOfDay,
        style: new TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 16.0,
          color: Colors.black,
        ),
      ),
    ],
  ),
),
onVerticalDragStart: (DragStartDetails details){
  _offset = 0;
},
onVerticalDragUpdate: (DragUpdateDetails moveDetails){
  _offset = _offset + moveDetails.delta.dy;
  if(_offset > 10||_offset < -10){
    var startparts = _startOfDay.split(":");
    double startHour = double.parse(startparts[0]);
    double startMinute = (double.parse(startparts[1]))/15;
    if(_offset > 10){
      startMinute = startMinute - 1;
      if(startMinute < 0){
        startMinute = 3;
        startHour = startHour - 1;
      }
      if(startHour < 0){
        startHour=0;
        startMinute=0;
      }
      _startOfDay = startHour.toInt().toString().padLeft(2,'0')+ ':' + (startMinute * 15).toInt().toString().padLeft(2,'0');
      _offset = _offset - 10;
      globals.startOfDay=_startOfDay;
    }
    if(_offset < -10){
      startMinute = startMinute + 1;
      if(startMinute > 3){
        startMinute = 0;
        startHour = startHour + 1;
      }
      if(startHour == 24){
        startHour=23;
        startMinute=3;
      }
      _startOfDay = startHour.toInt().toString().padLeft(2,'0')+ ':' + (startMinute * 15).toInt().toString().padLeft(2,'0');
      globals.startOfDay=_startOfDay;
      _offset = _offset + 10;
    }
  }
} 

Solution

What you're missing is the setState(...).

When your property changes you need to call setState() to rebuild your widget with the new state of your properties. In this case, you need to call setState whenever the _startOfDay changes.

Try this code:

child: Padding(
  padding: EdgeInsets.fromLTRB(20,10, 20, 5),
  child: Column(
    children:<Widget>[
      Text("Start of Day",
        style: new TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 16.0,
          color: Colors.black,
        ),
      ),
      Text(_startOfDay,
        style: new TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 16.0,
          color: Colors.black,
        ),
      ),
    ],
  ),
),
onVerticalDragStart: (DragStartDetails details){
  _offset = 0;
},
onVerticalDragUpdate: (DragUpdateDetails moveDetails){
  _offset = _offset + moveDetails.delta.dy;
  if(_offset > 10||_offset < -10){
    var startparts = _startOfDay.split(":");
    double startHour = double.parse(startparts[0]);
    double startMinute = (double.parse(startparts[1]))/15;
    if(_offset > 10){
      startMinute = startMinute - 1;
      if(startMinute < 0){
        startMinute = 3;
        startHour = startHour - 1;
      }
      if(startHour < 0){
        startHour=0;
        startMinute=0;
      }
      _startOfDay = startHour.toInt().toString().padLeft(2,'0')+ ':' + (startMinute * 15).toInt().toString().padLeft(2,'0');
      setState(() {});
      _offset = _offset - 10;
      globals.startOfDay=_startOfDay;
    }
    if(_offset < -10){
      startMinute = startMinute + 1;
      if(startMinute > 3){
        startMinute = 0;
        startHour = startHour + 1;
      }
      if(startHour == 24){
        startHour=23;
        startMinute=3;
      }
      _startOfDay = startHour.toInt().toString().padLeft(2,'0')+ ':' + (startMinute * 15).toInt().toString().padLeft(2,'0');
      globals.startOfDay=_startOfDay;
      _offset = _offset + 10;
      setState(() {});
    }
  }
} 

Comments

[Chris Hardaker]

Perfect. Thank you! Sorry I could not find that in the documentation.