Home > OS >  How to add a container on the bottom page in Flutter
How to add a container on the bottom page in Flutter

Time:08-03

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

CodePudding user response:

You can add mainAxisAlignment in Column() widget.

mainAxisAlignment: MainAxisAlignment.spaceBetween,

CodePudding user response:

Just use 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),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        }),
      ),
    );
  }
  • Related