UI

1. main.dart

                          import 'package:flutter/material.dart';
                          import 'package:a/screens/cart_page.dart';

                          import 'dart:ui';

                          void main() {
                            runApp(const MainApp());
                          }

                          class MainApp extends StatelessWidget {
                            const MainApp({super.key});

                            @override
                            Widget build(BuildContext context) {
                              return const MaterialApp(
                                title: "Cart UI",
                                debugShowCheckedModeBanner: false,
                                home: CartPage(),
                              );
                            }
                          }

                          

2. screens/cart_page.dart

                          import 'package:a/widgets/cart_item.dart';
import 'package:a/widgets/price_item.dart';
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.transparent,
        foregroundColor: Colors.black,
        title: const Text("My Cart"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(14),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Flexible(
                child: ListView(
                  children: [
                    ...List.generate(
                        3,
                            (index) => Padding(
                          padding: const EdgeInsets.only(bottom: 15),
                          child: CartItem(index: index),
                        )),
                    Align(
                      alignment: Alignment.bottomLeft,
                      child: Padding(
                        padding: const EdgeInsets.only(bottom: 20.0),
                        child: TextButton.icon(
                          onPressed: () {},
                          icon: const Icon(Icons.add),
                          label: const Text("Add more items"),
                        ),
                      ),
                    ),
                  ],
                )),

            const Padding(
                padding: EdgeInsets.only(bottom: 14.0),
                child: PriceItem(
                  subTitle: "Sub total",
                  value: "63.97",
                )),

            const Padding(
                padding: EdgeInsets.only(bottom: 14.0),
                child: PriceItem(
                  subTitle: "Taxes and Fees",
                  value: "10.00",
                )),
            const Padding(
                padding: EdgeInsets.only(bottom: 14.0),
                child: PriceItem(
                  subTitle: "Delivery Fee",
                  value: "5.00",
                )),

            // DOTTED DIVIDER LINES
            Padding(
              padding: const EdgeInsets.only(bottom: 14),
              child: Row(
                children: List.generate(
                  40,
                      (index) => Expanded(
                    child: Container(
                      margin: const EdgeInsets.only(right: 5),
                      height: 2,
                      color: Colors.grey.shade300,
                    ),
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(bottom: 30.0),
              child: Row(
                children: [
                  const Text(
                    "Total",
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const Spacer(),
                  Text(
                    "\$78.96",
                    style: TextStyle(
                      fontSize: 16,
                      color: Colors.grey.shade600,
                    ),
                  ),
                ],
              ),
            ),

            Padding(
              padding: const EdgeInsets.only(bottom: 8.0),
              child: SizedBox(
                width: double.maxFinite,
                height: 45,
                child: ElevatedButton(
                  onPressed: () {},
                  child: const Text("Checkout"),
                  style: ElevatedButton.styleFrom(
                    shape: StadiumBorder(),
                  ),
                ),
              ),
            )

            // CART ITEMS TOTAL
          ],
        ),
      ),
    );
  }
}

3. widgets/cart_item

import 'package:flutter/material.dart';

class CartItem extends StatelessWidget {
  const CartItem({Key? key, required this.index}) : super(key: key);

  final int index;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 120,
      child: Row(
        children: [
          // IMAGE
          Container(
            width: 130,
            height: double.infinity,
            margin: const EdgeInsets.only(right: 20),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              image: DecorationImage(
                image: NetworkImage("https://picsum.photos/seed/$index/200/300"),
                fit: BoxFit.cover,
              ),
            ),
          ),

          // DETAILS

          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Padding(
                  padding: EdgeInsets.only(bottom: 8.0),
                  child: Text(
                    "Cheese Hot\nHamburger",
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                Text(
                  "\$18.99",
                  style: TextStyle(
                    fontSize: 13,
                    color: Colors.grey.shade600,
                  ),
                ),
                const Spacer(),
                Row(
                  children: [
                    Container(
                      padding: const EdgeInsets.all(3),
                      margin: const EdgeInsets.only(right: 20),
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        border: Border.all(
                          color: Colors.grey.shade400,
                        ),
                      ),
                      child: const Icon(
                        Icons.remove,
                        size: 20,
                      ),
                    ),
                    const Text(
                      "1",
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    Container(
                      padding: const EdgeInsets.all(3),
                      margin: const EdgeInsets.only(left: 20),
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        border: Border.all(
                          color: Colors.grey.shade400,
                        ),
                      ),
                      child: const Icon(
                        Icons.add,
                        size: 20,
                      ),
                    ),
                    const Spacer(),
                    Icon(
                      Icons.close,
                      color: Colors.grey.shade500,
                    )
                  ],
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

4. widgets/price_item

import 'package:flutter/material.dart';

class PriceItem extends StatelessWidget {
  const PriceItem({Key? key, required this.value, required this.subTitle}) : super(key: key);

  final String value;
  final String subTitle;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Text(
          subTitle,
          style: const TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.w500,
          ),
        ),
        const Spacer(),
        Text(
          "\$" + value,
          style: TextStyle(
            fontSize: 16,
            color: Colors.grey.shade600,
          ),
        ),
      ],
    );
  }
}