flutterlistview
How to display data api in flutter
permission to ask, I'm trying to display data into a listview and I've managed to get the data seen from the response console below but the data doesn't appear in the UI, is there something I missed or was there something wrong in my writing. Thank you.
this is when i do a data API call
class ListDosenProvider extends ChangeNotifier {
static Future<List<ModelDosen>> getDosen() async {
String url = Constant.baseURL;
String token = await UtilSharedPreferences.getToken();
final response = await http.get(
Uri.parse(
'$url/auth/mhs_siakad/dosen',
),
headers: {
'Authorization': 'Bearer $token',
},
);
print(response.statusCode);
print(response.body);
if (response.statusCode == 200) {
final List result = json.decode(response.body);
return result.map((e) => ModelDosen.fromJson(e)).toList();
// return ModelDosen.fromJson(jsonDecode(response.body));
} else {
throw Exception();
}
}
}
and this is when i call it inside the widget
import 'package:flutter/material.dart';
import '../../../models/dosen/dosen_model.dart';
import '../../../provider/dosen/dosen_provider.dart';
import '../../../theme.dart';
import '../../../widgets/custom_appbar.dart';
class DosenPage extends StatefulWidget {
const DosenPage({super.key});
@override
State<DosenPage> createState() => _DosenPageState();
}
class _DosenPageState extends State<DosenPage> {
List<Datum> data = [];
// @override
// void initState() {
// super.initState();
// fetchData();
// }
// fetchData() async {
// final apiResponse = await ListDosenProvider().getDosen() ??;
// setState(() {
// data = (apiResponse.data!);
// });
// }
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: const Size.fromHeight(kToolbarHeight),
child: CustomAppbar(
title: 'Dosen',
),
),
body: Center(
child: FutureBuilder<List<ModelDosen>>(
future: ListDosenProvider.getDosen(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Expanded(
child: ListView.builder(
itemCount: snapshot.data!.length,
itemBuilder: (context, index) {
return Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: const BorderRadius.all(
Radius.circular(8),
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
spreadRadius: 1,
blurRadius: 9,
offset: const Offset(
1, 2), // changes position of shadow
),
],
),
child: Padding(
padding: const EdgeInsets.all(14),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
data[index].name.toString(),
style: bold6,
),
Text(
data[index].prodi.toString(),
style: regular6,
),
const SizedBox(
height: 12,
),
Row(
children: [
SizedBox(
width: 94,
height: 32,
child: TextButton(
onPressed: () {},
style: TextButton.styleFrom(
backgroundColor:
const Color(0xffB3FFAE),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(8),
),
),
child: Text(
"Email",
style: boldButton1.copyWith(
color: const Color(
0xff379237,
),
),
),
),
),
const SizedBox(
width: 8,
),
SizedBox(
width: 94,
height: 32,
child: TextButton(
onPressed: (() {}),
style: TextButton.styleFrom(
backgroundColor:
const Color(0xffC5D5FF),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(8),
),
),
child: Text(
"Detail",
style: boldButton2.copyWith(
color: primaryColor,
),
),
),
),
],
)
],
),
Image.asset(
'assets/images/user.png',
width: 50,
)
],
),
),
);
},
),
);
} else {
return CircularProgressIndicator(
color: primaryColor,
);
}
},
),
),
);
}
}
and this is the response when calling API the response is also Ok 200
Solution
Please replace your class with this
class ListDosenProvider {
static Future<List<Datum>> getDosen() async {
String url = Constant.baseURL;
String token =
await UtilSharedPreferences.getToken();
final response = await https.get(
Uri.parse(
'$url/auth/mhs_siakad/dosen',
),
headers: {
'Authorization': 'Bearer $token',
},
);
if (response.statusCode == 200) {
final result = json.decode(response.body) as Map<String, dynamic>;
ModelDosen dosen = ModelDosen.fromJson(result);
List<Datum> l = dosen.data??[];
return l;
} else {
throw Exception();
}
}
}
And update your remove ? from Datum model class is
class ModelDosen {
ModelDosen({
this.status,
this.code,
this.data,
});
String? status;
String? code;
List<Datum>? data;
Ui part is
@override
void initState() {
super.initState();
fabState.setFabStatus = FAB_STATUS.not_visible;
fabState.setBottomNavStatus = NAV_STATUS.not_visible;
getData();
}
Future<List<Datum>> getData() async {
final result = await ListDosenProvider.getDosen();
return result;
}
child: FutureBuilder<List<Datum>>(
future: getData(),
builder: (context, snapshot) {
if (snapshot.hasError) {
return Container(
child: const Text("error"),
);
} else if (snapshot.hasData) {
return Expanded(
child: ListView.builder(
itemCount: snapshot.data!.length,
itemBuilder: (context, index) {
return Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: const BorderRadius.all(
Radius.circular(8),
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
spreadRadius: 1,
blurRadius: 9,
offset: const Offset(
1, 2), // changes position of shadow
),
],
),
child: Padding(
padding: const EdgeInsets.all(14),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
snapshot.data![index].name.toString(),
),
Text(
snapshot.data![index].prodi.toString(),
),
const SizedBox(
height: 12,
),
Row(
children: [
SizedBox(
width: 94,
height: 32,
child: TextButton(
onPressed: () {},
style: TextButton.styleFrom(
backgroundColor:
const Color(0xffB3FFAE),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(8),
),
),
child: const Text(
"Email",
),
),
),
const SizedBox(
width: 8,
),
SizedBox(
width: 94,
height: 32,
child: TextButton(
onPressed: (() {}),
style: TextButton.styleFrom(
backgroundColor:
const Color(0xffC5D5FF),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(8),
),
),
child: const Text(
"Detail",
),
),
),
],
)
],
),
Image.asset(
'assets/images/user.png',
width: 50,
)
],
),
),
);
},
),
);
} else {
return const CircularProgressIndicator(
color: Colors.pink,
);
}
},
),
- Flutter how to execute when clicking back button
- Could not create an instance of type com.android.build.api.variant.impl.LibraryVariantBuilderImpl. [Flutter]
- How to remove default padding from ExpansionTile's header
- How to change Text color depending on background so that there is good contrast between the two colors
- Namespace issue in flutter after update to Gradle to 8.0.0
- Error Regarding undefined method `map' for nil:NilClass for Flutter App / CocoaPod Error
- What's the difference between BorderRadius.all(Radius.circular(4)) and BorderRadius.circular(4)
- Error Flutter Firebase Auth and Google Sign In
- How to count number of messages in firebasefirestore collection in flutter
- Custom SVG-Font Icon not centered in Icon Widget
- Flutter: include of non-modular header inside framework module 'firebase_core.FLTFirebasePlugin'
- Fixed column and row header for DataTable on Flutter Dart
- Flutter android build issue post flutter update
- Expecting binder but got null
- How to access the route data outside the StatefulNavigationShell with GoRouter in Flutter?
- No Android SDK found. Try setting the ANDROID_SDK_ROOT environment variable
- How to cut through an Opacity Widget in flutter?
- How to invoke a rebuild of a stateless widget?
- How to validate a text field on value changed?
- Exception: No Impeller context is available iOS
- zsh: command not found: flutter?
- How to add dependencies to Flutter plugin
- Flutter set state not updating variable value in bottomsheet function
- How to detect when a user stops sliding in carousel_slider in Flutter to make API calls
- web - readAsBytes throws Unsupported operation: _Namespace
- Another exception was thrown: dependOnInheritedElement() was called before _PagesTestWidgetState.initState() completed
- iOS Simulator scrolls too fast on Apple M1
- Flutter Dismissible background goes up after list item is dismissed
- Unable to interact with my Flutter app to find elements location on Appium inspector 2023.12.2 with Appium 2.4.1
- How do you add query parameters to a Dart http request?