flutter-carapp-practice.dart

gistfile1.txt

import 'package:flutter/material.dart';

class ShopScreen extends StatefulWidget {
  @override
  ShopScreenState createState() => ShopScreenState();
}

class ShopScreenState extends State<StatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Stack(
          children: [
            Opacity(
              opacity: 0.7,
              child: Image.asset("images/sample_store.png"),
            ),
            _createNavBar()
          ],
        ),
        Padding(
          padding: EdgeInsets.only(top: 184),
          child: Container(
            clipBehavior: Clip.antiAliasWithSaveLayer,
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(15),
                    topRight: Radius.circular(15))),
            child: CustomScrollView(
              slivers: [
                SliverList(
                    delegate: SliverChildListDelegate([
                  _createShopDetailsHeader(),
                  Divider(
                    color: Color.fromARGB(25, 0x0E, 0x23, 0x50),
                  ),
                  Padding(
                    padding:
                        EdgeInsets.only(left: 26, right: 26, top: 8, bottom: 8),
                    child: Row(
                      children: [
                        Text(
                          "Car available",
                          style: TextStyle(
                              decoration: TextDecoration.none,
                              fontSize: 16,
                              color: Colors.black,
                              fontWeight: FontWeight.bold),
                        ),
                        Spacer(),
                        Icon(Icons.filter_list)
                      ],
                    ),
                  )
                ])),
                // SliverList(
                //     delegate: SliverChildBuilderDelegate((context, index) {
                //   return _createCarListItem();
                // }, childCount: 20))
                SliverGrid(
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2,
                        crossAxisSpacing: 16,
                        mainAxisSpacing: 16),
                    delegate: SliverChildBuilderDelegate((context, index) {
                      return _createCarListItem();
                    }, childCount: 20))
              ],
            ),
          ),
        ),
      ],
    );
  }

  Row _createNavBar() {
    return Row(
      children: [
        Padding(
          padding: EdgeInsets.all(26),
          child: Container(
            alignment: Alignment.center,
            width: 34,
            height: 34,
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.all(Radius.circular(5))),
            child: Icon(
              Icons.arrow_back,
              size: 24,
              color: Color.fromARGB(255, 0x0E, 0x23, 0x50),
            ),
          ),
        ),
        Spacer(),
        Padding(
            padding: EdgeInsets.all(26),
            child: Container(
              alignment: Alignment.center,
              width: 34,
              height: 34,
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(Radius.circular(5))),
              child: Icon(
                Icons.more_horiz,
                size: 24,
                color: Color.fromARGB(255, 0x0E, 0x23, 0x50),
              ),
            )),
      ],
    );
  }

  Widget _createShopDetailsHeader() {
    return Container(
      child: Padding(
        padding: EdgeInsets.only(top: 26, left: 26, right: 26, bottom: 16),
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  "Car Rental @ Joo Chiat",
                  style: TextStyle(
                      decoration: TextDecoration.none,
                      fontSize: 20,
                      color: Colors.black,
                      fontWeight: FontWeight.bold),
                ),
                Text(
                  "0.2km away",
                  style: TextStyle(
                      decoration: TextDecoration.none,
                      fontSize: 12,
                      color:
                          Color.fromARGB((255 * 0.6).toInt(), 0x0E, 0x23, 0x50),
                      fontWeight: FontWeight.normal),
                )
              ],
            ),
            SizedBox(
              height: 10,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      "249 Joo Chiat Rd, 619523, Singapore",
                      style: TextStyle(
                          decoration: TextDecoration.none,
                          fontSize: 12,
                          color: Colors.black,
                          fontWeight: FontWeight.normal),
                    ),
                    SizedBox(
                      height: 4,
                    ),
                    Text(
                      "+65 66607231",
                      style: TextStyle(
                          decoration: TextDecoration.none,
                          fontSize: 12,
                          color: Colors.black,
                          fontWeight: FontWeight.normal),
                    ),
                    SizedBox(
                      height: 4,
                    ),
                    Text(
                      "Open 24hrs",
                      style: TextStyle(
                          decoration: TextDecoration.none,
                          fontSize: 12,
                          color: Colors.black,
                          fontWeight: FontWeight.normal),
                    )
                  ],
                ),
                Container(
                  alignment: Alignment.center,
                  width: 34,
                  height: 34,
                  decoration: BoxDecoration(
                      color: Color.fromARGB(255, 0xED, 0xF3, 0xFF),
                      borderRadius: BorderRadius.all(Radius.circular(5))),
                  child: Icon(
                    Icons.phone,
                    size: 24,
                    color: Color.fromARGB(255, 0x17, 0x65, 0xFF),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }

  Widget _createCarListItem() {
    return Expanded(
      child: Container(
        height: 300,
        child: Stack(
          alignment: Alignment.topCenter,
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 36),
              child: Container(
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                        colors: [
                          Color.fromARGB(255, 0x51, 0x8A, 0xFF),
                          Color.fromARGB(255, 0x1A, 0x48, 0xA4)
                        ]),
                    borderRadius: BorderRadius.all(Radius.circular(5))),
                child: Padding(
                    padding: EdgeInsets.only(top: 40),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 8.0),
                          child: Row(
                            children: [
                              Text(
                                "Audi TT",
                                style: TextStyle(
                                    decoration: TextDecoration.none,
                                    fontSize: 16,
                                    color: Color.fromRGBO(0xED, 0xF3, 0xFF, 1),
                                    fontWeight: FontWeight.bold),
                              ),
                              Spacer(),
                              Icon(
                                Icons.favorite_border,
                                size: 14,
                                color: Color.fromRGBO(0xED, 0xF3, 0xFF, 1),
                              )
                            ],
                          ),
                        ),
                        SizedBox(
                          height: 4,
                        ),
                        Padding(
                          padding: EdgeInsets.symmetric(horizontal: 8.0),
                          child: Text(
                            "hybrid",
                            style: TextStyle(
                                decoration: TextDecoration.none,
                                fontSize: 12,
                                color: Color.fromRGBO(0xED, 0xF3, 0xFF, 0.8),
                                fontWeight: FontWeight.normal),
                          ),
                        ),
                        SizedBox(
                          height: 16,
                        ),
                        Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 8.0),
                          child: Row(
                            children: [
                              Text(
                                "\$79",
                                style: const TextStyle(
                                    decoration: TextDecoration.none,
                                    fontSize: 16,
                                    color: Color.fromRGBO(0xED, 0xF3, 0xFF, 1),
                                    fontWeight: FontWeight.bold),
                              ),
                              Text(
                                " /hr",
                                style: const TextStyle(
                                    decoration: TextDecoration.none,
                                    fontSize: 12,
                                    color: Color.fromRGBO(0xED, 0xF3, 0xFF, 1),
                                    fontWeight: FontWeight.normal),
                              ),
                              Spacer(),
                              Text(
                                "\$60",
                                style: const TextStyle(
                                    decoration: TextDecoration.none,
                                    fontSize: 16,
                                    color: Color.fromRGBO(0xED, 0xF3, 0xFF, 1),
                                    fontWeight: FontWeight.bold),
                              ),
                              Text(" /hr",
                                  style: const TextStyle(
                                    decoration: TextDecoration.none,
                                    fontSize: 12,
                                    color: Color.fromRGBO(0xED, 0xF3, 0xFF, 1),
                                    fontWeight: FontWeight.normal,
                                  )),
                            ],
                          ),
                        ),
                        SizedBox(
                          height: 16,
                        ),
                        Row(
                          children: [
                            Expanded(
                                child: Padding(
                              padding: const EdgeInsets.symmetric(
                                  horizontal: 8, vertical: 12),
                              child: Text(
                                "View More",
                                style: TextStyle(
                                    decoration: TextDecoration.none,
                                    fontSize: 9,
                                    color:
                                        Color.fromRGBO(0xED, 0xF3, 0xFF, 0.5),
                                    fontWeight: FontWeight.normal),
                              ),
                            )),
                            Expanded(
                                child: Container(
                              alignment: Alignment.centerRight,
                              decoration: BoxDecoration(
                                  color:
                                      const Color.fromRGBO(0x96, 0xB9, 0xFF, 1),
                                  borderRadius: BorderRadius.only(
                                      topLeft: const Radius.circular(32),
                                      bottomRight: const Radius.circular(5))),
                              child: Padding(
                                padding: const EdgeInsets.symmetric(
                                    horizontal: 8, vertical: 12),
                                child: Text("Book Now",
                                    style: const TextStyle(
                                      decoration: TextDecoration.none,
                                      fontSize: 12,
                                      color:
                                          Color.fromRGBO(0xED, 0xF3, 0xFF, 1),
                                      fontWeight: FontWeight.normal,
                                    )),
                              ),
                            ))
                          ],
                        )
                      ],
                    )),
              ),
            ),
            Image.asset("images/sample_car.png")
          ],
        ),
      ),
    );
  }
}