Align ListView's children to top and bottom

Question

TL;DR

Is it possible to align ListView's children like Column's spaceBetween alignment?

Like in this screenshot:

Problem that I tried to solve:

In the beginning I had a Column widget with 2 children. The Column's alignment was set to spaceBetween. It was what I wanted, one widget at the top, one at the bottom. But then when I clicked to input to add credentials, the keyboard caused an overflow issue described in this GitHub issue. So to fix it, I replaced the Column with ListView. But now my children widgets are stuck at the top of the screen.

My full LoginScreen code:

import 'package:flutter/material.dart';

import '../widgets/button.dart';
import '../widgets/input.dart';
import '../widgets/logo.dart';

class LoginScreen2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Background(),
          Wrapper(),
        ],
      ),
    );
  }
}

class Background extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.bottomCenter,
          end: Alignment.topCenter,
          colors: [
            Color(0xfff6f6f6),
            Colors.white,
          ],
        ),
      ),
    );
  }
}

class Wrapper extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Logo(LogoColor.dummy_black),
        Align(
          alignment: Alignment.bottomCenter,
          child: Padding(
            padding: const EdgeInsets.all(20),
            child: BottomPart(),
          ),
        ),
      ],
    );
  }
}

class BottomPart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Input('User name'),
        Input('Password'),
        Button(
          'Log in',
          onPressed,
        ),
      ],
    );
  }

  void onPressed() {}
}

Answer 1

You could use ListView's property reverse

reverse: true,

And then change the order of the ListView children.

Answer 2

Find a solution. You should wrap your Column in IntrinsicHeight and ConstrainedBox with minHeight.

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: IntrinsicHeight(
        child: ConstrainedBox(
          constraints: BoxConstraints(
            minHeight: MediaQuery.of(context).size.height,
          ),
          child: Column(
            children: [
              Container(
                height: 100,
                width: double.infinity,
                color: Colors.yellow,
                child: Text('1', style: TextStyle(color: Colors.black)),
              ),
              Spacer(),
              Container(
                height: 100,
                width: double.infinity,
                color: Colors.red,
                child: Text('2', style: TextStyle(color: Colors.black)),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 3

Try using SizedBox(height:50.0) // or any other value in b/w Logo widget and Align(bottom part).

 return ListView(
      children: <Widget>[
        Logo(LogoColor.dummy_black),
        SizedBox(height: MediaQuery.of(context).size.height/ 3),// you will get value which is 1/3rd part of height of your device screen
        Align(
          alignment: Alignment.bottomCenter,
          child: Padding(
            padding: const EdgeInsets.all(20),
            child: BottomPart(),
          ),
        ),
      ],
    );

Answer 4

Finally I found out soln to this problem. Use Code :`

Align(
    alignment: Alignment.bottomCenter,
    child: ListView(
      shrinkWrap: true,
      children: <Widget>[
        // Your Widget Here
      ],
    ),
  ),