Flutter ListView not sizing relative to the number of ListViewItems

Question

I want to have a list of containers when the add button is pressed. Product button to always be directly below the Product 1 container. As the list of items increases, it pushes the button down with it. I want to be able to scroll the list items together with the add button.

Preferred outcome

Here is what I have now:

    Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 30.0),
          child: Column(
            children: <Widget>[
              Container(
                height: 43,
                child: TextField(
                  textAlign: TextAlign.center,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(
                      borderSide: BorderSide(color: KSecondaryDarkButtonColor),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: KSecondaryDarkButtonColor),
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: KSecondaryDarkButtonColor),
                    ),
                    hintText: "Smartlink name",
                    hintStyle: GoogleFonts.ubuntu(
                      fontSize: getProportionateScreenWidth(12),
                      color: KSecondaryDarkButtonColor,
                    ),
                  ),
                ),
              ),
              SizedBox(height: getProportionateScreenHeight(14)),
              Expanded(
                child: ListView.builder(
                    shrinkWrap: true,
                    itemCount: numberOfProducts.length,
                    itemBuilder: (BuildContext context, int index) {
                      return Padding(
                        padding: EdgeInsets.only(
                            bottom: getProportionateScreenHeight(14)),
                        child: NewProductContainer(),
                      );
                    }),
              ),
              SizedBox(height: getProportionateScreenHeight(14)),
              Button("Add Product", onpressed: () {
                addNewProductToList();
              })
            ],
          ),
        ),
      ),
      backgroundColor: Colors.white,
    );
  }

Below is the code for the NewProductContainer Widget:

class NewProductContainer extends StatelessWidget {
  const NewProductContainer({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Container buildButton(
        {String? text,
        String? iconAddress,
        VoidCallback? onPressed,
        TextAlign? textAlign}) {
      return Container(
        height: getProportionateScreenHeight(43),
        decoration: BoxDecoration(
            border: Border.all(color: Colors.black),
            borderRadius: BorderRadius.circular(5)),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Expanded(
              flex: 4,
              child: Text(
                text ?? "",
                textAlign: textAlign,
              ),
            ),
            Expanded(
              flex: 1,
              child: IconButton(
                icon: Image.asset(iconAddress ?? ""),
                onPressed: onPressed,
              ),
            )
          ],
        ),
      );
    }

    Container buildButton2(
        {String? text, String? iconAddress, VoidCallback? onPressed}) {
      return Container(
        height: getProportionateScreenHeight(43),
        decoration: BoxDecoration(
            border: Border.all(color: Colors.black),
            borderRadius: BorderRadius.circular(5)),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Expanded(
              flex: 5,
              child: Text(
                text ?? "",
                textAlign: TextAlign.center,
              ),
            ),
            Expanded(
              flex: 1,
              child: Padding(
                padding:
                    EdgeInsets.only(right: getProportionateScreenWidth(17)),
                child: Text(
                  "₦",
                  textAlign: TextAlign.end,
                ),
              ),
            )
          ],
        ),
      );
    }

    return Container(
      decoration: BoxDecoration(
          color: kSecondaryBG, borderRadius: BorderRadius.circular(4)),
      child: ExpansionTile(
        title: Text(
          "Product 1",
          style: TextStyle(
              fontSize: 18.0, fontWeight: FontWeight.bold, color: Colors.black),
        ),
        trailing: Icon(
          Icons.arrow_drop_down,
          size: 32,
          color: Colors.black,
        ),
        iconColor: Colors.blue,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.symmetric(
                horizontal: getProportionateScreenWidth(15)),
            child: Column(
              children: [
                Container(
                  height: 43,
                  child: TextField(
                    textAlign: TextAlign.center,
                    decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        focusedBorder: OutlineInputBorder(),
                        enabledBorder: OutlineInputBorder(),
                        hintText: "Unique Product ID"),
                  ),
                ),
                SizedBox(
                  height: getProportionateScreenHeight(18),
                ),
                Container(
                  height: getProportionateScreenHeight(91),
                  child: TextField(
                    textAlign: TextAlign.center,
                    maxLines: 3,
                    decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        focusedBorder: OutlineInputBorder(),
                        enabledBorder: OutlineInputBorder(),
                        hintText: "Product Description"),
                  ),
                ),
                SizedBox(
                  height: getProportionateScreenHeight(18),
                ),
                buildButton(
                    text: "Product Image",
                    iconAddress: "assets/images/upload_up_icon.png",
                    textAlign: TextAlign.center),
                SizedBox(
                  height: getProportionateScreenHeight(18),
                ),
                Container(
                  height: 43,
                  child: TextField(
                    textAlign: TextAlign.center,
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      focusedBorder: OutlineInputBorder(),
                      enabledBorder: OutlineInputBorder(),
                      hintText: "Unit Price",
                      suffixText: "₦",
                    ),
                  ),
                ),
                SizedBox(
                  height: getProportionateScreenHeight(18),
                ),
                Row(
                  children: [
                    Expanded(
                      flex: 1,
                      child: Container(
                        height: getProportionateScreenHeight(43),
                        child: TextField(
                          decoration: InputDecoration(
                            border: OutlineInputBorder(),
                            focusedBorder: OutlineInputBorder(),
                            enabledBorder: OutlineInputBorder(),
                            hintText: "Qty",
                            hintStyle: GoogleFonts.ubuntu(
                              fontSize: getProportionateScreenWidth(12),
                            ),
                          ),
                        ),
                      ),
                    ),
                    SizedBox(
                      width: getProportionateScreenWidth(12),
                    ),
                    Expanded(
                      flex: 5,
                      child: buildButton2(
                        text: "Total Price",
                      ),
                    ),
                  ],
                ),
                SizedBox(
                  height: getProportionateScreenHeight(20),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

Answer 1

Reduce the height of other's widget, most likely it will provide the view you are looking for, The next thing happening because of screen resolution, while it doesn't fit on screen you are getting this view. Another thing you can do, add the button on ListView

  child: ListView.builder(
          shrinkWrap: true,
          itemCount: numberOfProducts.length+1,
         itemBuilder: (BuildContext context, int index) {
             return index==numberOfProducts.length? 
                Button() // your button
             : Padding(
                 padding: EdgeInsets.only(
                  bottom: getProportionateScreenHeight(14)),
                        child: NewProductContainer(),
                      );
                    }),