Search code examples
flutteruser-interfacelistview

How to add a container on the bottom page in Flutter


I would like to add the container with the "Total amount" at the bottom of my screen. I tried with Alignment.bottom center, but nothing. Right now, the listview.builder is smaller, and the container go just under. I don't want to add padding, as i want something responsive for different screens sizes.

This is my code:

    @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(...
      ),
      body:  Padding(
        padding: const EdgeInsets.only(top: 15.0),
        child: SingleChildScrollView(
          child: Container(
            height: MediaQuery
                .of(context)
                .size
                .height * 0.9,
            child: Column(
              children: <Widget>[
                ListView.builder(
                  scrollDirection: Axis.vertical,
                  shrinkWrap: true,
                  itemBuilder: (contetx ,index) {
                  return Column(
                    children:[
                    Padding(
                      padding: const EdgeInsets.only(top: 8.0, left: 15, right: 15),
                      child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Container(child: Text(widget.newList[index].name,
                          style: TextStyle(fontWeight: FontWeight.bold),),
                          margin: EdgeInsets.only(left: 5.0),),
                        Container(child: Text((widget.newList[index].quantity),
                          style: TextStyle(fontSize: 18),)),
                      ],
                      ),
                    ),
                      Divider(thickness: 1,indent: 20,endIndent: 20,),
                    ],
                  );
                },
                  itemCount: widget.newList.length,
                ),
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text('Total'.toUpperCase().tr(),
                          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),),
                        Text( (widget.totalRecipe),
                          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),),
                      ],
                    ),

enter image description here


Solution

  • Just use Spacer right before the Align. Also, use LayoutBuilder to get the remaining size instead of MediaQuery.of(context).size.height * 0.9,.

    enter image description here

    The code is going to be the following:

    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Results'),
            backgroundColor: const Color.fromARGB(255, 237, 98, 55),
          ),
          body: Padding(
            padding: const EdgeInsets.only(top: 15.0),
            child: LayoutBuilder(builder: (context, constraints) {
              return SingleChildScrollView(
                child: Container(
                  height: constraints.maxHeight,
                  child: Column(
                    children: <Widget>[
                      ListView.builder(
                        scrollDirection: Axis.vertical,
                        shrinkWrap: true,
                        itemBuilder: (contetx, index) {
                          return Column(
                            children: [
                              Padding(
                                padding: const EdgeInsets.only(
                                    top: 8.0, left: 15, right: 15),
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    Container(
                                      child: Text(
                                        widget.newList[index].name,
                                        style:
                                            TextStyle(fontWeight: FontWeight.bold),
                                      ),
                                      margin: EdgeInsets.only(left: 5.0),
                                    ),
                                    Container(
                                        child: Text(
                                      (widget.newList[index].quantity),
                                      style: TextStyle(fontSize: 18),
                                    )),
                                  ],
                                ),
                              ),
                              Divider(
                                thickness: 1,
                                indent: 20,
                                endIndent: 20,
                              ),
                            ],
                          );
                        },
                        itemCount: widget.newList.length,
                      ),
                      const Spacer(),
                      Align(
                        alignment: Alignment.bottomCenter,
                        child: Padding(
                          padding: const EdgeInsets.all(15.0),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                'Total'.toUpperCase(),
                                style: TextStyle(
                                    fontWeight: FontWeight.bold, fontSize: 20),
                              ),
                              Text(
                                (widget.totalRecipe),
                                style: TextStyle(
                                    fontWeight: FontWeight.bold, fontSize: 18),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              );
            }),
          ),
        );
      }