Project: A Product Catalogue Screenپرۆژە: شاشەی کەتەلۆگی کاڵاکان

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: MyWidget()));
}

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

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  List<Map<String, dynamic>> products = [
    {
      'name': 'Product1',
      'description': 'Description of Product1',
      'price': 3.0,
      'image': 'https://…',
    },
    {
      'name': 'Product2',
      'description': 'Description of Product2',
      'price': 4.0,
      'image': 'https://…',
    },
    {
      'name': 'Product3',
      'description': 'Description of Product3',
      'price': 5.0,
      'image': 'https://…',
    },
    {
      'name': 'Product3',
      'description': 'Description of Product3',
      'price': 9.0,
      'image': 'https://…',
    },
  ];

  @override
  Widget build(BuildContext context) {
    List<Row> rows = [];

    for (int i = 0; i < products.length; i += 2) {
      int endIndex = (i + 2 <= products.length) ? i + 2 : products.length;

      rows.add(
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: products.sublist(i, endIndex).map((product) {
            return ProductCard(product);
          }).toList(),
        ),
      );
    }

    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.cyan,
        title: const Text('My App'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: rows,
      ),
      drawer: Drawer(
        child: ListView(
          children: [
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text('Default Drawer Header'),
            ),
            ListTile(
              title: const Text('Item 1'),
              onTap: () {
                debugPrint("Item 1 tapped");
              },
            ),
            ListTile(
              title: const Text('Item 2'),
              onTap: () {
                debugPrint("Item 2 tapped");
              },
            ),
          ],
        ),
      ),
      endDrawer: Drawer(
        child: ListView(
          children: [
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text('EndDrawer Header'),
            ),
            ListTile(
              title: const Text('Item 1'),
              onTap: () {
                debugPrint("Item 1 tapped");
              },
            ),
            ListTile(
              title: const Text('Item 2'),
              onTap: () {
                debugPrint("Item 2 tapped");
              },
            ),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.cyan[100],
        currentIndex: 0,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: "Search"),
          BottomNavigationBarItem(icon: Icon(Icons.people), label: "Profile")
        ],
      ),
    );
  }

  Widget ProductCard(Map<String, dynamic> product) {
    return Container(
      transform: Matrix4.rotationZ(0.05),
      height: 200,
      width: 150,
      padding: const EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: Colors.lightBlue[100],
        border: Border.all(color: Colors.grey, width: 2.0),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Text(
            product['name'], // Display product name
            style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
          ),
          Text(
            product['description'], // Display product name
            style: const TextStyle(fontSize: 14),
          ),
          Image.network(
            product['image'], // Display product image
            width: 50,
            height: 50,
            fit: BoxFit.cover,
          ),
          const SizedBox(height: 5), // Space between image and price
          Text(
            '\$${product['price'].toStringAsFixed(2)}', // Display price
            style: const TextStyle(fontSize: 14, color: Colors.grey),
          ),
        ],
      ),
    );
  }
}

// Step 1: the assignment's data — a List of Maps.
List<Map<String, dynamic>> products = [
  {
    'name': 'Tea glass',
    'description': 'Istikan, 100 ml',
    'price': 3.0,
    'image': 'assets/products/tea_glass.png',
  },
  {
    'name': 'Teaspoon',
    'description': 'Steel, set of 6',
    'price': 4.0,
    'image': 'assets/products/teaspoon.png',
  },
];

void main() {
  final first = products[0];
  print(first['name']); // Tea glass
  print(first['price'] + 1); // 4.0
  print(first['nmae']); // null: a typo, but no error until it is used
}

// Step 2: a Product class instead of a Map.
class Product {
  const Product({
    required this.name,
    required this.description,
    required this.price,
    required this.image,
  });

  final String name;
  final String description;
  final double price;
  final String image; // the path of an asset picture
}

const List<Product> products = [
  Product(
    name: 'Tea glass',
    description: 'Istikan, 100 ml',
    price: 3.0,
    image: 'assets/products/tea_glass.png',
  ),
  Product(
    name: 'Teaspoon',
    description: 'Steel, set of 6',
    price: 4.0,
    image: 'assets/products/teaspoon.png',
  ),
  Product(
    name: 'Sugar bowl',
    description: 'Glass, with a lid',
    price: 5.0,
    image: 'assets/products/sugar_bowl.png',
  ),
  Product(
    name: 'Teapot',
    description: 'Steel, 1 litre',
    price: 9.0,
    image: 'assets/products/teapot.png',
  ),
];

