Generated code from pixels2flutter.dev

main.dart

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(useMaterial3: true),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      appBar: AppBar(
        backgroundColor: const Color(0xFFB8004C),
        title: Row(
          children: [
            Image.network(
              'https://placehold.co/40x40?description=Big%20C%20logo',
              width: 40,
              height: 40,
            ),
            const SizedBox(width: 8),
            const Text(
              'สวัสดียามดีค, 0863816736\nบิ๊กซี รัชดาภิเษก- prom condo 122/64 prom con',
              style: TextStyle(fontSize: 14),
            ),
            const Spacer(),
            const Icon(Icons.keyboard_arrow_down),
          ],
        ),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              color: const Color(0xFFB8004C),
              padding: const EdgeInsets.all(16),
              child: Column(
                children: [
                  Row(
                    children: [
                      Expanded(
                        child: TextField(
                          decoration: InputDecoration(
                            filled: true,
                            fillColor: Colors.white,
                            prefixIcon: const Icon(Icons.search),
                            hintText: 'ค้นหาสินค้า',
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8),
                              borderSide: BorderSide.none,
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(width: 8),
                      Container(
                        padding: const EdgeInsets.all(8),
                        decoration: BoxDecoration(
                          color: const Color(0xFFB3E500),
                          borderRadius: BorderRadius.circular(8),
                        ),
                        child: const Icon(Icons.qr_code_scanner, color: Colors.white),
                      ),
                      const SizedBox(width: 8),
                      const Icon(Icons.notifications, color: Colors.white),
                      const SizedBox(width: 8),
                      const Icon(Icons.shopping_cart, color: Colors.white),
                    ],
                  ),
                  const SizedBox(height: 16),
                  Image.network(
                    'https://placehold.co/600x200?description=Promotional%20banner%20with%20products',
                    height: 200,
                    fit: BoxFit.cover,
                  ),
                ],
              ),
            ),
            const SizedBox(height: 16),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                _buildCategoryItem('บิ๊กพอยต์\nเริ่มใช้งาน', Icons.card_giftcard),
                _buildCategoryItem('คูปองของฉัน\nเริ่มต้นใช้งาน', Icons.confirmation_number),
              ],
            ),
            const SizedBox(height: 16),
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                children: [
                  _buildIconItem('ส่งฟรี\nสั่งเลย!', 'https://placehold.co/60x60?description=Delivery%20icon'),
                  _buildIconItem('ส่วนลด\nออนไลน์', 'https://placehold.co/60x60?description=Discount%20icon'),
                  _buildIconItem('ภารกิจบิ๊กซี', 'https://placehold.co/60x60?description=Target%20icon'),
                  _buildIconItem('พาร์ทเนอร์', 'https://placehold.co/60x60?description=Handshake%20icon'),
                  _buildIconItem('ประกันภัย\nออนไลน์', 'https://placehold.co/60x60?description=Insurance%20icon'),
                ],
              ),
            ),
            const SizedBox(height: 16),
            Image.network(
              'https://placehold.co/600x200?description=Membership%20promotion%20banner',
              height: 200,
              fit: BoxFit.cover,
            ),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'หน้าหลัก'),
          BottomNavigationBarItem(icon: Icon(Icons.card_giftcard), label: 'บิ๊กพอยต์'),
          BottomNavigationBarItem(icon: Icon(Icons.grid_view), label: 'สินค้า'),
          BottomNavigationBarItem(icon: Icon(Icons.favorite), label: 'ลิสต์ของฉัน'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'บัญชี'),
        ],
        selectedItemColor: const Color(0xFFB8004C),
        unselectedItemColor: Colors.grey,
      ),
    );
  }

  Widget _buildCategoryItem(String title, IconData icon) {
    return Column(
      children: [
        Icon(icon, size: 40, color: const Color(0xFFB8004C)),
        const SizedBox(height: 4),
        Text(
          title,
          textAlign: TextAlign.center,
          style: const TextStyle(fontSize: 12, color: Colors.black),
        ),
      ],
    );
  }

  Widget _buildIconItem(String title, String imageUrl) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8),
      child: Column(
        children: [
          Image.network(imageUrl, width: 60, height: 60),
          const SizedBox(height: 4),
          Text(
            title,
            textAlign: TextAlign.center,
            style: const TextStyle(fontSize: 12, color: Colors.black),
          ),
        ],
      ),
    );
  }
}