Home > Enterprise >  I want to get json from api in flutter
I want to get json from api in flutter

Time:10-16

class Phone{
int? id;
bool? is_new;
String? title;
String? subtitle;
String? picture;
bool? is_buy;
dynamic best_seller;
int? price_without_discount;
int? discount_price;

Phone({
  this.id,
  this.is_new,
  this.title,
  this.subtitle,
  this.picture,
  this.is_buy,
  this.best_seller,
  this.price_without_discount,
  this.discount_price
});
 factory Phone.fromJson(Map <String, dynamic> json) => Phone(
     id: json[MyPhoneKeys.id],
     is_new: json[MyPhoneKeys.is_new],
     title: json[MyPhoneKeys.title],
     subtitle: json[MyPhoneKeys.subtitle],
     picture: json[MyPhoneKeys.picture],
     is_buy: json[MyPhoneKeys.is_buy],
     best_seller: json[MyPhoneKeys.best_seller],
     price_without_discount: json[MyPhoneKeys.price_without_discount],
     discount_price: json[MyPhoneKeys.discount_price]
 );
}

(My screen to display the data)

class CarouselSliderData extends StatefulWidget{
  const CarouselSliderData({super.key});


  @override
  State<CarouselSliderData> createState() => CarouselSliderDataState();
}

class CarouselSliderDataState extends State<CarouselSliderData> {
  int? id;
  bool? is_new;
  String? title;
  String? subtitle;
  dynamic picture;
  bool? is_buy;
  dynamic best_seller;
  int? price_without_discount;
  int? discount_price;

  late Future<dynamic> phoneSpec;

  @override
  void initState() {
    phoneSpec = MyApiService().getDataMocky();
    super.initState();
  }


  @override
  Widget build(BuildContext context) {
     return FutureBuilder<dynamic>(
          future: phoneSpec,
          builder: (context, snapshot) {
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(snapshot.data!.id),
                  Text(snapshot.data!.is_new),
                  Text(snapshot.data!.title),
                  Text(snapshot.data!.subtitle),
                  Text(snapshot.data!.picture),
                  Text(snapshot.data!.is_buy),
                  Text(snapshot.data!.best_seller),
                  Text(snapshot.data!.price_without_discount),
                  Text(snapshot.data!.discount_price),
                ],
              );

          }



          );
  }

  Future<dynamic> getData() async{
    return await MyApiService().getDataMocky().then((value) async{
      if(value != null){
        setState((){
          id = value!.id!;
          is_new = value!.is_new!;
          title = value!.title!;
          subtitle = value!.subtitle!;
          picture = value!.picture!;
         is_buy = value!.is_buy!;
          best_seller = value!.best_seller!;
          price_without_discount = value!.price_without_discount!;
          discount_price = value!.discount_price!;

        });
        return value;
      }
    },
    );/*.catchError((_){
     throw Exception("Exception is caught");
   });*/
  }
}

(my service to get data)

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:my_work/apiService/model.dart';


class MyApiService{

  Future<dynamic> getDataMocky() async {
  final response = await http.get(
    Uri.parse('https://run.mocky.io/v3/654bd15e-b121-49ba-a588-960956b15175')
  );

  if(response.statusCode == 200){
    return Phone.fromJson(json.decode(response.body)[1]);
  }
  return Exception();
  }
}

is my model right for this api json from this api. I want to get data and display them in carousel Slider(i will add it) but get nulls. The Error is saying Null is not subtype of String and nullcheck is used on NULL value and i don't know why and where is my mistake. Thank you very much

CodePudding user response:

Text widget doesnt accept nullable string.

Instead of using ! it would be better to check null first, or you can provide default value on null case. Format will be like

if(snapshot.data!=null) Text(snapshot.data.id),

Or

Text(snapshot.data?.id??"got null"),

Or use String format like bellow, it will show null on null case.

Text("${snapshot.data?.id}"),

I will recommend checking understanding-null-safety

  • Related