MANVIA BLOG

Flutter / Examples / * Project 24 : Gaming Shop

UI Gaming Shop

UI

1. stack inside another stack

pubspec.yaml


dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  carousel_slider: ^5.0.0
  animate_do: ^3.3.4
  fl_chart: ^0.69.0
  google_fonts: ^6.2.1
  provider: ^6.1.2
  syncfusion_flutter_gauges: ^27.1.56
  flutter_staggered_grid_view: ^0.7.0
  svg_flutter: ^0.0.1

main.dart



import 'package:flutter/material.dart';
import 'constants.dart';
import 'screen/home/home_screen.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        scaffoldBackgroundColor: kBackgroundColor,
      ),
      home: const HomeScreen(),
    );
  }
}

constants.dart


import 'package:flutter/material.dart';

Color kBackgroundColor = const Color(0xFFFFFFFF);

Color kBarBackgroundColor = const Color(0xFFF1F3F5);

Color kCardBackgroundColor = const Color(0XFFF8F9FA);

Color kSelectCardBackgroundColor = const Color(0xFF6741D9);

Color kPrimaryTextColor = const Color(0xFF495057);

Color kSecondTextColor = const Color(0xFF495057);

Color kSecondaryColor = const Color(0xFFF76707);

screen/home/home_screen.dart



import 'package:flutter/material.dart';
import 'package:b/constants.dart';
import 'package:b/screen/home/product_list.dart';
import 'package:svg_flutter/svg.dart';

import 'botton_nav_bar.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  List<String> category = [
    "Controllers",
    "Headsets",
    "Keyboards",
    "Speakers,",
    "VR Accessories"
  ];
  int currentSelectItems = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: const MyBottomNaigationBar(),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // for menu and searach
          myAppBarItems(),
          // for welcome text
          welcomeText(),
          const SizedBox(height: 5,)
          ,          // for category selection
          categorySelection(),
          // for body items
          ProductList(),
        ],
      ),
    );
  }

  SizedBox categorySelection() {
    return SizedBox(
      height: 35,
      child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: category.length,
          itemBuilder: (context, index) {
            return GestureDetector(
              onTap: () {},
              child: Container(
                padding: const EdgeInsets.only(left: 32),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      category[index],
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 16,
                          color: currentSelectItems == index
                              ? kSecondaryColor
                              : kSecondTextColor),
                    ),
                    const SizedBox(
                      height: 5,
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 5),
                      child: Container(
                        height: 3,
                        width: 50,
                        color: currentSelectItems == index
                            ? kSecondaryColor
                            : Colors.transparent,
                      ),
                    )
                  ],
                ),
              ),
            );
          }),
    );
  }

  Container welcomeText() {
    return Container(
      padding: const EdgeInsets.symmetric(
        horizontal: 32,
        vertical: 10,
      ),
      child: const Text(
        "Welcome to \nPlaystation® Accessories",
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
      ),
    );
  }

  Padding myAppBarItems() {
    return Padding(
      padding: const EdgeInsets.symmetric(
        horizontal: 18,
      ),
      child: AppBar(
        leading: IconButton(
            onPressed: () {},
            icon: SvgPicture.asset(
              "assets/icons/icon_menu.svg",
            )),
        actions: [
          IconButton(
              onPressed: () {},
              icon: SvgPicture.asset(
                "assets/icons/icon_search.svg",
              )),
        ],
      ),
    );
  }
}

screen/home/product_list.dart


import 'package:flutter/material.dart';
import 'package:b/Common/rating.dart';
import 'package:b/constants.dart';
import 'package:b/model/product.dart';
import 'package:b/screen/detail/detail_screen.dart';
import 'package:svg_flutter/svg.dart';

class ProductList extends StatefulWidget {
  const ProductList({super.key});

  @override
  State<ProductList> createState() => _ProductListState();
}

