当我调用数据时,我的api总是返回null

当我调用数据时,我的api总是返回null,api,flutter,flutter-layout,flutter-dependencies,Api,Flutter,Flutter Layout,Flutter Dependencies,我正在调用下面的api: { "1": { "data": { "sensors": { "fuel": [ { "sensor_value": 2.9081154, "se

我正在调用下面的api:

{
    "1": {
        "data": {
            "sensors": {
                "fuel": [
                    {
                        "sensor_value": 2.9081154,
                        "sensor_unit": "m",
                        "percentage": 83.09,
                        "value": 48705.07,
                        "unit": "L",
                        "status": "normal",
                        "sensor": "fuel",
                        "name": "main_fuel"
                    }
                ],
                "battery": [
                    {
                        "voltage": 4005,
                        "value": 100,
                        "status": "normal",
                        "unit": "%",
                        "sensor": "battery"
                    }
                ]
            },
            "latitude": null,
            "longitude": null,
            "speed": null,
            "ignition": null,
            "voltage": null,
            "gsm": null,
            "satellites": null,
            "tracked_at": "2020-11-23 03:35:47",
            "tracker": "jejaka",
            "temperature": null
        }
    },
    "2": {
        "data": {
            "sensors": {
                "fuel": [
                    {
                        "sensor_value": 2.90697352,
                        "sensor_unit": "m",
                        "percentage": 83.06,
                        "value": 48687.99,
                        "unit": "L",
                        "status": "normal",
                        "sensor": "fuel",
                        "name": "main_fuel"
                    }
                ],
                "battery": [
                    {
                        "voltage": 3901,
                        "value": 100,
                        "status": "normal",
                        "unit": "%",
                        "sensor": "battery"
                    }
                ]
            },
            "latitude": null,
            "longitude": null,
            "speed": null,
            "ignition": null,
            "voltage": null,
            "gsm": null,
            "satellites": null,
            "tracked_at": "2020-11-23 03:44:02",
            "tracker": "jejaka",
            "temperature": null
        }
    }
}
以下是我的api调用:

class Services{

  // ignore: missing_return
  static Future<Map<String, Tank>> fetchData() async {

    String url = 'http://192.168.10.17/api/device';
    Future<SharedPreferences> _prefs = SharedPreferences.getInstance();
    final SharedPreferences prefs = await _prefs;
    final token = prefs.getString('access_token');
    final response = await http.get(url, headers: {
      'Authorization': 'Bearer $token'
    });

    print('Token: $token');

    if(response.statusCode == 200) {
     final tank = tankFromJson(response.body);
     return tank;
    }else if(response.statusCode == 400) {
      print('Connection to server is bad');
    }else if(response.statusCode == 500){
      print('No authorization');
    }
  }
}
下面是我如何实现代码的。api位于listview中。我曾尝试将其放在未来的生成器中,但出现错误:

class TankCard extends StatefulWidget {
  @override
  _TankCardState createState() => _TankCardState();
}

class _TankCardState extends State<TankCard> {
  final _tankRepository = Services();
  Tank tank;

  initState() {
    Services.fetchData().then((tank){
      setState((){
        tank = tank;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      padding: EdgeInsets.all(0),
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      itemCount: 2,
      itemBuilder: (BuildContext context, int index){
        return Column(
          children: [
            Container(
              margin: EdgeInsets.only(top: 10),
              width: MediaQuery.of(context).size.width * 1.1,
              child: Card(
                child: Column(
                  children: [
                    Container(
                      padding: EdgeInsets.only(top: 12),
                      child: Center(
                        child: Text('Tank 1 - Bukit Tinggi',
                        style: TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.w600
                          )),
                        )
                      ),

                    Container(
                      padding: EdgeInsets.all(10),
                      child: SvgPicture.asset(
                        'assets/tank-icon-fill.svg',
                        // width: 50,
                      )
                    ),

                    Container(
                      margin: EdgeInsets.fromLTRB(0, 5, 5, 0),
                      child: Column(
                        children: [
                          Wrap(
                            children: [
                              Icon(Icons.bolt),
                              Container(
                                margin: EdgeInsets.only(top: 4),
                                child: Text('${tank.data.sensors.battery[0].value.toString()}%')
                              )
                            ],
                          ),
                          Container(
                            margin: EdgeInsets.only(left: 15),
                            child: Text('Battery', style: TextStyle(
                              fontSize: 10,
                              fontWeight: FontWeight.w300,
                            ),),
                          )
                        ],
                      ),
                    ),
class TankCard扩展StatefulWidget{
@凌驾
_TankCardState createState();
}
类_TankCardState扩展状态{
最终_tankRepository=Services();
油罐;
initState(){
Services.fetchData().then((储罐){
设置状态(){
油箱=油箱;
});
});
super.initState();
}
@凌驾
小部件构建(构建上下文){
返回ListView.builder(
填充:边缘集。全部(0),
收缩膜:对,
物理学:NeverscrollableScroll物理学(),
物品计数:2,
itemBuilder:(构建上下文,int索引){
返回列(
儿童:[
容器(
页边空白:仅限边集(前10页),
宽度:MediaQuery.of(context).size.width*1.1,
孩子:卡片(
子:列(
儿童:[
容器(
填充:仅限边缘设置(顶部:12),
儿童:中心(
子项:文本('Tank 1-Bukit Tinggi',
样式:TextStyle(
尺寸:14,
fontWeight:fontWeight.w600
)),
)
),
容器(
填充:边缘设置。全部(10),
子项:SvgPicture.asset(
“资产/储罐图标填充.svg”,
//宽度:50,
)
),
容器(
边距:从LTRB(0,5,5,0)开始的边距集,
子:列(
儿童:[
包裹(
儿童:[
图标(图标.螺栓),
容器(
页边距:仅限边集(顶部:4),
子项:文本(“${tank.data.sensors.battery[0].value.toString()}%”)
)
],
),
容器(
边距:仅限边距组(左:15),
子项:文本('电池'),样式:文本样式(
尺寸:10,
fontWeight:fontWeight.w300,
),),
)
],
),
),
我从这个url得到的坦克型号->

如果您有任何帮助,我们将不胜感激。

如何在颤振中使用JSON调试此类问题:

  • 在解析对象之前,通过记录响应来检查与API的连接是否正确
  • 在返回值之前,通过在您的案例中记录object.toString().print(tank.toString())来检查您解析的对象是否正确(AKA,notnull)
  • 在Main中检查返回的值是否不为null
  • 检查/理解您的JSON,一步一步地尝试一次更深一层(首先打印完整的对象,然后打印tank.1)

  • 如果您按照以下步骤操作,您将发现它不起作用的地方

    如何在颤振中使用JSON调试此类问题:

  • 在解析对象之前,通过记录响应来检查与API的连接是否正确
  • 在返回值之前,通过在您的案例中记录object.toString().print(tank.toString())来检查您解析的对象是否正确(AKA,notnull)
  • 在Main中检查返回的值是否不为null
  • 检查/理解您的JSON,一步一步地尝试一次更深一层(首先打印完整的对象,然后打印tank.1)

  • 如果按照此步骤操作,您将发现它不起作用的地方

    您可以复制下面的粘贴运行完整代码
    步骤1:使用
    bool
    isLoading
    检查数据是否准备就绪
    步骤2:使用地图有效载荷 步骤3:在
    列表视图中
    使用
    int no=index+1;
    ,因为
    Map
    数据是
    “1”
    “2”

    步骤4:使用
    ${payload[no.toString().trim()].data.sensors.battery[0].value.toString()}

    代码片段

      Map<String, Tank> payload;
      bool isLoading = true;
    
      initState() {
        Services.fetchData().then((tank) {
          setState(() {
            payload = tank;
            print(payload.toString());
            print(payload["1"].data.sensors.battery[0].value.toString());
            isLoading = false;
          });
        });
    ...     
     return isLoading
            ? CircularProgressIndicator()
            : ListView.builder(
                padding: EdgeInsets.all(0),
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemCount: 2,
                itemBuilder: (BuildContext context, int index) {
                  int no = index + 1;
    ...
    child: Text(
                            '${payload[no.toString().trim()].data.sensors.battery[0].value.toString()}%'))
                  ],              
    
    Map有效载荷;
    bool isLoading=true;
    initState(){
    Services.fetchData().then((储罐){
    设置状态(){
    有效载荷=油箱;
    打印(payload.toString());
    打印(有效负载[“1”].data.sensors.battery[0].value.toString());
    isLoading=false;
    });
    });
    ...     
    返回卸载
    ?循环压缩机指示器()
    :ListView.builder(
    填充:边缘集。全部(0),
    收缩膜:对,
    物理学:NeverscrollableScroll物理学(),
    物品计数:2,
    itemBuilder:(构建上下文,int索引){
    int no=索引+1;
    ...
    子:文本(
    “${payload[no.toString().trim()].data.sensors.battery[0].value.toString()}%”
    ],              
    
    工作演示

    完整代码

    import 'package:flutter/material.dart';
    import 'package:flutter_svg/svg.dart';
    import 'dart:convert';
    import 'package:http/http.dart' as http;
    
    Map<String, Tank> tankFromJson(String str) => Map.from(json.decode(str))
        .map((k, v) => MapEntry<String, Tank>(k, Tank.fromJson(v)));
    
    String tankToJson(Map<String, Tank> data) => json.encode(
        Map.from(data).map((k, v) => MapEntry<String, dynamic>(k, v.toJson())));
    
    class Tank {
      Tank({
        this.data,
      });
    
      Data data;
    
      factory Tank.fromJson(Map<String, dynamic> json) => Tank(
            data: Data.fromJson(json["data"]),
          );
    
      Map<String, dynamic> toJson() => {
            "data": data.toJson(),
          };
    }
    
    class Data {
      Data({
        this.sensors,
        this.latitude,
        this.longitude,
        this.speed,
        this.ignition,
        this.voltage,
        this.gsm,
        this.satellites,
        this.trackedAt,
        this.tracker,
        this.temperature,
      });
    
      Sensors sensors;
      dynamic latitude;
      dynamic longitude;
      dynamic speed;
      dynamic ignition;
      dynamic voltage;
      dynamic gsm;
      dynamic satellites;
      DateTime trackedAt;
      String tracker;
      dynamic temperature;
    
      factory Data.fromJson(Map<String, dynamic> json) => Data(
            sensors: Sensors.fromJson(json["sensors"]),
            latitude: json["latitude"],
            longitude: json["longitude"],
            speed: json["speed"],
            ignition: json["ignition"],
            voltage: json["voltage"],
            gsm: json["gsm"],
            satellites: json["satellites"],
            trackedAt: DateTime.parse(json["tracked_at"]),
            tracker: json["tracker"],
            temperature: json["temperature"],
          );
    
      Map<String, dynamic> toJson() => {
            "sensors": sensors.toJson(),
            "latitude": latitude,
            "longitude": longitude,
            "speed": speed,
            "ignition": ignition,
            "voltage": voltage,
            "gsm": gsm,
            "satellites": satellites,
            "tracked_at": trackedAt.toIso8601String(),
            "tracker": tracker,
            "temperature": temperature,
          };
    }
    
    class Sensors {
      Sensors({
        this.fuel,
        this.battery,
      });
    
      List<Fuel> fuel;
      List<Battery> battery;
    
      factory Sensors.fromJson(Map<String, dynamic> json) => Sensors(
            fuel: List<Fuel>.from(json["fuel"].map((x) => Fuel.fromJson(x))),
            battery:
                List<Battery>.from(json["battery"].map((x) => Battery.fromJson(x))),
          );
    
      Map<String, dynamic> toJson() => {
            "fuel": List<dynamic>.from(fuel.map((x) => x.toJson())),
            "battery": List<dynamic>.from(battery.map((x) => x.toJson())),
          };
    }
    
    class Battery {
      Battery({
        this.voltage,
        this.value,
        this.status,
        this.unit,
        this.sensor,
      });
    
      int voltage;
      int value;
      String status;
      String unit;
      String sensor;
    
      factory Battery.fromJson(Map<String, dynamic> json) => Battery(
            voltage: json["voltage"],
            value: json["value"],
            status: json["status"],
            unit: json["unit"],
            sensor: json["sensor"],
          );
    
      Map<String, dynamic> toJson() => {
            "voltage": voltage,
            "value": value,
            "status": status,
            "unit": unit,
            "sensor": sensor,
          };
    }
    
    class Fuel {
      Fuel({
        this.sensorValue,
        this.sensorUnit,
        this.percentage,
        this.value,
        this.unit,
        this.status,
        this.sensor,
        this.name,
      });
    
      double sensorValue;
      String sensorUnit;
      double percentage;
      double value;
      String unit;
      String status;
      String sensor;
      String name;
    
      factory Fuel.fromJson(Map<String, dynamic> json) => Fuel(
            sensorValue: json["sensor_value"].toDouble(),
            sensorUnit: json["sensor_unit"],
            percentage: json["percentage"].toDouble(),
            value: json["value"].toDouble(),
            unit: json["unit"],
            status: json["status"],
            sensor: json["sensor"],
            name: json["name"],
          );
    
      Map<String, dynamic> toJson() => {
            "sensor_value": sensorValue,
            "sensor_unit": sensorUnit,
            "percentage": percentage,
            "value": value,
            "unit": unit,
            "status": status,
            "sensor": sensor,
            "name": name,
          };
    }
    
    class Services {
      // ignore: missing_return
      static Future<Map<String, Tank>> fetchData() async {
        /*String url = 'http://192.168.10.17/api/device';
        Future<SharedPreferences> _prefs = SharedPreferences.getInstance();
        final SharedPreferences prefs = await _prefs;
        final token = prefs.getString('access_token');
        final response = await http.get(url, headers: {
          'Authorization': 'Bearer $token'
        });
    
        print('Token: $token');
        */
        String jsonString = '''
        {
        "1": {
            "data": {
                "sensors": {
                    "fuel": [
                        {
                            "sensor_value": 2.9081154,
                            "sensor_unit": "m",
                            "percentage": 83.09,
                            "value": 48705.07,
                            "unit": "L",
                            "status": "normal",
                            "sensor": "fuel",
                            "name": "main_fuel"
                        }
                    ],
                    "battery": [
                        {
                            "voltage": 4005,
                            "value": 100,
                            "status": "normal",
                            "unit": "%",
                            "sensor": "battery"
                        }
                    ]
                },
                "latitude": null,
                "longitude": null,
                "speed": null,
                "ignition": null,
                "voltage": null,
                "gsm": null,
                "satellites": null,
                "tracked_at": "2020-11-23 03:35:47",
                "tracker": "jejaka",
                "temperature": null
            }
        },
        "2": {
            "data": {
                "sensors": {
                    "fuel": [
                        {
                            "sensor_value": 2.90697352,
                            "sensor_unit": "m",
                            "percentage": 83.06,
                            "value": 48687.99,
                            "unit": "L",
                            "status": "normal",
                            "sensor": "fuel",
                            "name": "main_fuel"
                        }
                    ],
                    "battery": [
                        {
                            "voltage": 3901,
                            "value": 100,
                            "status": "normal",
                            "unit": "%",
                            "sensor": "battery"
                        }
                    ]
                },
                "latitude": null,
                "longitude": null,
                "speed": null,
                "ignition": null,
                "voltage": null,
                "gsm": null,
                "satellites": null,
                "tracked_at": "2020-11-23 03:44:02",
                "tracker": "jejaka",
                "temperature": null
            }
        }
    }
        ''';
        http.Response response = http.Response(jsonString, 200);
        if (response.statusCode == 200) {
          final tank = tankFromJson(response.body);
          return tank;
        } else if (response.statusCode == 400) {
          print('Connection to server is bad');
        } else if (response.statusCode == 500) {
          print('No authorization');
        }
      }
    }
    
    class TankCard extends StatefulWidget {
      @override
      _TankCardState createState() => _TankCardState();
    }
    
    class _TankCardState extends State<TankCard> {
      final _tankRepository = Services();
      Map<String, Tank> payload;
      bool isLoading = true;
    
      initState() {
        Services.fetchData().then((tank) {
          setState(() {
            payload = tank;
            print(payload.toString());
            print(payload["1"].data.sensors.battery[0].value.toString());
            isLoading = false;
          });
        });
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        return isLoading
            ? CircularProgressIndicator()
            : ListView.builder(
                padding: EdgeInsets.all(0),
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemCount: 2,
                itemBuilder: (BuildContext context, int index) {
                  int no = index + 1;
                  return Column(children: [
                    Container(
                        margin: EdgeInsets.only(top: 10),
                        width: MediaQuery.of(context).size.width * 1.1,
                        child: Card(
                            child: Column(children: [
                          Container(
                              padding: EdgeInsets.only(top: 12),
                              child: Center(
                                child: Text('Tank ${no} - Bukit Tinggi',
                                    style: TextStyle(
                                        fontSize: 14, fontWeight: FontWeight.w600)),
                              )),
                          /*Container(
                              padding: EdgeInsets.all(10),
                              child: SvgPicture.asset(
                                'assets/tank-icon-fill.svg',
                                // width: 50,
                              )),*/
                          Container(
                            margin: EdgeInsets.fromLTRB(0, 5, 5, 0),
                            child: Column(
                              children: [
                                Wrap(
                                  children: [
                                    Icon(Icons.bolt),
                                    Container(
                                        margin: EdgeInsets.only(top: 4),
                                        child: Text(
                                            '${payload[no.toString().trim()].data.sensors.battery[0].value.toString()}%'))
                                  ],
                                ),
                                Container(
                                  margin: EdgeInsets.only(left: 15),
                                  child: Text(
                                    'Battery',
                                    style: TextStyle(
                                      fontSize: 10,
                                      fontWeight: FontWeight.w300,
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                        ]))),
                  ]);
                });
      }
    }
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
            visualDensity: VisualDensity.adaptivePlatformDensity,
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: TankCard(),
        );
      }
    }
    
    导入“包装:颤振/材料.省道”;
    导入“package:flatter_svg/svg.dart”;
    导入“dart:convert”;
    将“package:http/http.dart”导入为http;
    Map tankFromJson(String str)=>Map.from(json.decode(str))
    .map((k,v)=>MapEntry(k,Tank.fromJson(v));
    字符串tankToJson(映射数据)=>json.encode(
    Map.from(data.Map((k,v)=>MapEntry(k,v.toJson());
    舱{
    坦克({
    这个数据,,
    });
    数据;
    工厂储罐。fromJson(映射json)=>储罐(
    data:data.fromJson(json[“data”]),
    );
    映射到JSON()=>{
    “data”:data.toJson(),
    };
    }
    类数据{
    资料({
    这是传感器,
    这个纬度,
    这个,我
    
    import 'package:flutter/material.dart';
    import 'package:flutter_svg/svg.dart';
    import 'dart:convert';
    import 'package:http/http.dart' as http;
    
    Map<String, Tank> tankFromJson(String str) => Map.from(json.decode(str))
        .map((k, v) => MapEntry<String, Tank>(k, Tank.fromJson(v)));
    
    String tankToJson(Map<String, Tank> data) => json.encode(
        Map.from(data).map((k, v) => MapEntry<String, dynamic>(k, v.toJson())));
    
    class Tank {
      Tank({
        this.data,
      });
    
      Data data;
    
      factory Tank.fromJson(Map<String, dynamic> json) => Tank(
            data: Data.fromJson(json["data"]),
          );
    
      Map<String, dynamic> toJson() => {
            "data": data.toJson(),
          };
    }
    
    class Data {
      Data({
        this.sensors,
        this.latitude,
        this.longitude,
        this.speed,
        this.ignition,
        this.voltage,
        this.gsm,
        this.satellites,
        this.trackedAt,
        this.tracker,
        this.temperature,
      });
    
      Sensors sensors;
      dynamic latitude;
      dynamic longitude;
      dynamic speed;
      dynamic ignition;
      dynamic voltage;
      dynamic gsm;
      dynamic satellites;
      DateTime trackedAt;
      String tracker;
      dynamic temperature;
    
      factory Data.fromJson(Map<String, dynamic> json) => Data(
            sensors: Sensors.fromJson(json["sensors"]),
            latitude: json["latitude"],
            longitude: json["longitude"],
            speed: json["speed"],
            ignition: json["ignition"],
            voltage: json["voltage"],
            gsm: json["gsm"],
            satellites: json["satellites"],
            trackedAt: DateTime.parse(json["tracked_at"]),
            tracker: json["tracker"],
            temperature: json["temperature"],
          );
    
      Map<String, dynamic> toJson() => {
            "sensors": sensors.toJson(),
            "latitude": latitude,
            "longitude": longitude,
            "speed": speed,
            "ignition": ignition,
            "voltage": voltage,
            "gsm": gsm,
            "satellites": satellites,
            "tracked_at": trackedAt.toIso8601String(),
            "tracker": tracker,
            "temperature": temperature,
          };
    }
    
    class Sensors {
      Sensors({
        this.fuel,
        this.battery,
      });
    
      List<Fuel> fuel;
      List<Battery> battery;
    
      factory Sensors.fromJson(Map<String, dynamic> json) => Sensors(
            fuel: List<Fuel>.from(json["fuel"].map((x) => Fuel.fromJson(x))),
            battery:
                List<Battery>.from(json["battery"].map((x) => Battery.fromJson(x))),
          );
    
      Map<String, dynamic> toJson() => {
            "fuel": List<dynamic>.from(fuel.map((x) => x.toJson())),
            "battery": List<dynamic>.from(battery.map((x) => x.toJson())),
          };
    }
    
    class Battery {
      Battery({
        this.voltage,
        this.value,
        this.status,
        this.unit,
        this.sensor,
      });
    
      int voltage;
      int value;
      String status;
      String unit;
      String sensor;
    
      factory Battery.fromJson(Map<String, dynamic> json) => Battery(
            voltage: json["voltage"],
            value: json["value"],
            status: json["status"],
            unit: json["unit"],
            sensor: json["sensor"],
          );
    
      Map<String, dynamic> toJson() => {
            "voltage": voltage,
            "value": value,
            "status": status,
            "unit": unit,
            "sensor": sensor,
          };
    }
    
    class Fuel {
      Fuel({
        this.sensorValue,
        this.sensorUnit,
        this.percentage,
        this.value,
        this.unit,
        this.status,
        this.sensor,
        this.name,
      });
    
      double sensorValue;
      String sensorUnit;
      double percentage;
      double value;
      String unit;
      String status;
      String sensor;
      String name;
    
      factory Fuel.fromJson(Map<String, dynamic> json) => Fuel(
            sensorValue: json["sensor_value"].toDouble(),
            sensorUnit: json["sensor_unit"],
            percentage: json["percentage"].toDouble(),
            value: json["value"].toDouble(),
            unit: json["unit"],
            status: json["status"],
            sensor: json["sensor"],
            name: json["name"],
          );
    
      Map<String, dynamic> toJson() => {
            "sensor_value": sensorValue,
            "sensor_unit": sensorUnit,
            "percentage": percentage,
            "value": value,
            "unit": unit,
            "status": status,
            "sensor": sensor,
            "name": name,
          };
    }
    
    class Services {
      // ignore: missing_return
      static Future<Map<String, Tank>> fetchData() async {
        /*String url = 'http://192.168.10.17/api/device';
        Future<SharedPreferences> _prefs = SharedPreferences.getInstance();
        final SharedPreferences prefs = await _prefs;
        final token = prefs.getString('access_token');
        final response = await http.get(url, headers: {
          'Authorization': 'Bearer $token'
        });
    
        print('Token: $token');
        */
        String jsonString = '''
        {
        "1": {
            "data": {
                "sensors": {
                    "fuel": [
                        {
                            "sensor_value": 2.9081154,
                            "sensor_unit": "m",
                            "percentage": 83.09,
                            "value": 48705.07,
                            "unit": "L",
                            "status": "normal",
                            "sensor": "fuel",
                            "name": "main_fuel"
                        }
                    ],
                    "battery": [
                        {
                            "voltage": 4005,
                            "value": 100,
                            "status": "normal",
                            "unit": "%",
                            "sensor": "battery"
                        }
                    ]
                },
                "latitude": null,
                "longitude": null,
                "speed": null,
                "ignition": null,
                "voltage": null,
                "gsm": null,
                "satellites": null,
                "tracked_at": "2020-11-23 03:35:47",
                "tracker": "jejaka",
                "temperature": null
            }
        },
        "2": {
            "data": {
                "sensors": {
                    "fuel": [
                        {
                            "sensor_value": 2.90697352,
                            "sensor_unit": "m",
                            "percentage": 83.06,
                            "value": 48687.99,
                            "unit": "L",
                            "status": "normal",
                            "sensor": "fuel",
                            "name": "main_fuel"
                        }
                    ],
                    "battery": [
                        {
                            "voltage": 3901,
                            "value": 100,
                            "status": "normal",
                            "unit": "%",
                            "sensor": "battery"
                        }
                    ]
                },
                "latitude": null,
                "longitude": null,
                "speed": null,
                "ignition": null,
                "voltage": null,
                "gsm": null,
                "satellites": null,
                "tracked_at": "2020-11-23 03:44:02",
                "tracker": "jejaka",
                "temperature": null
            }
        }
    }
        ''';
        http.Response response = http.Response(jsonString, 200);
        if (response.statusCode == 200) {
          final tank = tankFromJson(response.body);
          return tank;
        } else if (response.statusCode == 400) {
          print('Connection to server is bad');
        } else if (response.statusCode == 500) {
          print('No authorization');
        }
      }
    }
    
    class TankCard extends StatefulWidget {
      @override
      _TankCardState createState() => _TankCardState();
    }
    
    class _TankCardState extends State<TankCard> {
      final _tankRepository = Services();
      Map<String, Tank> payload;
      bool isLoading = true;
    
      initState() {
        Services.fetchData().then((tank) {
          setState(() {
            payload = tank;
            print(payload.toString());
            print(payload["1"].data.sensors.battery[0].value.toString());
            isLoading = false;
          });
        });
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        return isLoading
            ? CircularProgressIndicator()
            : ListView.builder(
                padding: EdgeInsets.all(0),
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemCount: 2,
                itemBuilder: (BuildContext context, int index) {
                  int no = index + 1;
                  return Column(children: [
                    Container(
                        margin: EdgeInsets.only(top: 10),
                        width: MediaQuery.of(context).size.width * 1.1,
                        child: Card(
                            child: Column(children: [
                          Container(
                              padding: EdgeInsets.only(top: 12),
                              child: Center(
                                child: Text('Tank ${no} - Bukit Tinggi',
                                    style: TextStyle(
                                        fontSize: 14, fontWeight: FontWeight.w600)),
                              )),
                          /*Container(
                              padding: EdgeInsets.all(10),
                              child: SvgPicture.asset(
                                'assets/tank-icon-fill.svg',
                                // width: 50,
                              )),*/
                          Container(
                            margin: EdgeInsets.fromLTRB(0, 5, 5, 0),
                            child: Column(
                              children: [
                                Wrap(
                                  children: [
                                    Icon(Icons.bolt),
                                    Container(
                                        margin: EdgeInsets.only(top: 4),
                                        child: Text(
                                            '${payload[no.toString().trim()].data.sensors.battery[0].value.toString()}%'))
                                  ],
                                ),
                                Container(
                                  margin: EdgeInsets.only(left: 15),
                                  child: Text(
                                    'Battery',
                                    style: TextStyle(
                                      fontSize: 10,
                                      fontWeight: FontWeight.w300,
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                        ]))),
                  ]);
                });
      }
    }
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
            visualDensity: VisualDensity.adaptivePlatformDensity,
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: TankCard(),
        );
      }
    }