How To Make A Widget Just Stick To Bottom Of Page

Question

I am trying to build a view as in the image below. The tweet your reply is just stack at the bottom while the other stuff are scrollable. I've been banging my head on how to achieve this for a couple of hours. Exactly;y like in the image below. There are four sections:

1. The post (tweet)
2. The row of icons
3. The comments (which scrolls)
4. The tweet your reply which is static

Answer 1

The solution would be to use the Align Widget. So in your Stack you would put as the last element in the stack:

Align(
  alignment: Alignment.bottomCenter,
  child: // your widget would go here
),

I'm judging by your question that you have figured out how to do all of the other parts, and was just wondering about the bottom part. You can use Align to align things in other ways as well (such as topCenter, bottomLeft, etc). Hope this helps, and if so please up vote and accept as answer and if not leave a comment below.

---

Edit: I wouldn't use a Stack. I would wrap the entire widget tree in a Column, and put the post in a Expanded Widget with a flex factor of 1, and a Row of Icons below it. Then put a ListView in an Expanded Widget with a flex of 4 (you can experiment with values). And lastly in the Column I would add you "Tweet you reply" Widget.

Simple layout code to give you an idea of how to implement it:

Column(
      children: <Widget>[
        Expanded(
          child: ListView(
            shrinkWrap: true,
            children: <Widget>[
              //your post
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  // your icons
                ],
              ),

              //your comments
            ],
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: // you textField,
        ),
      ],
    )

Answer 2

Try this

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Expanded(
              child: Column(
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.all(50),
                    child: Center(
                      child: Text(
                        "A POST"
                      ),
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      Icon(Icons.details),
                      Icon(Icons.print),
                      Icon(Icons.translate),
                      Icon(Icons.map)
                    ],
                  ),
                  Expanded(
                    child: ListView(
                      children: List.generate(10, (index) => ListTile(title: Text("Comment $index"),)),
                    ),
                  )
                ],
              ),
            ),
            TextField(
              decoration: InputDecoration(
                labelText: "Tweet your reply"
              ),
            )
          ],
        ),
      ),
    );
  }
}

The output:

If you want the post to scroll with it, this should help

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Expanded(
              child: SingleChildScrollView(
                child: Column(
                  children: <Widget>[
                    Container(
                      padding: EdgeInsets.all(50),
                      child: Center(
                        child: Text(
                          "A POST"
                        ),
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: <Widget>[
                        Icon(Icons.details),
                        Icon(Icons.print),
                        Icon(Icons.translate),
                        Icon(Icons.map)
                      ],
                    ),
                    Column(
                      children: List.generate(10, (index) => ListTile(title: Text("Comment $index"),)),
                    )
                  ],
                ),
              ),
            ),
            TextField(
              decoration: InputDecoration(
                labelText: "Tweet your reply"
              ),
            )
          ],
        ),
      ),
    );
  }
}