Полученные данные не отображаются в виджете - PullRequest
Новая
       5

Полученные данные не отображаются в виджете

0 голосов
/ 06 декабря 2018

На моем сервере размещен файл json, который выглядит следующим образом. 

{
  "score": "23/6"
}

Счет постоянно обновляется, и я хочу, чтобы мое приложение флаттера показывало счет в реальном времени.

Флаттеркод здесь: 

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;
var json_score;
var json_overs;

class livee extends StatefulWidget {
  @override
  _liveeState createState() => _liveeState();
}

class _liveeState extends State<livee> {

  final String url = "path_to_my_json";

  @override
  void initState(){
    super.initState();
    this.getJsonData();
  }

  Future<String> getJsonData() async{
    http.Response response = await http.get(
      Uri.encodeFull(url),
      headers: {"Accept" : "application/json"}
    );


     var data = jsonDecode(response.body);
     json_score = data['score'];


     print(json_score.toString());

  }

  @override
  Widget build(BuildContext context) {

    //Status bar
    final status = Text(
        "XYZ College",
        style: TextStyle(fontSize: 12.0, fontWeight: FontWeight.bold),
        textAlign: TextAlign.center);


    final score = Container(
      alignment: Alignment(0.0, 0.0),
      child: Text(json_score.toString(),
          style: TextStyle(
              fontSize: 50.0,
              color: Colors.blueAccent,
              fontWeight: FontWeight.bold)),
    );


    return new Container(
      color: Colors.white,
      height: MediaQuery.of(context).size.height,
      child: ListView(
        shrinkWrap: true,
        children: <Widget>[
          livestatus,
          score,

        ],
      ),
    );
  }
}

Мне удалось получить оценку для моего приложения, но необходимо обновить приложение, чтобы отобразить обновленную оценку.Как я могу сделать это обновление счета с интервалом?

1 Ответ

0 голосов
/ 06 декабря 2018

Здесь есть несколько вещей, которые вам не хватает.

Во-первых, вы сделали свои var json_score; и var json_overs; по существу глобальными переменными, которые, я уверен, были не тем, что вы имели в виду.сделать.Если у вас нет очень конкретной причины, вы, как правило, не должны иметь (неконстантных) переменных вне классов, так как они будут общими для всех экземпляров объекта.

Кроме того, работает виджет с сохранением состояния Flutter:что когда вы изменяете свое состояние, механизм флаттера проверяет, изменился ли объект, и восстанавливает только, если он изменился.Если переменная отсутствует в объекте, объект не будет изменен и, следовательно, не будет перестраиваться.

Другая вещь, которую вы пропускаете, заключается в том, что каждый раз, когда вы меняете «состояние» состоянияобъект, вы должны вызывать setState (...) и выполнять мутацию состояния внутри этой функции.

Я немного исправил ваш код: 

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class Livee extends StatefulWidget {
  @override
  _LiveeState createState() => _LiveeState();
}

class _LiveeState extends State<Livee> {
  final String url = "path_to_my_json";

  var jsonScore;
  var jsonOvers;

  @override
  void initState() {
    super.initState();
    this.getJsonData();
  }

  Future<String> getJsonData() async {
    http.Response response = await http.get(Uri.encodeFull(url), headers: {"Accept": "application/json"});

    var data = jsonDecode(response.body);

    setState(() => jsonScore = data['score']);

    print(jsonScore.toString());
  }

  @override
  Widget build(BuildContext context) {
    //Status bar
    final status =
        Text("XYZ College", style: TextStyle(fontSize: 12.0, fontWeight: FontWeight.bold), textAlign: TextAlign.center);

    final score = Container(
      alignment: Alignment(0.0, 0.0),
      child: Text(jsonScore.toString(),
          style: TextStyle(fontSize: 50.0, color: Colors.blueAccent, fontWeight: FontWeight.bold)),
    );

    return new Container(
      color: Colors.white,
      height: MediaQuery.of(context).size.height,
      child: ListView(
        shrinkWrap: true,
        children: <Widget>[
          livestatus,
          score,
        ],
      ),
    );
  }
}

Это должноработать лучше для вас, хотя я лично посоветовал бы разобраться в том, как разделить результаты поиска на другой класс и подключить его к вашему классу с помощью StreamBuilder, а не как вы это делаете, но это сложнее.

У меня есть несколько других замечаний, связанных не с проблемой, а с вашим кодом в целом.

  1. Когда вы публикуете в StackOverflow, полезно, если вы урезаете код только до проблемы, которую выу васЭтот код был не таким длинным, поэтому его было не сложно разобрать, но если у вас возникла сложная проблема, это может быть проблемой (и чем лучше ваш вопрос, тем больше шансов, что на него ответят быстро и полезно = D)
  2. Я бы порекомендовал прочитать в вашем коде руководство по стилю дротика и / или руководство по флаттеру .Следование стандартам сделает ваш код чище и проще для других людей, что облегчит вам работу с другими людьми (даже если ваш текущий проект только для вас).
  3. Кажется, вы немного пропустили некоторые базовые понятия флаттера.На сайте flutter.io есть несколько действительно хороших учебников - вы, вероятно, сэкономите время и головные боли в долгосрочной перспективе, если потратите немного времени на чтение И написание кода рядом с ним, чтобы следовать учебным пособиямтак вы узнаете намного больше таким образом. Именно этот показывает, как работают виджеты с сохранением состояния.
...