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

1.3k views Asked by At

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.

1

There are 1 answers

8
Saiful Islam Adar On BEST ANSWER

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"))
            ],
          ),
        ),
      ),
    );
  }
}