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(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        primaryColor: Color(0xFF8CC63F),
      ),
      home: MyListPage(),
    );
  }
}

class MyListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color(0xFF8CC63F),
        title: Text(
          'ลิสต์ของฉัน',
          style: TextStyle(color: Colors.black),
        ),
        actions: [
          IconButton(
            icon: Icon(Icons.shopping_cart_outlined, color: Colors.black),
            onPressed: () {},
          ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: GridView.count(
          crossAxisCount: 2,
          crossAxisSpacing: 8.0,
          mainAxisSpacing: 8.0,
          children: [
            ProductCard(
              imageUrl:
                  'https://placehold.co/150x150?description=An%20image%20of%20a%20sauce%20package',
              title: 'ยกซด ซอสผัดกะเพราสตร',
              price: '฿23.00 / ซอง',
              originalPrice: '',
              discount: '',
            ),
            ProductCard(
              imageUrl:
                  'https://placehold.co/150x150?description=An%20image%20of%20a%20bottle%20of%20sauce',
              title: 'เด็กสมบูรณ์ ซีอิ๊วหวาน 400 ก.',
              price: '฿31.00 / ขวด',
              originalPrice: '฿37.00',
              discount: 'ลดไป 16%',
            ),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        selectedItemColor: Color(0xFF8CC63F),
        unselectedItemColor: Colors.grey,
        currentIndex: 2,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home_outlined),
            label: 'หน้าหลัก',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.card_giftcard_outlined),
            label: 'บิ๊กพอยต์',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.grid_view_outlined),
            label: 'สินค้า',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite_outline),
            label: 'ลิสต์ของฉัน',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person_outline),
            label: 'บัญชี',
          ),
        ],
      ),
    );
  }
}

class ProductCard extends StatelessWidget {
  final String imageUrl;
  final String title;
  final String price;
  final String originalPrice;
  final String discount;

  ProductCard({
    required this.imageUrl,
    required this.title,
    required this.price,
    required this.originalPrice,
    required this.discount,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8.0),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Stack(
            children: [
              Image.network(imageUrl, height: 100, fit: BoxFit.cover),
              if (discount.isNotEmpty)
                Positioned(
                  top: 8,
                  left: 8,
                  child: Container(
                    color: Colors.yellow,
                    padding: EdgeInsets.symmetric(horizontal: 4, vertical: 2),
                    child: Text(
                      discount,
                      style: TextStyle(fontSize: 12, color: Colors.black),
                    ),
                  ),
                ),
              Positioned(
                bottom: 8,
                right: 8,
                child: CircleAvatar(
                  backgroundColor: Color(0xFF8CC63F),
                  child: Icon(Icons.shopping_cart_outlined, color: Colors.white),
                ),
              ),
            ],
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              title,
              style: TextStyle(fontSize: 14),
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: Row(
              children: [
                Text(
                  price,
                  style: TextStyle(fontSize: 16, color: Colors.red),
                ),
                if (originalPrice.isNotEmpty) ...[
                  SizedBox(width: 4),
                  Text(
                    originalPrice,
                    style: TextStyle(
                      fontSize: 12,
                      color: Colors.grey,
                      decoration: TextDecoration.lineThrough,
                    ),
                  ),
                ],
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Icon(Icons.motorcycle_outlined, size: 20),
                Icon(Icons.local_shipping_outlined, size: 20),
                Icon(Icons.storefront_outlined, size: 20),
              ],
            ),
          ),
        ],
      ),
    );
  }
}