Обновление флаттера текстовых данных в режиме реального времени

Question

Я очень новичок во Флаттере и застрял в ответе.

Я хочу сделать очень простой объект стиля выбора времени без необходимости всплывающих окон или других помех. Поэтому .....

У меня есть объект String и виджет Text для отображения этого String. Виджет Text имеет распознаватель жестов вертикального перетаскивания. Когда я перетаскиваю, я использую некоторые вычисления для корректировки значения String, ожидая, что это будет показано через виджет Text. Это работает, за исключением одной серьезной проблемы.

Виджет Text может измениться на 30 секунд или более, поэтому пользователь не может увидеть значение, которое он выбирает с помощью метода перетаскивания.

Есть ли способ заставить виджет Text отображать строку при ее изменении?

Я пытался обернуть только виджет Text в распознаватель жестов, однако область касания затем слишком маленький, следовательно, другие виджеты Text и Padding.

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;
    }
  }
} 

Answer 1

То, что вам не хватает, это setState(...).

Когда ваше свойство изменяется, вам нужно вызвать setState(), чтобы перестроить ваш виджет с новым состоянием ваших свойств. В этом случае вам нужно звонить setState всякий раз, когда меняется _startOfDay.

Попробуйте этот код:

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(() {});
    }
  }
}