void main() {
  final first = products[0];
  print(first.name); // Tea glass
  print('\$${first.price.toStringAsFixed(2)}'); // $3.00
  // print(first.nmae); // compile error: The getter 'nmae' isn't defined
}

import 'package:flutter/material.dart';

import 'product.dart'; // the Product class (Step 2)

// Step 3: one card as a real widget class.
class ProductCard extends StatelessWidget {
  const ProductCard({super.key, required this.product});

  final Product product;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 150,
      height: 200,
      padding: const EdgeInsets.all(10),
      transform: Matrix4.rotationZ(0.05),
      transformAlignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.lightBlue[100],
        border: Border.all(color: Colors.grey, width: 2),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Text(
            product.name,
            style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
          ),
          Text(product.description, style: const TextStyle(fontSize: 14)),
          Image.asset(
            product.image,
            width: 50,
            height: 50,
            fit: BoxFit.cover,
            errorBuilder: (context, error, stackTrace) =>
                const Icon(Icons.image_not_supported, size: 50),
          ),
          const SizedBox(height: 5), // space between picture and price
          Text(
            '\$${product.price.toStringAsFixed(2)}',
            style: const TextStyle(fontSize: 14, color: Colors.grey),
          ),
        ],
      ),
    );
  }
}

flutter:
  uses-material-design: true
  assets:
    - assets/products/

import 'package:flutter/material.dart';

import 'product.dart'; // the Product class (Step 2)
import 'product_card.dart'; // ProductCard (Step 3)

// Step 5: the assignment's way — rows of two cards in a Column.
class RowsOfTwo extends StatelessWidget {
  const RowsOfTwo({super.key});

  @override
  Widget build(BuildContext context) {
    final List<Row> rows = [];
    for (int i = 0; i < products.length; i += 2) {
      final int endIndex = (i + 2 <= products.length) ? i + 2 : products.length;
      rows.add(
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: products.sublist(i, endIndex).map((product) {
            return ProductCard(product: product);
          }).toList(),
        ),
      );
    }
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: rows,
    );
  }
}

import 'package:flutter/material.dart';

import 'product.dart'; // the Product class (Step 2)
import 'product_card.dart'; // ProductCard (Step 3)

// Step 6: the same layout with GridView — it scrolls.
class ProductGrid extends StatelessWidget {
  const ProductGrid({super.key});

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2, // two cards in every row
      padding: const EdgeInsets.all(16),
      mainAxisSpacing: 24,
      crossAxisSpacing: 24,
      childAspectRatio: 150 / 200, // width ÷ height of one cell
      children: [
        for (final product in products) ProductCard(product: product),
      ],
    );
  }
}

// For a long list from a server: build only the visible cards.
class LongProductGrid extends StatelessWidget {
  const LongProductGrid({super.key, required this.items});

  final List<Product> items;

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      padding: const EdgeInsets.all(16),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        mainAxisSpacing: 24,
        crossAxisSpacing: 24,
        childAspectRatio: 150 / 200,
      ),
      itemCount: items.length,
      itemBuilder: (context, index) => ProductCard(product: items[index]),
    );
  }
}

import 'package:flutter/material.dart';

// Step 7: one drawer class used twice (drawer and endDrawer).
class ShopDrawer extends StatelessWidget {
  const ShopDrawer({super.key, required this.title, required this.items});

  final String title;
  final List<String> items;

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          DrawerHeader(
            decoration: const BoxDecoration(color: Colors.blue),
            child: Text(
              title,
              style: const TextStyle(color: Colors.white, fontSize: 24),
            ),
          ),
          for (final item in items)
            ListTile(
              title: Text(item),
              onTap: () {
                debugPrint('$item tapped');
                Navigator.pop(context); // close the drawer
              },
            ),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Shop')),
      drawer: const ShopDrawer(title: 'Categories', items: ['Glasses', 'Spoons']),
      endDrawer: const ShopDrawer(title: 'My account', items: ['Orders', 'Settings']),
      body: const Center(child: Text('Products')),
    );
  }
}

import 'package:flutter/material.dart';

// Step 8: a bottom bar that really changes the page.
class TabsDemo extends StatefulWidget {
  const TabsDemo({super.key});

