Flutter列表滚动到底部添加额外空间，避免被FloatingActionButton遮挡

我通过List.generate创建了展示全部交易的列表，页面中存在一个FloatingActionButton。当滚动至列表最后一项交易时，交易卡片的右侧会被FloatingActionButton遮挡，无法完整查看，希望在列表滚动到底部时添加额外空间避免遮挡。

我的实现代码：

class ShowTransactionWidget extends StatelessWidget {
  final List<Transaction> mylist;

  ShowTransactionWidget({required this.mylist});

  //Todo add little bit more space while scrolling


  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Padding(
          padding: EdgeInsets.only(left: 20, right: 20),
          child: Column(
            children: List.generate(mylist.length, (index) {
              return Column(
                children: [
                  TransactionCard(transaction: mylist[index],),
                  const Padding(
                    padding: const EdgeInsets.only(left: 20.0, top: 8.0),
                    child: Divider(
                      thickness: 0.9,
                    ),
                  )
                ],
              );
            }),
          ),
        ),
      ],
    );
  }

}

解决方案 #

方法一：直接在列表末尾添加固定间距 #

在List.generate生成的列表后追加一个带高度的SizedBox，预留出足够避开FAB的空间：

// 修改Column的children部分
children: [
  ...List.generate(mylist.length, (index) {
    return Column(
      children: [
        TransactionCard(transaction: mylist[index],),
        const Padding(
          padding: const EdgeInsets.only(left: 20.0, top: 8.0),
          child: Divider(
            thickness: 0.9,
          ),
        )
      ],
    );
  }),
  // 底部额外空间，高度可根据FAB大小调整（默认FAB高56，加16边距总共72，这里设80留余量）
  SizedBox(height: 80),
],

方法二：改用ListView（推荐） #

如果列表需要滚动，直接用ListView.builder替代Column，通过设置padding属性给底部留空间，同时ListView自带滚动优化：

@override
Widget build(BuildContext context) {
  return Padding(
    padding: EdgeInsets.only(left: 20, right: 20),
    child: ListView.builder(
      // 底部预留空间
      padding: EdgeInsets.only(bottom: 80),
      itemCount: mylist.length,
      itemBuilder: (context, index) {
        return Column(
          children: [
            TransactionCard(transaction: mylist[index],),
            const Padding(
              padding: const EdgeInsets.only(left: 20.0, top: 8.0),
              child: Divider(
                thickness: 0.9,
              ),
            )
          ],
        );
      },
    ),
  );
}

方法三：动态适配FAB高度 #

如果FAB是自定义尺寸，可通过MediaQuery获取系统底部内边距，再加上FAB高度和额外边距，实现动态适配：

@override
Widget build(BuildContext context) {
  // 计算所需底部间距：系统底部内边距 + FAB默认高度56 + 额外边距16
  final bottomSpacing = MediaQuery.of(context).padding.bottom + 56 + 16;

  return Column(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Padding(
        padding: EdgeInsets.only(left: 20, right: 20),
        child: Column(
          children: [
            ...List.generate(mylist.length, (index) {
              return Column(
                children: [
                  TransactionCard(transaction: mylist[index],),
                  const Padding(
                    padding: const EdgeInsets.only(left: 20.0, top: 8.0),
                    child: Divider(
                      thickness: 0.9,
                    ),
                  )
                ],
              );
            }),
            SizedBox(height: bottomSpacing),
          ],
        ),
      ),
    ],
  );
}

内容的提问来源于stack exchange，提问作者Irfan Ganatra