I’m having a little problem here, I want to map a circularprogressindicator in the middle of the page but it just appears in the top center of the page, how do I move it to the middle of the page, I’ve tried wrapping it using the Column widget but an error occurs. How do I solve this simple problem.
and one more how do I add a hintText in the dropdown as the default value, because the dropdown immediately takes the value 1.
Thank you.
note:
green color for dropdown case
red for circularprogressindicator cases
Here I attach the code.
class JadwalKuliah extends StatefulWidget {
const JadwalKuliah({super.key});
@override
State<JadwalKuliah> createState() => _JadwalKuliahState();
}
class _JadwalKuliahState extends State<JadwalKuliah> {
String? _selectedItem1;
List<int> listitems = [1, 2, 3, 4, 5, 6, 7, 8];
int semester = 1;
List<Datum> data = [];
@override
void initState() {
super.initState();
fetchData(semester);
}
fetchData(int smt) async {
final apiResponse = await JadwalKuliahProvider.getJadwalKuliah(smt);
setState(() {
data = (apiResponse);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: const Size.fromHeight(kToolbarHeight),
child: CustomAppbar(
title: 'Jadwal Kuliah',
),
),
body: Center(
child: Padding(
padding: const EdgeInsets.only(
left: 14,
top: 14,
right: 14,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Header(),
listJadwal(),
],
),
),
),
);
}
Widget Header() {
return Container(
padding: const EdgeInsets.only(left: 12, right: 8),
width: double.infinity,
height: 50,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
spreadRadius: 1,
blurRadius: 9,
offset: const Offset(
1,
2,
),
),
],
),
child: DropdownButtonHideUnderline(
child: DropdownButton(
// hint: const Text('Pilih Semester'),
value: semester,
onChanged: (value) {
setState(
() {
semester = value!;
},
);
fetchData(value!);
},
hint: const SizedBox(
width: 150, //and here
child: Text(
"Pilih Semester",
style: TextStyle(color: Colors.grey),
),
),
items: listitems.map(
(itemone) {
return DropdownMenuItem(
value: itemone, child: Text(itemone.toString()));
},
).toList(),
),
),
);
}
Widget listJadwal() {
return FutureBuilder<List<Datum>>(
future: JadwalKuliahProvider.getJadwalKuliah(semester),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Expanded(
child: ListView.builder(
padding: const EdgeInsets.only(
top: 10,
),
physics: const BouncingScrollPhysics(),
itemCount: snapshot.data!.length,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.only(top: 14),
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: const BorderRadius.all(
Radius.circular(
10,
),
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
spreadRadius: 1,
blurRadius: 9,
offset: const Offset(
1, 2), // changes position of shadow
),
],
),
padding: const EdgeInsets.symmetric(
horizontal: 16, vertical: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
// "Audit Bank Syariah (SPI)",
snapshot.data![index].nmMk.toString(),
style: bold6,
),
Text(
snapshot.data![index].dosenAjar!.nmDosen.toString(),
style: regular7,
),
Text(
// "Perbankan Syariah",
snapshot.data![index].prodi.toString(),
style: regular7,
),
const SizedBox(
height: 5,
),
Row(
children: [
Container(
height: 30,
width: 70,
decoration: BoxDecoration(
color: const Color(0xffECECEC),
borderRadius: BorderRadius.circular(5)),
child: Padding(
padding: const EdgeInsets.all(5),
child: Row(
children: [
Icon(
Icons.location_on_outlined,
color: greyColor,
size: 18,
),
const SizedBox(
width: 3,
),
Text(
'A201',
// snapshot.data![index]
// .dosenAjar!.nmDosen
// .toString(),
style: bold6.copyWith(color: greyColor),
),
],
),
),
),
const SizedBox(
width: 10,
),
Container(
height: 30,
width: 120,
decoration: BoxDecoration(
color: const Color(0xffECECEC),
borderRadius: BorderRadius.circular(5)),
child: Padding(
padding: const EdgeInsets.all(5),
child: Row(
children: [
Icon(
Icons.watch_later_outlined,
color: greyColor,
size: 18,
),
const SizedBox(
width: 3,
),
const SizedBox(
width: 3,
),
Text(
// snapshot
// .data![index].jamAwal
// .toString(),
'09:00',
style: bold6.copyWith(
color: greyColor,
),
),
const SizedBox(
width: 3,
),
Text(
'-',
// snapshot
// .data![index].jamAkhir
// .toString(),
style: bold6.copyWith(
color: greyColor,
),
),
const SizedBox(
width: 3,
),
Text(
'12:00',
// snapshot
// .data![index].jamAkhir
// .toString(),
style: bold6.copyWith(
color: greyColor,
),
),
],
),
),
),
const SizedBox(
width: 10,
),
SizedBox(
height: 30,
width: 100,
child: ElevatedButton.icon(
onPressed: () {},
icon: const Icon(
Icons.download,
size: 17,
color: Color(0xffCEE1FF),
),
label: Text(
'Materi',
style: bold6,
),
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xff0062FF),
),
),
),
],
),
const SizedBox(
height: 10,
),
Container(
width: double.infinity,
height: 38,
child: TextButton(
onPressed: () {},
style: TextButton.styleFrom(
backgroundColor: const Color(0xffC9F7F5),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
child: Text(
"Absen",
style: bold5.copyWith(
color: const Color(
0xff1BC5BD,
),
),
),
),
),
],
),
),
);
}),
);
} else {
return Center(
child: CircularProgressIndicator(color: primaryColor),
);
}
},
);
3
Answers
In your
listJadwalchangeCircularProgressIndicatorto this:Try below code I have same issue occurred I resolve this following code:
Try this, Column will use your full screen size to center the widget