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.

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.

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)?

CodePudding user response：

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.

CodePudding user response：

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