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

How to fix a widget to the bottom of the screen without causing render overflow in Flutter?

I’d like to achieve the effect shown on the screenshots below:

First scenario:

The green widget is fixed to the bottom. Container isn’t scrollable, as the content is short enough.

enter image description here

Second scenario:

The green widget is pushed to the bottom. The container is scrollable, as the content is too long to fit in the viewport.

enter image description here

The problem is, that since technically SingleChildScrollView's height is infinite, it’s impossible to push the green widget to the end of the viewport.

So, what needs to be done for this effect to be achieved (also, both the blue and the green widgets are of dynamic height)?

Tags:

2

Answers


  1. 0

    Try this:

    import 'package:flutter/material.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Column(
        children: [
          Expanded(
              child: SingleChildScrollView(
            child: Container(
              height: 300,
              color: Colors.blue,
            ),
          )),
          Container(
            height: 100,
            color: Colors.green,
          )
        ],
      )),
    );
  }
}

    Mess around with the blue containers height to get scrolling to work. The key Widget here is Expanded as it makes it’s child height be the greatest room available inside the column. It will take up the rest of the space that the green container is not using

    Id highly recommend reading this article to better understand how widgets are laid out in Flutter.

    Login or Signup to reply.
  2. 0

    use bottomNavigationBar parameter in you Scaffold for fixed widget to bottom screen

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search