Flutter: How to make a ListView's height match_parent in Flutter

Question

ListView's height should be as windows's height. So when keyboard opens, user can scroll down to see the widgets which covered by keyboard. And Widgets shouldn't change their position. I've used Align widget to position them, and wrapped with a Stack widget. In other words: it should be exactly as Instagram login page.

Saiful Islam Adar · Accepted Answer · 2020-04-11T08:27:58.857

0

I hope this helps: demo : https://i.ibb.co/g7C3K7K/dmeo.gif

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final key = GlobalKey<ScaffoldState>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: key,
      body: SingleChildScrollView(
        child: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Text(
                "Welcome to the login page",
                style: Theme.of(context).textTheme.display1,
              ),
              TextField(
                decoration: InputDecoration(hintText: "Name"),
              ),
              FlatButton(
                  onPressed: () {
                    key.currentState.showSnackBar(SnackBar(
                      content:
                          Text("I won't say your name but stay home, stay safe!"),
                    ));
                  },
                  child: Text("Say my name"))
            ],
          ),
        ),
      ),
    );
  }
}

edited Apr 11 '20 at 08:27

answered Apr 10 '20 at 13:46

Saiful Islam Adar

211
2
8

Thanks but I want to align the button to bottom of the screen. So this margin with SizedBox approach isn't gonna be responsive in screens with different height – Abdulaziz Abduqodirov Apr 10 '20 at 16:49
@AbdulazizAbduqodirov check the latest edited answer – Saiful Islam Adar Apr 11 '20 at 08:28
Thank you. It worked. One more question: can we do that with AppBar? – Abdulaziz Abduqodirov Apr 13 '20 at 10:16
If you want an sticky appbar which will not scroll then add an appbar in your scaffold. If you want an appbar that will scroll then add app bar in the column. Cheers – Saiful Islam Adar Apr 13 '20 at 13:02
I've used the sticky appbar. But it affected to height. After adding appbar the Container which is wrapped with SingleChildScrollView is drawn higher than screen. So buttons aligned to bottom is not visible – Abdulaziz Abduqodirov Apr 14 '20 at 01:29
If you want to use stick then you will have to minus 56 from height: MediaQuery.of(context).size.height, set it to height: MediaQuery.of(context).size.height - 56, – Saiful Islam Adar Apr 14 '20 at 09:29
https://stackoverflow.com/questions/50075945/appbar-height-in-flutter – Saiful Islam Adar Apr 15 '20 at 14:46
You can use this to calculate the height and subtract it from the total height of the view – Saiful Islam Adar Apr 15 '20 at 14:47

Flutter: How to make a ListView's height match_parent in Flutter

1 Answers1