Fully Scrollable Page Issue in Flutter

Question

well I have this SingleChildScrollView as my body

but I cannot fully scroll to the bottom

class LigoLog extends StatefulWidget {
  const LigoLog({super.key});

  @override
  State<LigoLog> createState() => _LigoLogState();
}

class _LigoLogState extends State<LigoLog> {
  final _box = Hive.box('ligo');

  @override
  Widget build(BuildContext context) {
    var deviceWidth = MediaQuery.of(context).size.width;
    var deviceHeight = MediaQuery.of(context).size.height;

    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        toolbarHeight: 60.0,
        iconTheme: const IconThemeData(
          color: Colors.white,
        ),
        title: Text(
          'appbarTitle'.tr,
          style: const TextStyle(
            fontFamily: 'Lalezar',
            fontSize: 20.0,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
        backgroundColor: const Color(0xffF85E63),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            Hive.box('ligo').clear();
          });
        },
        backgroundColor: const Color(0xffF85E63).withOpacity(0.5),
        child: const Icon(
          Icons.delete_rounded,
          color: Colors.white,
          size: 25.0,
        ),
      ),
      resizeToAvoidBottomInset: false,
      body: SingleChildScrollView(
              physics: const BouncingScrollPhysics(),
              child: SizedBox(
                width: deviceWidth,
                height: deviceHeight,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    SizedBox(
                      width: 350.0,
                      height: deviceHeight,
                      child: ListView.builder(
                        shrinkWrap: true,
                        itemCount: _box.length,
                        itemBuilder: (context, index) {
                          Log log = _box.getAt(index);
                          return Padding(
                            padding: const EdgeInsets.only(top: 10.0),
                            child: Container(
                              height: 210.0,
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(8.0),
                                border: Border.all(
                                  width: 1.5,
                                  color: const Color(0xffF85E63),
                                ),
                              ),
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: <Widget>[
                                  Padding(
                                    padding: const EdgeInsets.symmetric(
                                      horizontal: 8.0,
                                    ),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: <Widget>[
                                        Text(
                                          'responsibleAdminLabel'.tr,
                                          style: const TextStyle(
                                            color: Color(0xffF85E63),
                                            fontSize: 18.5,
                                            fontFamily: 'Lalezar',
                                            fontWeight: FontWeight.normal,
                                          ),
                                        ),
                                        const SizedBox(width: 8.0),
                                        Text(
                                          log.responsibleAdmin,
                                          style: TextStyle(
                                            color: LigoStatus.statusColor,
                                            fontSize: 18.0,
                                            fontFamily: 'Lalezar',
                                            fontWeight: FontWeight.normal,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.symmetric(
                                      horizontal: 8.0,
                                    ),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: <Widget>[
                                        Text(
                                          'transactionDate'.tr,
                                          style: const TextStyle(
                                            color: Color(0xffF85E63),
                                            fontSize: 18.5,
                                            fontFamily: 'Lalezar',
                                            fontWeight: FontWeight.normal,
                                          ),
                                        ),
                                        const SizedBox(width: 8.0),
                                        Text(
                                          log.date,
                                          style: TextStyle(
                                            color: LigoStatus.statusColor,
                                            fontSize: 18.0,
                                            fontFamily: 'Lalezar',
                                            fontWeight: FontWeight.normal,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.symmetric(
                                      horizontal: 8.0,
                                    ),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: <Widget>[
                                        Text(
                                          'userLogLabel'.tr,
                                          style: const TextStyle(
                                            color: Color(0xffF85E63),
                                            fontSize: 18.5,
                                            fontFamily: 'Lalezar',
                                            fontWeight: FontWeight.normal,
                                          ),
                                        ),
                                        const SizedBox(width: 8.0),
                                        Text(
                                          '@${log.user}',
                                          style: TextStyle(
                                            color: LigoStatus.statusColor,
                                            fontSize: 18.0,
                                            fontFamily: 'Lalezar',
                                            fontWeight: FontWeight.normal,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.symmetric(
                                      horizontal: 8.0,
                                    ),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: <Widget>[
                                        Text(
                                          'userAmountLabel'.tr,
                                          style: const TextStyle(
                                            color: Color(0xffF85E63),
                                            fontSize: 18.5,
                                            fontFamily: 'Lalezar',
                                            fontWeight: FontWeight.normal,
                                          ),
                                        ),
                                        const SizedBox(width: 8.0),
                                        Text(
                                          log.amount,
                                          style: TextStyle(
                                            color: LigoStatus.statusColor,
                                            fontSize: 18.0,
                                            fontFamily: 'Lalezar',
                                            fontWeight: FontWeight.normal,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.symmetric(
                                      horizontal: 8.0,
                                    ),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: <Widget>[
                                        Text(
                                          'userCostInDollarsLabel'.tr,
                                          style: const TextStyle(
                                            color: Color(0xffF85E63),
                                            fontSize: 18.5,
                                            fontFamily: 'Lalezar',
                                            fontWeight: FontWeight.normal,
                                          ),
                                        ),
                                        const SizedBox(width: 8.0),
                                        Text(
                                          log.costInDollars,
                                          style: TextStyle(
                                            color: LigoStatus.statusColor,
                                            fontSize: 18.0,
                                            fontFamily: 'Lalezar',
                                            fontWeight: FontWeight.normal,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.symmetric(
                                      horizontal: 8.0,
                                    ),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: <Widget>[
                                        Text(
                                          'userCostInTomansLabel'.tr,
                                          style: const TextStyle(
                                            color: Color(0xffF85E63),
                                            fontSize: 18.5,
                                            fontFamily: 'Lalezar',
                                            fontWeight: FontWeight.normal,
                                          ),
                                        ),
                                        const SizedBox(width: 8.0),
                                        Text(
                                          log.costInTomans,
                                          style: TextStyle(
                                            color: LigoStatus.statusColor,
                                            fontSize: 18.0,
                                            fontFamily: 'Lalezar',
                                            fontWeight: FontWeight.normal,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.symmetric(
                                      horizontal: 8.0,
                                    ),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: <Widget>[
                                        Text(
                                          'userStatusLabel'.tr,
                                          style: const TextStyle(
                                            color: Color(0xffF85E63),
                                            fontSize: 18.5,
                                            fontFamily: 'Lalezar',
                                            fontWeight: FontWeight.normal,
                                          ),
                                        ),
                                        const SizedBox(width: 8.0),
                                        Text(
                                          log.status,
                                          style: TextStyle(
                                            color: LigoStatus.statusColor,
                                            fontSize: 18.0,
                                            fontFamily: 'Lalezar',
                                            fontWeight: FontWeight.normal,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          );
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ),
    );
  }
}

I Tried some things like using double.infinity as height but it didn't work... or maybe I did sth wrong.

I Would be thankful If you help me with this.

Answer 1

There are several ways to fix this.

First way, you just need to add additional padding to the bottom of the ListView.

ListView.builder(
  padding: const EdgeInsets.only(bottom: 160.0),
  // ...

Apart from fixing the issue, adding bottom padding to a ListView is generally good for the UX.

---

Second way, remove the unnecessary widget wraps. ListView is a scrollable widget, so wrapping it in a SingleChildScrollView is unnecessary. Change your widget tree from

SingleChildScrollView > SizedBox > Column > SizedBox > ListView.builder

to

Center > SizedBox > ListView.builder

Now the code should look like this:

body: Center(
  child: SizedBox(
    width: 350.0,
    child: ListView.builder(
      // ...
    ),
  ),
)