import 'package:flutter/material.dart';

class AddToCartScreen extends StatefulWidget {
  @override
  _AddToCartScreenState createState() => _AddToCartScreenState();
}

class _AddToCartScreenState extends State<AddToCartScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
          child: Column(
            children: [
              // Options Row
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  RaisedButton(
                    onPressed: (){},
                    child: Text('Clear All'),
                    color: Colors.redAccent[100],
                    textColor: Colors.redAccent[700],
                  ),
                  Container(
                    width: 10,
                    height: 10,
                  ),
                  IconButton(
                    onPressed: (){},
                    icon: Icon(Icons.settings),
                    iconSize: 40,
                  ),
                ],
              ),
              SizedBox(height: 10,),
              // Add to cart Row
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    width: 50,
                    height: 50,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(5),
                        image: DecorationImage(
                            fit: BoxFit.cover,
                            image: NetworkImage('https://images.pexels.com/photos/286283/pexels-photo-286283.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260')
                        )
                    ),
                  ),
                  Container(
                    width: 110,
                    child: Text(
                      'Grilled Corn',
                      style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w500
                      ),
                    ),
                  ),
                  FloatingActionButton(
                    onPressed: (){},
                    child: Icon(Icons.remove),
                    backgroundColor: Colors.blueGrey[300],
                  ),
                  Text(
                    "1",
                    style: TextStyle(
                        fontSize: 28,
                        fontWeight: FontWeight.w500
                    ),
                  ),
                  FloatingActionButton(
                    onPressed: (){},
                    child: Icon(Icons.add),
                    backgroundColor: Colors.blueGrey[300],
                  ),
                  Text(
                    '\$1.75',
                    style: TextStyle(
                        fontSize: 22,
                        fontWeight: FontWeight.w500,
                        color: Colors.deepOrange
                    ),
                  ),
                ],
              ),
              SizedBox(height: 10,),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    width: 50,
                    height: 50,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(5),
                        image: DecorationImage(
                            fit: BoxFit.cover,
                            image: NetworkImage('https://images.pexels.com/photos/1435735/pexels-photo-1435735.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')
                        )
                    ),
                  ),
                  Container(
                    width: 110,
                    child: Text(
                      'Fruit',
                      style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w500
                      ),
                    ),
                  ),
                  FloatingActionButton(
                    onPressed: (){},
                    child: Icon(Icons.remove),
                    backgroundColor: Colors.blueGrey[300],
                  ),
                  Text(
                    "3",
                    style: TextStyle(
                        fontSize: 28,
                        fontWeight: FontWeight.w500
                    ),
                  ),
                  FloatingActionButton(
                    onPressed: (){},
                    child: Icon(Icons.add),
                    backgroundColor: Colors.blueGrey[300],
                  ),
                  Text(
                    '\$4.95',
                    style: TextStyle(
                        fontSize: 22,
                        fontWeight: FontWeight.w500,
                        color: Colors.deepOrange
                    ),
                  ),
                ],
              ),
              SizedBox(height: 10,),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    width: 50,
                    height: 50,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(5),
                        image: DecorationImage(
                            fit: BoxFit.cover,
                            image: NetworkImage('https://images.pexels.com/photos/3206433/pexels-photo-3206433.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')
                        )
                    ),
                  ),
                  Container(
                    width: 110,
                    child: Text(
                      'Cho Cafe',
                      style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w500
                      ),
                    ),
                  ),
                  FloatingActionButton(
                    onPressed: (){},
                    child: Icon(Icons.remove),
                    backgroundColor: Colors.blueGrey[300],
                  ),
                  Text(
                    "1",
                    style: TextStyle(
                        fontSize: 28,
                        fontWeight: FontWeight.w500
                    ),
                  ),
                  FloatingActionButton(
                    onPressed: (){},
                    child: Icon(Icons.add),
                    backgroundColor: Colors.blueGrey[300],
                  ),
                  Text(
                    '\$0.75',
                    style: TextStyle(
                        fontSize: 22,
                        fontWeight: FontWeight.w500,
                        color: Colors.deepOrange
                    ),
                  ),
                ],
              ),
              SizedBox(height: 10,),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    width: 50,
                    height: 50,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(5),
                        image: DecorationImage(
                            fit: BoxFit.cover,
                            image: NetworkImage('https://images.pexels.com/photos/3662104/pexels-photo-3662104.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')
                        )
                    ),
                  ),
                  Container(
                    width: 110,
                    child: Text(
                      'Che Soup',
                      style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w500
                      ),
                    ),
                  ),
                  FloatingActionButton(
                    onPressed: (){},
                    child: Icon(Icons.remove),
                    backgroundColor: Colors.blueGrey[300],
                  ),
                  Text(
                    "2",
                    style: TextStyle(
                        fontSize: 28,
                        fontWeight: FontWeight.w500
                    ),
                  ),
                  FloatingActionButton(
                    onPressed: (){},
                    child: Icon(Icons.add),
                    backgroundColor: Colors.blueGrey[300],
                  ),
                  Text(
                    '\$5.50',
                    style: TextStyle(
                        fontSize: 22,
                        fontWeight: FontWeight.w500,
                        color: Colors.deepOrange
                    ),
                  ),
                ],
              ),
              SizedBox(height: 10,),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    width: 50,
                    height: 50,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(5),
                        image: DecorationImage(
                            fit: BoxFit.cover,
                            image: NetworkImage('https://images.pexels.com/photos/1435706/pexels-photo-1435706.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')
                        )
                    ),
                  ),
                  Container(
                    width: 110,
                    child: Text(
                      'Nat Milk',
                      style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w500
                      ),
                    ),
                  ),
                  FloatingActionButton(
                    onPressed: (){},
                    child: Icon(Icons.remove),
                    backgroundColor: Colors.blueGrey[300],
                  ),
                  Text(
                    "5",
                    style: TextStyle(
                        fontSize: 28,
                        fontWeight: FontWeight.w500
                    ),
                  ),
                  FloatingActionButton(
                    onPressed: (){},
                    child: Icon(Icons.add),
                    backgroundColor: Colors.blueGrey[300],
                  ),
                  Text(
                    '\$9.25',
                    style: TextStyle(
                        fontSize: 22,
                        fontWeight: FontWeight.w500,
                        color: Colors.deepOrange
                    ),
                  ),
                ],
              ),
              SizedBox(height: 10,),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    width: 50,
                    height: 50,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(5),
                        image: DecorationImage(
                            fit: BoxFit.cover,
                            image: NetworkImage('https://images.pexels.com/photos/1998635/pexels-photo-1998635.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')
                        )
                    ),
                  ),
                  Container(
                    width: 110,
                    child: Text(
                      'Cho Cake',
                      style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w500
                      ),
                    ),
                  ),
                  FloatingActionButton(
                    onPressed: (){},
                    child: Icon(Icons.remove),
                    backgroundColor: Colors.blueGrey[300],
                  ),
                  Text(
                    "1",
                    style: TextStyle(
                        fontSize: 28,
                        fontWeight: FontWeight.w500
                    ),
                  ),
                  FloatingActionButton(
                    onPressed: (){},
                    child: Icon(Icons.add),
                    backgroundColor: Colors.blueGrey[300],
                  ),
                  Text(
                    '\$1.95',
                    style: TextStyle(
                        fontSize: 22,
                        fontWeight: FontWeight.w500,
                        color: Colors.deepOrange
                    ),
                  ),
                ],
              ),
              SizedBox(height: 30,),
              // Detail Price Row
              Column(
                children: [
                  Container(
                    child: Card(
                      elevation: 5,
                      child: Padding(
                        padding: const EdgeInsets.all(15.0),
                        child: Column(
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text(
                                  'Subtotal',
                                  style: TextStyle(
                                    fontSize: 18,
                                  ),
                                ),
                                Text(
                                  '\$24.15',
                                  style: TextStyle(
                                      fontSize: 18,
                                      fontWeight: FontWeight.bold
                                  ),
                                ),
                              ],
                            ),
                            SizedBox(height: 10,),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text(
                                  'Discount',
                                  style: TextStyle(
                                    fontSize: 18,
                                  ),
                                ),
                                Text(
                                  '- \$5.00',
                                  style: TextStyle(
                                      fontSize: 18,
                                      fontWeight: FontWeight.bold
                                  ),
                                ),
                              ],
                            ),
                            SizedBox(height: 10,),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text(
                                  'Sales Tax',
                                  style: TextStyle(
                                    fontSize: 18,
                                  ),
                                ),
                                Text(
                                  '\$2.25',
                                  style: TextStyle(
                                      fontSize: 18,
                                      fontWeight: FontWeight.bold
                                  ),
                                ),
                              ],
                            ),
                            SizedBox(height: 15,),
                            Container(
                              width: double.infinity,
                              height: 1,
                              color: Colors.blueGrey,
                            ),
                            SizedBox(height: 15,),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text(
                                  'Total',
                                  style: TextStyle(
                                    fontSize: 24,
                                  ),
                                ),
                                Text(
                                  '\$26.40',
                                  style: TextStyle(
                                      fontSize: 30,
                                      fontWeight: FontWeight.bold
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(height: 20,),
              // Cashless Credit Row
              Container(
                child: Card(
                  elevation: 5,
                  child: Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              'CASHLESS CREDIT',
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 13,
                                color: Colors.indigo[700],
                              ),
                            ),
                            Text(
                              '\$21.40',
                              style: TextStyle(
                                fontSize: 26,
                                color: Colors.deepOrange,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                            Text(
                              'Available',
                              style: TextStyle(
                                fontSize: 12,
                              ),
                            ),
                          ],
                        ),
                        RaisedButton(
                          onPressed: (){},
                          child: Text(
                              'Cancel'
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              SizedBox(height: 20,),
              // Button Pay Cashless
              Container(
                width: double.infinity,
                child: RaisedButton(
                  onPressed: (){},
                  child: Text(
                    'Pay With Cashless Credit',
                    style: TextStyle(
                      fontSize: 12,
                      color: Colors.white,
                    ),
                  ),
                  color: Colors.deepOrange,
                  padding: EdgeInsets.symmetric(vertical: 15),
                ),
              ),
              SizedBox(height: 10,),
              // Balance Due Row
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    'Balance Due',
                    style: TextStyle(
                      fontSize: 13,
                      color: Colors.black,
                    ),
                  ),
                  Text(
                    '\$5.00',
                    style: TextStyle(
                      fontSize: 15,
                      fontWeight: FontWeight.bold,
                      color: Colors.black,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}