Issue
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),
),
],
),
)
],
),
);
}
}
Solution
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(),
);
}),
Answered By – Yeasin Sheikh
Answer Checked By – Gilberto Lyons (FlutterFixes Admin)