A RenderFlex overflowed by 141 pixels on the bottom - flutter

Question

I added a bottom navigation bar on the bottom of the screen but it has interfered with the overflowed pixels. A part of my code which is the CartTotal() wasnt shown in the code. I tried using Listview but im not able to add both of the items in the column for both CartProducts() and CartTotal(). This was the suggestion:
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.
import 'package:flutter/material.dart';
import '../../widgets/cart_products.dart';
import '../../widgets/cart_total.dart';
import 'package:grocery_shopping/widgets/widgets.dart';
import '../Home/components/bottom_bar.dart';
import '../Home/components/enum.dart';
class CartScreen extends StatelessWidget {
const CartScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Your Cart")),
bottomNavigationBar: const CustomBottomBar(selectMenu: MenuState.cart),
body: Column(
children: [
CartProducts(),
CartTotal(),
],
),
);
}
}
this is my CartProducts()
import 'package:flutter/material.dart';
import 'package:grocery_shopping/controllers/cart_controller.dart';
import 'package:grocery_shopping/models/product_model.dart';
import 'package:get/get.dart';
class CartProducts extends StatelessWidget {
final CartController controller = Get.find();
CartProducts({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Obx(
() => SizedBox(
height: 600,
child: ListView.builder(
itemCount: controller.products.length,
itemBuilder: (BuildContext context, int index) {
return CartProductCard(
controller: controller,
product: controller.products.keys.toList()[index],
quantity: controller.products.values.toList()[index],
index: index,
);
}),
),
);
}
}
class CartProductCard extends StatelessWidget {
final CartController controller;
final Product product;
final int quantity;
final int index;
const CartProductCard({
Key? key,
required this.controller,
required this.product,
required this.quantity,
required this.index,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20.0,
vertical: 10,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
CircleAvatar(
radius: 40,
backgroundImage: NetworkImage(
product.imageUrl,
),
),
SizedBox(
width: 20,
),
Expanded(
child: Text(product.name),
),
IconButton(
onPressed: () {
controller.removeProduct(product);
},
icon: Icon(Icons.remove_circle),
),
Text('$quantity'),
IconButton(
onPressed: () {
controller.addProduct(product);
},
icon: Icon(Icons.add_circle),
),
],
),
);
}
}
This is my CartTotal()
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:grocery_shopping/controllers/cart_controller.dart';
import 'package:get/get.dart';
class CartTotal extends StatelessWidget {
final CartController controller = Get.find();
CartTotal({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Obx(
() => Container(
padding: const EdgeInsets.symmetric(horizontal: 75),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Total',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
Text(
'\RM${controller.total}',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
],
)),
);
}
}