Generated code from pixels2flutter.dev

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shopping App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: ShoppingPage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class ShoppingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            // Header with date and page number
            Container(
              padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
              color: Colors.grey[200],
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    '24. 5. 3. 화 12:50',
                    style: TextStyle(color: Colors.black, fontSize: 12),
                  ),
                  Text(
                    '카테고리',
                    style: TextStyle(color: Colors.black, fontSize: 12),
                  ),
                  Text(
                    '신상품',
                    style: TextStyle(color: Colors.black, fontSize: 12),
                  ),
                  Text(
                    '베스트',
                    style: TextStyle(color: Colors.black, fontSize: 12),
                  ),
                  Text(
                    '알뜰쇼핑',
                    style: TextStyle(color: Colors.black, fontSize: 12),
                  ),
                  Text(
                    '특가/혜택',
                    style: TextStyle(color: Colors.black, fontSize: 12),
                  ),
                ],
              ),
            ),
            // Product Grid
            GridView.count(
              physics: NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              crossAxisCount: 3,
              children: List.generate(6, (index) {
                return ProductTile(
                  title: '상품명',
                  price: '9,999원',
                  discount: '30%',
                  discountedPrice: '6,900원',
                  imageUrl: 'https://corsproxy.io/?https%3A%2F%2Foaidalleapiprodscus.blob.core.windows.net%2Fprivate%2Forg-TUBHLKYl2lBqM1b7iE99XgMQ%2Fuser-UjOypK7HRZS7bCpwDOO1UgLB%2Fimg-LeLkuMk8FU9htBBAolzk2Rsv.png%3Fst%3D2024-05-03T02%253A53%253A27Z%26se%3D2024-05-03T04%253A53%253A27Z%26sp%3Dr%26sv%3D2021-08-06%26sr%3Db%26rscd%3Dinline%26rsct%3Dimage%2Fpng%26skoid%3D6aaadede-4fb3-4698-a8f6-684d7786b067%26sktid%3Da48cca56-e6da-484e-a814-9c849652bcb3%26skt%3D2024-05-02T16%253A51%253A06Z%26ske%3D2024-05-03T16%253A51%253A06Z%26sks%3Db%26skv%3D2021-08-06%26sig%3DvSZKl9K1xXace3kJtD%252BtF8ArpOsSt3JUT%2FFAJ%252BNlzz0%253D',
                );
              }),
            ),
            // Banner
            Container(
              margin: EdgeInsets.symmetric(vertical: 16.0),
              child: Image.network(
                'https://corsproxy.io/?https%3A%2F%2Foaidalleapiprodscus.blob.core.windows.net%2Fprivate%2Forg-TUBHLKYl2lBqM1b7iE99XgMQ%2Fuser-UjOypK7HRZS7bCpwDOO1UgLB%2Fimg-7zPbKWblGMd8B0jkIqd80Kb2.png%3Fst%3D2024-05-03T02%253A53%253A25Z%26se%3D2024-05-03T04%253A53%253A25Z%26sp%3Dr%26sv%3D2021-08-06%26sr%3Db%26rscd%3Dinline%26rsct%3Dimage%2Fpng%26skoid%3D6aaadede-4fb3-4698-a8f6-684d7786b067%26sktid%3Da48cca56-e6da-484e-a814-9c849652bcb3%26skt%3D2024-05-02T23%253A28%253A30Z%26ske%3D2024-05-03T23%253A28%253A30Z%26sks%3Db%26skv%3D2021-08-06%26sig%3DnXc619PxDcHUDj%2FvXRH7zqSaZlcZO1Wdgp1mnWRqrvE%253D',
                fit: BoxFit.cover,
              ),
            ),
            // Product Grid with different background
            Container(
              color: Colors.brown[100],
              padding: EdgeInsets.symmetric(vertical: 16.0),
              child: GridView.count(
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                crossAxisCount: 3,
                children: List.generate(6, (index) {
                  return ProductTile(
                    title: '상품명',
                    price: '45,900원',
                    discount: '73%',
                    discountedPrice: '45,900원',
                    imageUrl: 'https://corsproxy.io/?https%3A%2F%2Foaidalleapiprodscus.blob.core.windows.net%2Fprivate%2Forg-TUBHLKYl2lBqM1b7iE99XgMQ%2Fuser-UjOypK7HRZS7bCpwDOO1UgLB%2Fimg-LeLkuMk8FU9htBBAolzk2Rsv.png%3Fst%3D2024-05-03T02%253A53%253A27Z%26se%3D2024-05-03T04%253A53%253A27Z%26sp%3Dr%26sv%3D2021-08-06%26sr%3Db%26rscd%3Dinline%26rsct%3Dimage%2Fpng%26skoid%3D6aaadede-4fb3-4698-a8f6-684d7786b067%26sktid%3Da48cca56-e6da-484e-a814-9c849652bcb3%26skt%3D2024-05-02T16%253A51%253A06Z%26ske%3D2024-05-03T16%253A51%253A06Z%26sks%3Db%26skv%3D2021-08-06%26sig%3DvSZKl9K1xXace3kJtD%252BtF8ArpOsSt3JUT%2FFAJ%252BNlzz0%253D',
                  );
                }),
              ),
            ),
            // Footer with link
            Container(
              padding: EdgeInsets.symmetric(vertical: 16.0),
              alignment: Alignment.center,
              child: Text(
                'https://www.kurly.com/main',
                style: TextStyle(color: Colors.grey, fontSize: 12),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class ProductTile extends StatelessWidget {
  final String title;
  final String price;
  final String discount;
  final String discountedPrice;
  final String imageUrl;

  const ProductTile({
    Key? key,
    required this.title,
    required this.price,
    required this.discount,
    required this.discountedPrice,
    required this.imageUrl,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            child: Image.network(
              imageUrl,
              fit: BoxFit.cover,
            ),
          ),
          Padding(
            padding: EdgeInsets.all(4.0),
            child: Text(
              title,
              style: TextStyle(fontSize: 14),
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 4.0),
            child: Text(
              price,
              style: TextStyle(
                fontSize: 12,
                decoration: TextDecoration.lineThrough,
                color: Colors.grey,
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 4.0),
            child: Row(
              children: [
                Text(
                  discount,
                  style: TextStyle(
                    fontSize: 12,
                    color: Colors.red,
                  ),
                ),
                SizedBox(width: 4.0),
                Text(
                  discountedPrice,
                  style: TextStyle(
                    fontSize: 12,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}