How to fix a widget in the footer with flutter

Question

I'd like to fix an Image in the footer of the screen, so in different phones it stays always in the bottom .

What I tried

I tried to use Column, and then in the mainAxisAlignment I would use MainAxisAlignment.end

Additional Question : Is there a way to create a canvas and place it on the image, so I can use relative coordinate on the image if I want to draw something instead of the full screen

Answer 1

You can use the bottomSheet in the scaffold. This automatically allows you to have the widget fixed at the bottom of the display

return Scaffold(
  bottomSheet: yourWidget(),
  body: Container(color: Colors.red,)
);

Answer 2

Please write a question for each question you have in the future - that makes them more searchable and useful in the future for other people.

However, I think I can answer both pretty simply so I will.

Firstly, if you want an image to always be at the foot of the screen, you can simply use a the bottomNavigationBar property of the Scaffold. It looks like it would have to be a BottomNavigationBar but you can actually pass any widget you'd like.

Here's the code (you can paste it into a file and run that file as it's self-enclosed):

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        bottomNavigationBar: Stack(
          children: [
            new Container(
              height: 100.0,
              color: Colors.green,
            ),
            Positioned(
              left: 0.0,
              right: 0.0,
              top: 0.0,
              bottom: 0.0,
              child: new CustomPaint(
                painter: Painter(),
                size: Size.infinite,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class Painter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawLine(Offset.zero, size.bottomRight(Offset.zero), Paint());
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // bad, but okay for example
    return true;
  }
}

I've just used a simple painter to illustrate the 'canvas' and how to position it the same as the picture, and a Container with a colour instead of a picture as I don't feel like adding assets to my project. The Positioned widget makes it so that the canvas can be sized to the image and not the other way around, as would happen if you just put them right into the Stack.

Note that if you don't want to use scaffold, you could probably also do this using a Column, with whatever you want for the body wrapped in an Expanded widget (as that will make it expand to fit as much space as possible, which should be everything except the space the image takes up).

Answer 3

you can use persistentFooterButtons widget inside Scaffold

   @override
     Widget build(BuildContext context) {
     // TODO: implement build
       return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
       title: Text('Demo App'),
        ),
    body: _questionIndex < _questions.length
        ? Quiz(
            list: _questions,
            selectHandler: _printAns,
            questionIndex: _questionIndex)
        : Result(_totalScore, _resetQuiz),
    persistentFooterButtons: <Widget>[

      Row(
        children: <Widget>[
          RaisedButton(
            onPressed: null,
            child: Text('Prev'),
          ),
          RaisedButton(
            onPressed: null,
            child: Text('Next'),
          ),
        ],
      )
    ],
  ),
);