Hi,
Do in need to host the django project in server to test the api function and fetch the details in Flutter mobile application. Or can i test it locally using xaamp server and fetch details in Flutter app.
If django project is setup locally within same system where you will develop flutter app than for development purpose you can use django’s API locally.
Just run the django server and for the API_URL use django servers endpoint i.e http://127.0.0.1:8000/api-endpoint.
Side Note: Create a constant variable API_URL and assign http://127.0.0.1:8000/ this url and concatenate remaining endpoint with API_URL so in future you don’t need to change the url from everywhere.
1 Like
Hi,
Thanks for the reply. I have tried the same earlier, but am not able to fetch the data in flutter app locally. Does it require any changes in the settings.py file?
How you calling API, is there any error while calling API?
The api response is:
{
“hasError”: false,
“errorcode”: -1,
“message”: “Success”,
“response”: {
“isSuccess”: true,
“statusMessage”: “successfully done”,
“data”: [
{
“Name”: “Chinmaya”,
“Place”: “Kerala”,
“District”: “Alappuzha”,
“HM Name”: “Celin”,
“Type”: “Private”
},
{
“Name”: “Thiruvambady HSS”,
“Place”: “Kerala”,
“District”: “Alappuzha”,
“HM Name”: “Manoj”,
“Type”: “Government”
},
{
“Name”: “Matha”,
“Place”: “Kerala”,
“District”: “Alappuzha”,
“HM Name”: “Indhu”,
“Type”: “Private”
}
]
}
}
The flutter code is :
import ‘dart:convert’;
import ‘package:flutter/material.dart’;
import ‘package:http/http.dart’ as http;
class SchoolViewPage extends StatefulWidget {
const SchoolViewPage({super.key});
@override
State createState() => _SchoolViewPageState();
}
class _SchoolViewPageState extends State {
var datas;
Future getSchoolApi() async {
final response =
await http.get(Uri.parse(‘http://192.168.1.34:8000/app1/viewSchool’));
if (response.statusCode == 200) {
datas = jsonDecode(response.body.toString());
} else {}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Expanded(
child: FutureBuilder(
future: getSchoolApi(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const Text(‘Loading’);
} else {
// return Text(datas[‘response’][‘data’][0].toString());
return Text(datas[‘response’].toString());
}
}),
)
],
),
);
}
}
I am getting this error:
NoSuchMethodError: ‘I’ Dynamic call of null. Receiver: null
Arguments: [“name”] See also: Handling errors in Flutter | Flutter
You are saying that you are not able to fetch data from API, but in the response I can see the data within response. Also in your flutter code
you are getting the whole response to json and in your response data key has the array of data object which contains name, place, district, etc. It seems the API is sending correct response it’s just you have to handle that data within your flutter code accurately.
1 Like
Hi,
The API is working fine. But I am not able to test the same in flutter app. The flutter code is correct IMO, When i tried with other free APIs from JSONplaceholder, I am able to fetch the details properly.
There might be some error within response.
print the response variable within terminal.
It might be that you will get CORS error or if not CORS error than see what error or response is being printed.
1 Like
Hi,
Thanks. Its working now. There was some error in the flutter code for fetching the data.
Thank you so much for the help and your time. Thanks
I tried to run the app in chrome at first. The data is not fetching there. Now i tried with the android emulator, the data is coming here. This was the issue. Data was not printing in the debug console inside the terminal.
Hello everyone
I also have this problem to connect my API created with Django to my Flutter application and the error I encounter at my level is: ClientException with SocketException: Connection refused (OS Error: Connection refused, errno = 111), address = 127.0 .0.1, port=56124, uri=http://127.0.0.1:8000/api/product/
What to do to correct this?