Как отобразить API данных во флаттере
Разрешение спросить, я пытаюсь отобразить данные в виде списка, и мне удалось получить данные из консоли ответов ниже, но данные не отображаются в пользовательском интерфейсе, я что-то пропустил или что-то не так в моем письме. Спасибо.
Это когда я делаю вызов API данных
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();
}
}
}
И это когда я вызываю его внутри виджета
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,
);
}
},
),
),
);
}
}
И это ответ при вызове API, ответ также Ok 200
Да, я использую колонку
—
11.01.2023 04:34
Хотя я удалил столбец, но данные все равно не отображаются в виджете
—
11.01.2023 04:35
Пожалуйста, поместите столбец и внутри используйте список с оберткой расширенного виджета
—
11.01.2023 04:48
Кроме того, вы itemCount: должны быть snapshot.data.length
—
11.01.2023 04:49
@sharon, пожалуйста, проверьте выше
—
11.01.2023 04:49
Все еще ошибка, даже если со снимком я не могу получить доступ к данным в модели, можете ли вы привести пример.
—
11.01.2023 05:00
Пожалуйста, введите весь код части пользовательского интерфейса, чтобы я мог помочь с вашим кодом @s
—
11.01.2023 05:11
If (snapshot.hasData) { List<ModelDosen> datalist = snapshot.data; print("список ==>${список данных}");
—
11.01.2023 05:13
Скажи мне, что печатается в списке в консоли
—
11.01.2023 05:13
Я обновил этот вопрос
—
11.01.2023 05:17
@sharon, пожалуйста, распечатайте журнал внутри hasData
—
11.01.2023 05:19
Давайте продолжим обсуждение в чате.
—
11.01.2023 05:19
Типы данных JavaScript
В JavaScript существует несколько типов данных, включая примитивные типы данных и ссылочные типы данных. Вот краткое объяснение различных типов данных...
Как сделать движок для футбольного матча? (простой вариант)
Футбол. Для многих людей, живущих на земле, эта игра - больше, чем просто спорт. И эти люди всегда мечтают стать футболистом или менеджером. Но, к...
Знайте свои исключения!
В Java исключение - это событие, возникающее во время выполнения программы, которое нарушает нормальный ход выполнения инструкций программы. Когда...
CSS Flex: что должен знать каждый разработчик
CSS Flex: что должен знать каждый разработчик Модуль flexbox, также известный как гибкий модуль разметки box, помогает эффективно проектировать и...
Введение в раздел "Заголовок" в HTML
Говорят, что лучшее о человеке можно увидеть только изнутри, и это относится и к веб-страницам HTML! Причина, по которой некоторые веб-страницы не...
1
13
57
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Убедитесь, что переменная data назначена из данных snapshot, если вы ее используете.
FutureBuilder<List<ModelDosen>>(
future: ListDosenProvider.getDosen(),
builder: (context, snapshot) {
if (snapshot.hasData) {
/// set the data
data = snapshot.data;
return ListView.builder(
itemCount: data.length,
itemBuilder: (context, index) {
return listTile(data[index]);
});
} else if (snapshot.hasError) {
/// Handle error
} else {
/// Show Progress Indicator
},
})
Ответ принят как подходящий
Пожалуйста, замените свой класс на этот
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();
}
}
}
И обновить удаление? из Datum модельного класса.
class ModelDosen {
ModelDosen({
this.status,
this.code,
this.data,
});
String? status;
String? code;
List<Datum>? data;
Пользовательская часть
@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,
);
}
},
),
Другие вопросы по теме
При смене экрана/страницы отображается только один элемент списка
Элементы Android ListView отображаются в неправильном порядке
С# Listview разные цвета строк и столбцов
Ошибка: слишком много позиционных аргументов: разрешено 1, но найдено 2
Цвет текста окна поиска в списке
ListView SelectedItems с WinUI3 и Microsoft.Toolkit.Mvvm
Как поместить более трех элементов в список
C# Как я могу заставить столбцы списка занимать все окно, когда я его максимизирую?
Отображение элементов списка на С# в WPF ListView
Утечка памяти в приложении WPF с использованием ListView с ObservableCollection
Похожие вопросы
Как преобразовать List<String> в String []?
Как я могу сохранить две записи с идентификатором другого в флаттере?
Как поместить изображение в поле даты sfcalendar?
Flutter Webview с GoRouter (навигация 2.0) — как обрабатывать нажатие кнопки «Назад»
Прокрутите Gridview, как орбиту в флаттере
При смене экрана/страницы отображается только один элемент списка
Увеличить номер версии в GitHub Actions
Как изменить режим точек шрифта во флаттере?
Ошибка при сборке после обновления флаттера
Как добавить текст внутри трепетания переключателя Купертино
Кажется size ошибка в вашем пользовательском интерфейсе. где вы использовали этот виджет FutureBuilder внутри Column?