Question 75594 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter trying to make footer scrollable with content when the screen size is small

I want to achieve the exact behavior like below link in Flutter:

https://jsfiddle.net/6vzcosyj/

html:

<html>
<body>
<div class="container">
<div class="content">
I am content<br>
I am content<br>I am content<br>I am content<br>I am content<br>
I am content<br>
I am content<br>I am content<br>I am content<br>I am content<br>
</div>
<div class="footer">
I am footer
</div>
</div>
</body>
</html>

css:

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.content {
}

.footer {
  margin-top: auto;
}

In above link, if there is space, then content will always try to expand it self, and the footer is always in the bottom. But if there is not enough space, the content and footer can be scroll and the footer will no longer stick at the bottom.

You can try to adjust the size of the window in the above link to get what I want to achieve.

I cannot make this behavior in Flutter, so any advice?

Thanks.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I finally found a solution:

    https://stackoverflow.com/a/68572964/13774019

    class ScrollOrFitBottom extends StatelessWidget {
  final Widget scrollableContent;
  final Widget bottomContent;

  ScrollOrFitBottom({this.scrollableContent, this.bottomContent});

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverFillRemaining(
          hasScrollBody: false,
          child: Column(
            children: <Widget>[
              Expanded(child: scrollableContent),
              bottomContent
            ],
          ),
        ),
      ],
    );
  }
}

  2. 0 
    Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Column(
      children: [
        Text('data'),
        Text('data'),
        Text('data'),
        Text('data'),
        Text('data'),
              ],
                ),
     Column(
       children: [
         Text('Iam the Footer'),
                 ],
            )
          ],
        ),
    Login or Signup to reply.
  3. 0

    Here is how to do it in Flutter :

    import 'package:flutter/material.dart';
        
class Html extends StatefulWidget {
  const Html({Key? key}) : super(key: key);

  @override
  State<Html> createState() => _HtmlState();
}

class _HtmlState extends State<Html> {

  final ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Html',
          style: TextStyle(
            fontSize: 42,
            color: Colors.white,),
        ),
      ),
      body: CustomScrollView(
        controller: _scrollController,
        physics: const BouncingScrollPhysics(),
        slivers: [
          SliverList(
            delegate: SliverChildBuilderDelegate(
                  (context, index) {
                return const Padding(
                  padding: EdgeInsets.symmetric(
                      vertical: 7, horizontal: 30),
                  child: Text('I am content'),
                );
              },
              childCount: 10,
            ),
          ),
          SliverFillRemaining(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.end,
              children:[
                const Text('I am Footer'),
                SizedBox(width: width,),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search