  @override
  State<TabsDemo> createState() => _TabsDemoState();
}

class _TabsDemoState extends State<TabsDemo> {
  int _tab = 0; // 0 = Home, 1 = Search, 2 = Profile

  static const _pages = [
    Center(child: Text('Products')),
    Center(child: Text('Search')),
    Center(child: Text('Profile')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Shop')),
      body: _pages[_tab],
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.cyan[100],
        currentIndex: _tab,
        onTap: (index) => setState(() => _tab = index),
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
          BottomNavigationBarItem(icon: Icon(Icons.people), label: 'Profile'),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: CatalogueScreen()));
}

// ---------- the data ----------
class Product {
  const Product({
    required this.name,
    required this.description,
    required this.price,
    required this.image,
  });

  final String name;
  final String description;
  final double price;
  final String image; // the path of an asset picture
}

const List<Product> products = [
  Product(
    name: 'Tea glass',
    description: 'Istikan, 100 ml',
    price: 3.0,
    image: 'assets/products/tea_glass.png',
  ),
  Product(
    name: 'Teaspoon',
    description: 'Steel, set of 6',
    price: 4.0,
    image: 'assets/products/teaspoon.png',
  ),
  Product(
    name: 'Sugar bowl',
    description: 'Glass, with a lid',
    price: 5.0,
    image: 'assets/products/sugar_bowl.png',
  ),
  Product(
    name: 'Teapot',
    description: 'Steel, 1 litre',
    price: 9.0,
    image: 'assets/products/teapot.png',
  ),
];

// ---------- the screen ----------
class CatalogueScreen extends StatefulWidget {
  const CatalogueScreen({super.key});

  @override
  State<CatalogueScreen> createState() => _CatalogueScreenState();
}

class _CatalogueScreenState extends State<CatalogueScreen> {
  int _tab = 0; // the selected item of the bottom bar

  static const _pages = [
    ProductGrid(),
    Center(child: Text('Search')),
    Center(child: Text('Profile')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.cyan,
        title: const Text('My Shop'),
      ),
      drawer: const ShopDrawer(title: 'Categories', items: ['Glasses', 'Spoons']),
      endDrawer: const ShopDrawer(title: 'My account', items: ['Orders', 'Settings']),
      body: _pages[_tab],
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.cyan[100],
        currentIndex: _tab,
        onTap: (index) => setState(() => _tab = index),
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
          BottomNavigationBarItem(icon: Icon(Icons.people), label: 'Profile'),
        ],
      ),
    );
  }
}

// ---------- the grid ----------
class ProductGrid extends StatelessWidget {
  const ProductGrid({super.key});

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2,
      padding: const EdgeInsets.all(16),
      mainAxisSpacing: 24,
      crossAxisSpacing: 24,
      childAspectRatio: 150 / 200,
      children: [
        for (final product in products) ProductCard(product: product),
      ],
    );
  }
}

// ---------- one card ----------
class ProductCard extends StatelessWidget {
  const ProductCard({super.key, required this.product});

  final Product product;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(10),
      transform: Matrix4.rotationZ(0.05),
      transformAlignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.lightBlue[100],
        border: Border.all(color: Colors.grey, width: 2),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Text(
            product.name,
            style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
          ),
          Text(product.description, style: const TextStyle(fontSize: 14)),
          Image.asset(
            product.image,
            width: 50,
            height: 50,
            fit: BoxFit.cover,
            errorBuilder: (context, error, stackTrace) =>
                const Icon(Icons.image_not_supported, size: 50),
          ),
          const SizedBox(height: 5),
          Text(
            '\$${product.price.toStringAsFixed(2)}',
            style: const TextStyle(fontSize: 14, color: Colors.grey),
          ),
        ],
      ),
    );
  }
}

// ---------- the drawers ----------
class ShopDrawer extends StatelessWidget {
  const ShopDrawer({super.key, required this.title, required this.items});

  final String title;
  final List<String> items;

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          DrawerHeader(
            decoration: const BoxDecoration(color: Colors.blue),
            child: Text(
              title,
              style: const TextStyle(color: Colors.white, fontSize: 24),
            ),
          ),
          for (final item in items)
            ListTile(
              title: Text(item),
              onTap: () {
                debugPrint('$item tapped');
                Navigator.pop(context);
              },
            ),
        ],
      ),
    );
  }
}