Home > Software engineering >  How to change circularprogressindicator in Center
How to change circularprogressindicator in Center

Time:01-16

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.

enter image description here

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),
          );
        }
      },
    );

CodePudding user response:

In your listJadwal change CircularProgressIndicator to this:

} else {
    return Expanded(
      child: Center(
         child: CircularProgressIndicator(color: primaryColor),
      ),
    );
}
    

CodePudding user response:

Try below code I have same issue occurred I resolve this following code:

 SizedBox(
   height: MediaQuery.of(context).size.height / 1.0,//change on your need
   child: Center(
       child: CircularProgressIndicator(color: primaryColor),
        ),
    ),

CodePudding user response:

Try this, Column will use your full screen size to center the widget

body: Column(mainAxisAlignment: MainAxisAlignment.center,
children: [
  Center(
    child: CircularProgressIndicator(),
  )
],),
  • Related