class _ProductListState extends State<ProductList> {
  int currentSelectItems = 0;
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 32),
      child: ListView.builder(
          shrinkWrap: true,
          itemCount: productList.length,
          itemBuilder: (context, index) {
            return gamingItems(index);
          }),
    );
  }

  GestureDetector gamingItems(int index) {
    double scale = 1.1;
    Color backgroundColor = kBackgroundColor;
    Color textColor = kPrimaryTextColor;
    if (currentSelectItems == index) {
      scale = 1.28;
      backgroundColor = kSelectCardBackgroundColor;

      textColor = Colors.white;
    }
    final game = productList[index];
    return GestureDetector(
      onTap: () {
        // for navigation
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => DetailScreen(game: game),
          ),
        );
        if (currentSelectItems == index) {
        } else {
          setState(
                () {
              currentSelectItems = index;
            },
          );
        }
      },
      child: Row(
        children: [
          Container(
            width: 270 * scale,
            padding: const EdgeInsets.symmetric(vertical: 10),
            child: Stack(
              children: [
                Container(
                  width: 235 * scale,
                  decoration: BoxDecoration(
                    color: backgroundColor,
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Stack(
                    children: [
                      Container(
                        decoration: BoxDecoration(
                          color: const Color.fromARGB(10, 0, 0, 0),
                          borderRadius: BorderRadius.circular(20),
                        ),
                        padding: const EdgeInsets.symmetric(
                          vertical: 10,
                          horizontal: 28,
                        ),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            SizedBox(
                              height: 7 * scale,
                            ),
                            Padding(
                              padding: const EdgeInsets.only(
                                right: 90,
                              ),
                              child: Text(
                                game.name,
                                maxLines: 2,
                                style: TextStyle(
                                  fontWeight: FontWeight.bold,
                                  fontSize: 14 * scale,
                                  color: textColor,
                                  height: 1.5,
                                ),
                              ),
                            ),
                            SizedBox(
                              height: 7 * scale,
                            ),
                            const Rating(),
                            SizedBox(
                              height: 8 * scale,
                            ),
                            Text(
                              "\$${game.price}",
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 16 * scale,
                                color: textColor,
                              ),
                            ),
                            SizedBox(
                              height: 8 * scale,
                            ),
                          ],
                        ),
                      ),
                      Positioned(
                        right: 0,
                        bottom: 0,
                        child: Container(
                          padding: const EdgeInsets.all(15),
                          decoration: BoxDecoration(
                            color: kSecondaryColor,
                            borderRadius: const BorderRadius.only(
                              topLeft: Radius.circular(14),
                              bottomRight: Radius.circular(21),
                            ),
                          ),
                          child: SvgPicture.asset(
                            "assets/icons/icon_add_cart.svg",
                            width: 17,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Positioned(
                  right: 0,
                  top: 0,
                  bottom: 0,
                  child: Container(
                    alignment: Alignment.center,
                    child: Hero(
                      tag: game.imagePic,
                      child: Image.asset(
                        game.imagePic,
                        height: 75 * scale,
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}

screen/home/bottom_nav_bar.dart



import 'package:flutter/material.dart';
import 'package:b/constants.dart';
import 'package:svg_flutter/svg.dart';

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Container(
        height: 60,
        margin: const EdgeInsets.symmetric(horizontal: 28),
        decoration: BoxDecoration(
            color: const Color.fromARGB(17, 0, 0, 0),
            borderRadius: BorderRadius.circular(36)),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Column(
              children: [
                Container(
                  width: 30,
                  height: 3,
                  color: kSecondaryColor,
                ),
                const Spacer(),
                SvgPicture.asset("assets/icons/icon_home.svg"),
                const Spacer(),
              ],
            ),
            Column(
              children: [

                const Spacer(),
                SvgPicture.asset("assets/icons/icon_heart.svg"),
                const Spacer(),
              ],
            ),
            Column(
              children: [

                const Spacer(),
                SvgPicture.asset("assets/icons/icon_cart.svg"),
                const Spacer(),
              ],
            ),
            Column(
              children: [

                const Spacer(),
                SvgPicture.asset("assets/icons/icon_user.svg"),
                const Spacer(),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

screen/detail/detail_screen.dart


import 'package:flutter/material.dart';
import 'package:b/Common/rating.dart';
import 'package:b/constants.dart';
import 'package:b/model/product.dart';

import 'image_size.dart';

class DetailScreen extends StatelessWidget {
  const DetailScreen({super.key, required this.game});
  final Product game;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: myAppbar(),
      body: Column(
        children: [
          // for detail image
          detailImage(),
          // for image size
          const ImageSize(),
          // for name star and description,
          itemsDetails(),
          //for add to cart and price
          Container(
            padding: const EdgeInsets.symmetric(vertical: 32, horizontal: 20),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  "\$${game.price}",
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 35,
                    color: kPrimaryTextColor,
                  ),
                ),
                Container(
                  height: 80,
                  width: 200,
                  padding:
                  const EdgeInsets.symmetric(vertical: 28, horizontal: 18),
                  decoration: BoxDecoration(
                    color: kSecondaryColor,
                    borderRadius: BorderRadius.circular(36),
                  ),
                  child: const Center(
                    child: Text(
                      "Add to Cart",
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 20,
                        color: Colors.white,
                      ),
                    ),
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }

  Container itemsDetails() {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            game.name,
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 25,
              color: kPrimaryTextColor,
            ),
          ),
          const SizedBox(
            height: 10,
          ),
          //for rating
          const Rating(),
          Text(
            "Unleash your color with the arrival of four new stvles. Each wireless controller comes loaded with the same DUALSHOCK@4 features including touch paa, motion sensors and punt-in rechargedole batterv.",
            style: TextStyle(
              fontSize: 18,
              color: kSecondTextColor,
            ),
          )
        ],
      ),
    );
  }

  SizedBox detailImage() {
    return SizedBox(
      height: 250,
      child: Stack(
        children: [
          Container(
            height: 200,
            color: kSelectCardBackgroundColor,
          ),
          Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              child: Container(
                alignment: Alignment.center,
                child: Hero(
                  tag: game.imagePic,
                  child: Image.asset(
                    game.imagePic,
                    height: 220,
                    width: 330,
                  ),
                ),
              ))
        ],
      ),
    );
  }

  AppBar myAppbar() {
    return AppBar(
      iconTheme: const IconThemeData(color: Colors.white),
      backgroundColor: kSelectCardBackgroundColor,
      actions: const [
        Padding(
          padding: EdgeInsets.only(right: 10),
          child: Icon(
            Icons.favorite_border,
            color: Colors.white,
            size: 30,
          ),
        )
      ],
    );
  }
}

screen/detail/image_size.dart


import 'package:flutter/material.dart';
import 'package:b/constants.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 16),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            height: 90,
            width: 90,
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
              color: kCardBackgroundColor,
              borderRadius: BorderRadius.circular(10),
              border: Border.all(
                color: kSelectCardBackgroundColor,
                width: 1.5,
              ),
            ),
            child: Image.asset("assets/images/detail1.png"),
          ),
          Container(
            height: 90,
            width: 90,
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
              color: kCardBackgroundColor,
              borderRadius: BorderRadius.circular(10),
            ),
            child: Image.asset("assets/images/detail2.png"),
          ),
          Container(
            height: 90,
            width: 80,
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
              color: kCardBackgroundColor,
              borderRadius: BorderRadius.circular(10),
            ),
            child: Image.asset("assets/images/detail3.png"),
          ),
          Container(
            height: 90,
            width: 80,
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
              color: kCardBackgroundColor,
              borderRadius: BorderRadius.circular(10),
            ),
            child: Image.asset("assets/images/detail4.png"),
          ),
        ],
      ),
    );
  }
}

Model/product.dart


import 'dart:core';

class Product {
  String name;
  String imagePic;
  double rating;
  int price;

  Product(this.name, this.price, this.imagePic, this.rating);
}

List<Product> productList = [
  Product(
    'Dualshock 4 Camouflage Red',
    60,
    'assets/images/2.png',
    4.0,
  ),
  Product(
    'Dualshock 4 Midnight Blue',
    55,
    'assets/images/3.png',
    4.0,
  ),
  Product(
    'Dualshock 4 Glacier White',
    50,
    'assets/images/1.png',
    4.0,
  ),
];

Common/rating.dart


import 'package:flutter/material.dart';
import 'package:b/constants.dart';

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

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Icon(Icons.star, color: kSecondaryColor, size: 16),
        Icon(Icons.star, color: kSecondaryColor, size: 16),
        Icon(Icons.star, color: kSecondaryColor, size: 16),
        Icon(Icons.star, color: kSecondaryColor, size: 16),
        const Icon(Icons.star, color: Colors.black54, size: 16),
      ],
    );
  }
}