Footer covering other Scaffold widgets

Asked

Viewed 82 times

0

I’m trying to make a very simple movie listing app, but when I did a footer, it was on top of the Scaffold widgets, covering some of them, like this:

Follows the code:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<MyApp> {
  bool mudado = false;
  final amountGet = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Isso é uma appBar'),
        backgroundColor: Colors.orange,
        centerTitle: true,
      ),
      body: Padding(
        padding: EdgeInsets.all(30),
        child: Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Container(
                child: TextField(
                  controller: amountGet,
                  textAlign: TextAlign.left,
                  decoration: InputDecoration(
                    hintText: 'Digite aqui sua busca',
                    hintStyle: TextStyle(color: Colors.grey),
                  ),
                ),
              ),
              body(),body(),body(),body(),body(),body(),body(),body(),body(),
            ],
          ),
        ),
      ),
      bottomSheet: Expanded(
        flex: 2,
        child: Container(
          color: Colors.grey[200],
          height: 230,
          width: 700,
          child: Padding(
            padding: EdgeInsets.all(30),
            child: Column(
              children: [
                Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      "nome do filme",
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.grey[700],
                      ),
                    ),
                    Text(
                      "R\$ 55,00",
                      style: TextStyle(
                          color: Colors.orange,
                          fontWeight: FontWeight.bold,
                          fontSize: 20),
                    ),
                  ],
                ),
                Padding(
                  padding: EdgeInsets.only(top: 20),
                  child: Row(
                    children: [
                      Text(
                        "VALOR TOTAL SELECIONADO: R\$ 65,40",
                        style: TextStyle(
                          color: Colors.grey[700],
                        ),
                      ),
                    ],
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 20),
                  child: FlatButton(
                    onPressed: () {
                      return showDialog(
                        context: context,
                        builder: (context) {
                          return AlertDialog(
                            content: Text(amountGet.text),
                          );
                        },
                      );
                    },
                    color: Colors.indigo[800],
                    child: Text(
                      'Comprar',
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  body() {
    return Column(
      children: [
        Padding(
          padding: EdgeInsets.only(left: 15),
          child: Row(
            children: [
              Checkbox(
                focusColor: Colors.grey,
                activeColor: Colors.grey[400],
                value: true,
                onChanged: (value) => value,
              ),
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    "Total:",
                    textScaleFactor: 1,
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.grey[700],
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.fromLTRB(30, 0, 20, 0),
                    child: Text(
                      "R\$ 55,00",
                      style: TextStyle(
                          color: Colors.grey[700],
                          fontWeight: FontWeight.bold,
                          fontSize: 20),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
        Padding(
          padding: EdgeInsets.only(left: 30, right: 30),
          child: Container(
            decoration: BoxDecoration(
              border: Border(
                left: BorderSide(
                  width: 2,
                  color: Colors.grey[400],
                ),
              ),
            ),
            child: Padding(
              padding: EdgeInsets.fromLTRB(20, 0, 20, 5),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Row(
                    children: [
                      Text(
                        "Duração: 120 minutos",
                        textScaleFactor: 1.2,
                      ),
                    ],
                  ),
                  Row(
                    children: [
                      Text(
                        "Data Lançamento: 00/00/0000",
                        textScaleFactor: 1.2,
                      ),
                    ],
                  ),
                  Row(
                    children: [
                      Text(
                        "Direção: fulano",
                        textScaleFactor: 1.2,
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}
flutter dart

1 answer

1


As you want to display a list, from what I understand, with its current structure you can use the Widget SingleChildScrollView, so that you can scroll between the items.

How will you work with a bottomSheet fixed, an output is you resize your body to fit inside the screen.

Follow the example below:

class MyWidget extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<MyWidget> {
  bool mudado = false;
  final amountGet = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Isso é uma appBar'),
        backgroundColor: Colors.orange,
        centerTitle: true,
      ),
      body: Container(
        color: Colors.red,
        padding: EdgeInsets.all(30),
        height: MediaQuery.of(context).size.height - kToolbarHeight - 230,
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Container(
                child: TextField(
                  controller: amountGet,
                  textAlign: TextAlign.left,
                  decoration: InputDecoration(
                    hintText: 'Digite aqui sua busca',
                    hintStyle: TextStyle(color: Colors.grey),
                  ),
                ),
              ),
              body(),body(),body(),body(),body(),body(),body(),body(),body(),body(),
            ],
          ),
        ),
      ),
      bottomSheet: 
        Container(
          color: Colors.grey[200],
          height: 230,
          width: double.infinity,
          child: Padding(
            padding: EdgeInsets.all(30),
            child: Column(
              children: [
                Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      "nome do filme",
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.grey[700],
                      ),
                    ),
                    Text(
                      "R\$ 55,00",
                      style: TextStyle(
                          color: Colors.orange,
                          fontWeight: FontWeight.bold,
                          fontSize: 20),
                    ),
                  ],
                ),
                Padding(
                  padding: EdgeInsets.only(top: 20),
                  child: Row(
                    children: [
                      Text(
                        "VALOR TOTAL SELECIONADO: R\$ 65,40",
                        style: TextStyle(
                          color: Colors.grey[700],
                        ),
                      ),
                    ],
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 20),
                  child: FlatButton(
                    onPressed: () {
                      return showDialog(
                        context: context,
                        builder: (context) {
                          return AlertDialog(
                            content: Text(amountGet.text),
                          );
                        },
                      );
                    },
                    color: Colors.indigo[800],
                    child: Text(
                      'Comprar',
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
    );
  }

  body() {
    return Column(
      children: [
        Padding(
          padding: EdgeInsets.only(left: 15),
          child: Row(
            children: [
              Checkbox(
                focusColor: Colors.grey,
                activeColor: Colors.grey[400],
                value: true,
                onChanged: (value) => value,
              ),
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    "Total:",
                    textScaleFactor: 1,
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.grey[700],
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.fromLTRB(30, 0, 20, 0),
                    child: Text(
                      "R\$ 55,00",
                      style: TextStyle(
                          color: Colors.grey[700],
                          fontWeight: FontWeight.bold,
                          fontSize: 20),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
        Padding(
          padding: EdgeInsets.only(left: 30, right: 30),
          child: Container(
            decoration: BoxDecoration(
              border: Border(
                left: BorderSide(
                  width: 2,
                  color: Colors.grey[400],
                ),
              ),
            ),
            child: Padding(
              padding: EdgeInsets.fromLTRB(20, 0, 20, 5),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Row(
                    children: [
                      Text(
                        "Duração: 120 minutos",
                        textScaleFactor: 1.2,
                      ),
                    ],
                  ),
                  Row(
                    children: [
                      Text(
                        "Data Lançamento: 00/00/0000",
                        textScaleFactor: 1.2,
                      ),
                    ],
                  ),
                  Row(
                    children: [
                      Text(
                        "Direção: fulano",
                        textScaleFactor: 1.2,
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

Observing

You can also make use of ListView, that in my view is best advised for you, rather than using a SingleChildScrollView along with a Column.

Edited

You can resize your viewing area by taking the maximum size of your screen and subtracting the size of your footer and also the size of your appbar

height: Mediaquery.of(context).size.height - kToolbarHeight - 230

kToolbarHeight: It is a constant of the SDK itself that returns the default size of the appbar.

  • Even with Singlechildscrollview(), the footer is still blocking the shortlist.

  • @Kayaryuuna I’m sorry, I didn’t realize that the checkbox was the first widget of each item... You really need to use the bottomSheet?

  • I wanted to have a footer on this page, the bottomSheet was one of the options I found, which worked, but it covers the widgets. I even tried to put it next to the column, but it didn’t work.

  • @Kayaryuuna updated my answer

  • 1

    thank you very much, I did not know this function Mediaquery! It will be of great help in the future! :D

Browser other questions tagged flutter dart

You are not signed in. Login or sign up in order to post.