Flutter底部按钮固定处理方案

在这里提供一个demo

import 'package:flutter/material.dart';

class BottomButtonPage extends StatelessWidget {
  const BottomButtonPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('底部滚动按钮示例'),
      ),
      body: SafeArea(
        child: Row(
          children: [
            const  Expanded(
                child: ScrollWidget(
              count: 10,
            )),
            Container(
              width: 1,
              height: double.infinity,
              color: Colors.amber,
            ),
            const  Expanded(
                child: ScrollWidget(
              count: 5,
            ))
          ],
        ),
      ),
    );
  }
}

class ScrollWidget extends StatelessWidget {

   final int count;

   const ScrollWidget({required this.count,super.key});

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverList.builder(
            itemCount: count,
            itemBuilder: (BuildContext context, int index) {
              return const FlutterLogo(
                size: 100,
              );
            }),
        SliverFillRemaining(
          hasScrollBody: false,
          child: Align(
            alignment: Alignment.bottomCenter,
            child: Container(
                padding: const EdgeInsets.fromLTRB(15, 15, 15, 0),
                width: double.infinity,
                child: ElevatedButton(
                  onPressed: () {},
                  style:  ButtonStyle(
                      foregroundColor: WidgetStateProperty.all(Colors.white),
                      backgroundColor:
                          WidgetStateProperty.all(Colors.blueAccent)),
                  child: const Text('提交'),
                )),
          ),
        )
      ],
    );
  }
}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容