How to place one widget at top of the screen and other at the bottom in flutter?

Question

import 'package:flutter/material.dart';

class Example extends StatelessWidget {
  const Example({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ListView(children: [
        Column(
          children: [
            Expanded(child: Text('Hello')),
            Expanded(child: Text('Nithya'))
          ],
        )
      ]),
    );
  }
}

I want whole page to be scrollable and widgets placed space between vertically. The tried using SingleChildScrollView instead of ListView but that also didn't work. I tried replacing Expanded with Flexible that also didn't work. How to place text widgets one at top and other at bottom.

Answer 1

Refer below working code

Explanation:

you can use Scaffold root widget body property to make your whole screen as body...

I have using Column widget to align our all body Widgets in a vertical direction.

mainAxisAlignment: MainAxisAlignment.spaceBetween.

Inside column MainAxisAlignment act as a vertical alignment.

I have declared two text widgets inside Column.above code said to flutter that align my two text widgets one to top and another to bottom...

that's it you can take it as a template.

if you need to make it scrollable you can wrap it with SingleChildScrollView Widget...

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: const [
              Text(
                  "Hello"
              ),
              Text(
                  "Nithya"
              ),
            ],

          ),
        ),
      ),
    );
  }

Answer 2

first of all using the Expanded widget means that you reserve the available area of the screen and second to dock one text widget on top, and second, on the bottom, you should first reserve the full available height of the screen by wrapping it in the SizedBox widget second remove Expanded and third use MainAxisAlignment.spaceBetween in column I just bring some changes to your code like following

ListView(
    children: [
      SizedBox(
        height: MediaQuery.of(context).size.height,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: const [
            Text('Hello'),
            Text('Nithya'),
          ],
        ),
      )
    ],
  ),

Answer 3

If you mean having the 2 widgets pinned to the top and bottom then use Stack .

For example:

class Example extends StatelessWidget {
  const Example({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Stack(
        children: [
          ListView(
            children: Colors.primaries.map((color) {
              return Container(
                color: color,
                height: 100,
              );
            }).toList(),
          ),
          const Align(
            alignment: Alignment.topCenter,
            child: Text(
              'Hello',
              style: TextStyle(
                fontSize: 70,
              ),
            ),
          ),
          const Align(
            alignment: Alignment.bottomCenter,
            child: Text(
              'Nithya',
              style: TextStyle(
                fontSize: 70,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 4

You place the top and the bottom in a column. You fill between them with an Expanded and place the ListView in it:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Top'),
        Expanded(
          child: ListView.builder(
            itemBuilder: (context, i) {
              return Text('Infinite! $i');
            },
          ),
        ),
        Text('Bottom'),
      ],
    );
  }
}