I am working on a personal Flutter Project which contains a few locally stored JSON Files
This is the code
class CCategory extends StatefulWidget {
#override
_CCategory createState() => _CCategory();
}
class Prod {
String Name;
String Image;
Prod({ this.Name, this.Image});
factory Prod.fromJson(Map<String, dynamic> parsedJson) {
return Prod(
Name: parsedJson['Name'],
Image: parsedJson['Image']);
}
}
Future<String> _loadProdAsset() async {
return await rootBundle.loadString('assets/data/Dabur.json');
}
Future<Prod> loadProd() async {
String jsonString = await _loadProdAsset();
final jsonResponse = json.decode(jsonString);
return new Prod.fromJson(jsonResponse);
}
class _CCategory extends State<CCategory> {
Prod _prod;
bool _loaded = false;
#override
void initState() {
super.initState();
loadProd().then((s) => setState(() {
_prod = s;
_loaded = true;
}));
}
Widget build(BuildContext context) {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitDown,
DeviceOrientation.portraitUp,
]);
return MaterialApp(
title: "Dabur Products",
theme: ThemeData(
primaryColor: Colors.black,
),
home: Scaffold(
appBar: AppBar(
title: Text("Dabur Products",
),
),
body: _loaded?Center(
child: ListView(
children: <Widget>[
ListTile(
leading: Image.asset('${_prod.Image}'),
title: Text('${_prod.Name}'),
)
]
)
)
: new Center(
child: new CircularProgressIndicator(),
)
),
);
}
}
The contents of JSON file are not being loaded and this is the error I am encountering in debug
[ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: type 'List' is not a subtype of type 'Map<String, dynamic>'
Can someone please help me resolve this ?
I don't know how your JSON-file looks like, but looking at your error code, json.decode(jsonString) seem to be giving you a List instead of a Map. I'd guess your JSON-file actually is a list:
[
... content ...
]
Instead, your JSON-file should look something like this (using { }):
{
"Name": ...,
"Image": ...
}
Related
Hi guys I'm new to flutter . I was working with a follow along tutorial
and this were working out fine until I ran my code and got a null check operator used on a null value and when I remove the ! the code just stays on a loading mode and doesn't return the response from thee api?
please advice
below is my main.dart
import 'package:flutter/material.dart';
import 'package:c3mobiredo/presentation/LoginScreen.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Material App',
home: Home(),
);
}
}
below is my LoginScreen.dart file
import 'package:flutter/material.dart';
import 'package:c3mobiredo/connectivity/apiConfig.dart';
import 'package:c3mobiredo/connectivity/models/getTimesheetForUserDay.dart';
import '../connectivity/Services/api_service.dart';
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
late List<UserProjectSpecificDay>? _userModel = [];
#override
void initState() {
super.initState();
_getData();
}
void _getData() async {
_userModel = (await ApiService().GetUserProjectSpecificDay())!;//where I'm getting the error but when I remove the ! the code stays in a loading state which is another issue
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('REST API Example'),
),
body: _userModel == null || _userModel!.isEmpty
? const Center(
child: CircularProgressIndicator(),
)
: ListView.builder(
itemCount: _userModel!.length,
itemBuilder: (context, index) {
return Card(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(_userModel![index].id.toString()),
Text(_userModel![index].project.projectName),
],
),
const SizedBox(
height: 20.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(_userModel![index].hours),
Text(_userModel![index].desc),
],
),
],
),
);
},
),
);
}
}
since someone downvote, i update with reference from official documentation:
https://dart.dev/null-safety/understanding-null-safety
https://stackoverflow.com/a/69313493/12838877
when I remove the ! the code just stays on a loading mode
yes it because your _userModel == null
and here you set the condition like that
_userModel == null || _userModel!.isEmpty
? const Center(
child: CircularProgressIndicator(),)
here need to fix
use late means, the value is non-null variable and you will set the value later. remove late when you initilize nullable value.
when you use ? sign, it means, the variable is nullable
List<UserProjectSpecificDay>? _userModel; // since its nullable, no need to set initial value
then on API call:
void _getData() async {
_userModel = await ApiService().GetUserProjectSpecificDay());
}
no need ! anymore, because we had remove late above
last in your body:
body: _userModel == null // only check if null
? const Center(
child: CircularProgressIndicator(),)
: ListView.builder(
itemCount: _userModel.length ?? 0 // if null, set the list length = 0
It means your reponse.body is null. You cn use use a FutureBuiler to build your widget and you can also set a timeout for the request after what you show the user that there is no data.
Eg:
List<UserProjectSpecificDay>? _userModel;
bool isTimeout = false;
String errorMsg = '';
void _getData() async {
ApiService().GetUserProjectSpecificDay().then((response) {
// I suppose you have a "fromMap" in your model
if (response.statusCode == 200) {
var data = jsonDecode(response.body);
_userModel = UserProjectSpecificDay.fromMap(data);
} else if (response.statusCode == 408) {
setState(() {
isTimeout = true;
errorMsg = 'There was a network error';
});
} else setState(() => errorMsg = 'An error occured');
});
}
/* ... */
body: FutureBuilder(
builder: (_, __) {
if (_userModel != null) {
// return your widget
}
if (isTimeout) {
return Center(child: Text(errorMsg);
}
return Center(child: CircularProgressIndicator());
}
I am developing an android application with flutter, what I am doing is displaying a json in an application page. When I run the application it doesn't give me an error but it doesn't show me the data, the json I want to read is the following:
[
{
"deviceid": 27,
"f2cuid": "Estacion1_A",
"devicedata": {
"isRunning": 0,
"color": "w3-red",
"colorNoW3": "red",
"device_name": "Estacion1_A"
}
},
{
"deviceid": 20,
"f2cuid": "B19",
"devicedata": {
"isRunning": 1,
"color": "w3-green",
"colorNoW3": "green",
"device_name": "B19"
}
}
]
It's in my model class:
class Stations {
Int? isRunning;
String? color;
String? colorNoW3;
String? devicename;
Stations(
{this.isRunning,
this.color,
this.colorNoW3,
this.devicename,
});
factory Stations.fromJson(Map<String, dynamic> json) {
return Stations(
isRunning: json['isRunning'],
color: json['color'],
colorNoW3: json['colorNoW3'],
devicename: json['device_name'],
);
}
}
This is my service:
Future<List<Stations>> getStations() async {
Uri url = Uri.parse('URL');
final response = await http.get(url);
var data = jsonDecode(response.body);
print('data: $data');
List<Stations> stations = data.map((e) => Stations.fromJson(e)).toList();
return stations;
}
and this is the way I display it:
return Scaffold(
appBar: AppBar(
title: const Text('Sistema Escolar Administrativo'),
),
drawer: DrawerWidgetMenu(),
body: Container(
child: FutureBuilder(
future: stationSvc.getStations(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return Container(
child: Center(
child: Text('No hay datos que mostrar'),
),
);
}
return snapshot.data.length > 0
? ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return Card(
child: InkWell(
onTap: () {
Navigator.of(context).pushReplacement(
MaterialPageRoute(
builder: (context) => HomePage(),
),
);
},
child: ListTile(
leading: Text(snapshot.data[index].devicename!),
title: Text(snapshot.data[index].color!),
subtitle: Text(snapshot.data[index].colorNoW3!),
),
));
})
: Center(
child: Text('No hay datos, registra un grupo primero'));
}),
),
);
You forgot to specify nested map:
factory Stations.fromJson(Map<String, dynamic> json) {
return Stations(
isRunning: json['devicedata']?['isRunning'],
color: json['devicedata']?['color'],
colorNoW3: json['devicedata']?['colorNoW3'],
devicename: json['devicedata']?['device_name'],
);
}
I am sharing a complete class named SampleModel below which can help to parse JSON in flutter:
class SampleModel {
String? _myName;
bool? _isActive;
SampleModel({String? myName, bool? isActive}) {
if (myName != null) {
_myName = myName;
}
if (isActive != null) {
_isActive = isActive;
}
}
String? get myName => _myName;
set myName(String? myName) => _myName = myName;
bool? get isActive => _isActive;
set isActive(bool? isActive) => _isActive = isActive;
SampleModel.fromJson(Map<String, dynamic> json) {
_myName = json['myName'];
_isActive = json['isActive'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['myName'] = _myName;
data['isActive'] = _isActive;
return data;
}
}
Sample JSON for the same class:
{
"myName" : "Your Name",
"isActive" : true
}
Check if this can help in your case.
your json type is an array, not a map.
look at [ ] syntax on json file.
to deal with an Array, you should make it to a list first:
List<Map<String,dynamic>> mylistofMapformJson = json.decode(receivedJson);
//you should get your list stations like this:
List<Stations> listStationsFromJson = List.generate(
mylistofMapformJson.length,
(index) => Stations.fromJson(mylistofMapformJson));
I'm having this super annoying issue of being unable to grab and display a table from my server hosted on PhpmyAdmin. (I've managed to grab the data and have it printed in the console, but now that I'm trying to display it in a table I can't seem to get it working)
I've tried nulling my variables but I'm not really sure what the main culprit for this error is. Any help would be greatly appreciated.
Image of Error
data.dart File
class dataListing extends StatefulWidget {
const dataListing({Key? key}) : super(key: key);
#override
State<dataListing> createState() => _dataListingState();
}
class _dataListingState extends State<dataListing> {
#override
Widget build(BuildContext context) {
return Container();
}
}
class listingData{
String? ListingID, listingName, listingDescription, address, suburbName, phoneNumber, openingHours, Email, Website;
listingData({
this.ListingID,
this.listingName,
this.listingDescription,
this.address,
this.suburbName,
this.phoneNumber,
this.openingHours,
this.Email,
this.Website,
});
//constructor
List<listingData> datalist = [];
factory listingData.fromJSON(Map<String, dynamic> json){
return listingData(
ListingID: json["ListingID"],
listingName: json["listingName"],
listingDescription: json["listingDescription"],
address: json["address"],
suburbName: json["suburbName"],
phoneNumber: json["phoneNumber"],
openingHours: json["openingHours"],
Email: json["Email"],
Website: json["Website"],
);
}
}
Directory.dart file
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:app/pages/data.dart';
class directoryPage extends StatefulWidget {
#override
State<directoryPage> createState() => _directoryPageState();
}
class _directoryPageState extends State<directoryPage> {
// List serviceListing = [];
//
// getAllListing()async{
// String url = "URL HERE";
// var response = await http.get(Uri.parse(url));
// if (response.statusCode == 200){
// setState (() {
// serviceListing = json.decode(response.body);
// });
// print (serviceListing);
// return serviceListing;
// }
// }
bool error = false, dataloaded = false;
var data;
String dataurl = "URL HERE";
#override
void initState (){
loaddata();
super.initState();
// getAllListing();
}
void loaddata() {
Future.delayed(Duration.zero,() async {
var res = await http.post(Uri.parse(dataurl));
if (res.statusCode == 200) {
setState(() {
data = json.decode(res.body);
dataloaded = true;
});
}
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Directory'),
centerTitle: true,
elevation: 0,
backgroundColor: Color(0xFFA30B32),
//WSU Appbar Icon
leading: Padding(
padding: const EdgeInsets.all(8.0),
child: Image.asset("assets/wsulogo.png", scale: 8.0),
),
),
body: Container(
padding: EdgeInsets.all(15),
child:dataloaded?datalist():
Center(
child:CircularProgressIndicator()
),
)
);
}
Widget datalist(){
if(data["error"]) {
return Text(data["errmsg"]);
}else{
List<listingData> datalist = List<listingData>.from(data["data"].map((i){
return listingData.fromJSON(i);
})
);
return Table( //if data is loaded then show table
border: TableBorder.all(width:1, color:Colors.black45),
children: datalist.map((listingdata){
return TableRow( //return table row in every loop
children: [
//table cells inside table row
TableCell(child: Padding(
padding: EdgeInsets.all(5),
child:Text(listingdata.ListingID!)
)
),
TableCell(child: Padding(
padding: EdgeInsets.all(5),
child:Text(listingdata.listingName!)
)
),
TableCell(child: Padding(
padding: EdgeInsets.all(5),
child:Text(listingdata.listingDescription!)
)
),
TableCell(child: Padding(
padding: EdgeInsets.all(5),
child:Text(listingdata.address!)
)
),
]
);
}).toList(),
);
}
}
}
Looks like the issue was actually unrelated to the dart side of things, the php code wasn't properly structuring the data. Cannot have underscores or spaces.
Correct-> $json["dballlisting"] = array (); (I renamed it to just "data" later)
Incorrect->$json["db_all_listing"] = array ();
The error seems to be originating from this line, the data['data'] is null which is expected to be an Array.
List<listingData> datalist = List<listingData>.from(data["data"].map((i){
return listingData.fromJSON(i);
})
You need to investigate your API call to make sure why it is happening. If the null value is expected then you need to add safeguards in your code to make sure it won't break when it encounter such scenarios. You can add null safety checks for that one way to do it would be to
List<listingData> datalist = List<listingData>.from((data["data"] ?? []).map((i){
return listingData.fromJSON(i);
})
hope you doin' well
I'm a newbie to flutter and I'm working on a basic weather app as a starter. now, somehow everything is okay, except the city name. I don't know how to implement city search feature and get data from api based on the location. In my code, I defined city name manually.
here is my code:
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:hava_chitor/Carousel.dart';
import 'package:hava_chitor/UnderCarousel.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
var temp;
var name;
var humidity;
var description;
var city = 'London';
CarouselController buttonCarouselController = CarouselController();
Future getWeather() async {
http.Response response = await http.get(
"http://api.openweathermap.org/data/2.5/weather?q=$city&units=metric&appid=apikey");
var results = jsonDecode(response.body);
setState(() {
this.temp = results['main']['temp'];
this.name = results['name'];
this.humidity = results['main']['humidity'];
this.description = results['weather'][0]['main'];
});
}
#override
void initState() {
super.initState();
this.getWeather();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hava Chitor?',
theme: ThemeData(
primaryColor: Color(0xff424242),
),
home: Scaffold(
drawer: Drawer(),
appBar: AppBar(
actions: [
Padding(
padding: const EdgeInsets.all(15),
child: GestureDetector(
onTap: () {
print('kir');
},
child: Icon(
Icons.add_circle_outline,
color: Color(0xff5d5f64),
),
),
)
],
backgroundColor: Colors.transparent,
elevation: 0,
iconTheme: IconThemeData(color: Color(0xff5d5f64)),
title: Text(
'Hava Chitor?',
style: TextStyle(
color: Color(0xff5d5f64),
fontFamily: 'Sans',
fontWeight: FontWeight.w700),
),
centerTitle: true,
),
backgroundColor: Colors.white,
body: Padding(
padding: const EdgeInsets.symmetric(vertical: 1.0),
child: Column(
children: [
Carousel(name),
UnderCarousel(temp, description, humidity),
],
),
),
),
);
}
}
you need to add a TextField and a TextFieldController and call the function getWeather when the user finish writing the city name, something like this
String city;
TextEditingController textEditingController = TextEditingController();
TextField(
controller: textEditingController,
onSubmitted: (value){
city = textEditingController.text;
getWeather();
},
),
what you need to do is add TextField for the user to input the city name.
the way you can do that is shown before. The next thing you have to do is write a function to fetch weather data with city name.
var url =
'http://api.openweathermap.org/data/2.5/weather?q=\$city&units=metric&appid=apikey';
class CityWeatherData {
final String city, temprateure, humidity; //...
CityWeatherData({
this.city,
this.temprateure,
this.humidity,
// ...
});
factory CityWeatherData.fromJson(Map<String, dynamic> json) {
return CityWeatherData(
city: json['city'],
humidity: json['city']['humidity'],
temprateure: json['city']['temp'],
// ...
);
}
}
Future<CityWeatherData> fetchWeatherDataBycity() async {
final response = await http.get(url);
if (response.statusCode == 200) {
return CityWeatherData.fromJson(jsonDecode(response.body));
} else {
throw Exception('failed to fetch data.');
}
}
I depending on the JSON data you get you have to edit the fromjson method.
I hope this was helpful!
I am still a beginner and while writing some simple app with dart , this problem appeared , the vs code studio does not show any errors within the code but the app won't run on the device and shows a red screen with this written :
NoSuchMethodError
The method 'map' was called on null.
Receiver: null
Tried calling: map(Closure: (String) => Answer)
.....
here is the code :
import 'package:flutter/material.dart';
import './questions.dart';
import './Answer.dart';
//void main() {
//runApp(MyCoolApp());
//}
void main() => runApp(
MyCoolApp());
class MyCoolApp extends StatefulWidget {
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return _MyCoolAppState();
}
}
class _MyCoolAppState extends State<MyCoolApp> {
var _questionsIndex = 0;
void _answerQuestions() {
setState(() {
_questionsIndex = _questionsIndex + 1;
});
print(_questionsIndex);
}
#override
Widget build(BuildContext context) {
const questions = const [
{
'questionText': 'what is your favorite animal?',
'asnwers': ['Black', 'White', 'Green', 'yellow'],
},
{
'questionText': 'what is your favorite food?l?',
'asnwers': ['MONKEY', 'LION', 'ELEPHANT', 'GIRAFFE'],
},
{
'questionText': 'what is your favorite music genre?',
'answers': ['ROCK', 'CLASSIC', 'JAZZ', 'COUNTRY']
}
];
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(
'7AMADA APP',
style: TextStyle(
color: Colors.black,
),
),
),
body: Column(
children: [
Questions(
questions.elementAt(_questionsIndex)['questionText'],
),
...(questions.elementAt(_questionsIndex)['answers'] as List<String>)
.map((answer) {
return Answer(_answerQuestions, answer);
}).toList()
],
),
),
);
}
}