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.white,
      appBar: AppBar(
        backgroundColor: const Color(0xFFB0003C),
        toolbarHeight: 0,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              color: const Color(0xFFB0003C),
              padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      const Icon(Icons.wifi, color: Colors.white),
                      const Spacer(),
                      const Text(
                        '20:53',
                        style: TextStyle(color: Colors.white),
                      ),
                      const SizedBox(width: 8),
                      const Icon(Icons.brightness_2, color: Colors.white),
                      const SizedBox(width: 8),
                      const Icon(Icons.signal_cellular_alt, color: Colors.white),
                      const SizedBox(width: 8),
                      const Icon(Icons.battery_full, color: Colors.white),
                    ],
                  ),
                  const SizedBox(height: 10),
                  Row(
                    children: [
                      Image.network(
                        'https://placehold.co/40x40?description=Big%20C%20logo',
                        width: 40,
                        height: 40,
                      ),
                      const SizedBox(width: 8),
                      const Text(
                        'สวัสดีสมานฉันท์, 0863816736',
                        style: TextStyle(color: Colors.white),
                      ),
                    ],
                  ),
                  const SizedBox(height: 8),
                  const Text(
                    'บิ๊กซี รัชดาภิเษก- prom condo 122/64 prom con',
                    style: TextStyle(color: Colors.white),
                  ),
                  const SizedBox(height: 8),
                  Container(
                    padding: const EdgeInsets.symmetric(horizontal: 16),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(20),
                    ),
                    child: Row(
                      children: const [
                        Icon(Icons.search, color: Colors.grey),
                        SizedBox(width: 8),
                        Expanded(
                          child: TextField(
                            decoration: InputDecoration(
                              hintText: 'ค้นหาสินค้า',
                              border: InputBorder.none,
                            ),
                          ),
                        ),
                        Icon(Icons.qr_code_scanner, color: Colors.green),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Container(
              color: const Color(0xFFB0003C),
              padding: const EdgeInsets.all(16),
              child: Column(
                children: [
                  Image.network(
                    'https://placehold.co/300x150?description=Promotional%20banner%20with%20products',
                    width: double.infinity,
                    height: 150,
                    fit: BoxFit.cover,
                  ),
                  const SizedBox(height: 8),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      ElevatedButton(
                        onPressed: () {},
                        style: ElevatedButton.styleFrom(
                          backgroundColor: Colors.green,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(20),
                          ),
                        ),
                        child: const Text('ช้อปเลย'),
                      ),
                      Row(
                        children: [
                          const Icon(Icons.notifications, color: Colors.white),
                          const SizedBox(width: 16),
                          const Icon(Icons.shopping_cart, color: Colors.white),
                        ],
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Container(
              padding: const EdgeInsets.symmetric(vertical: 16),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  _buildIconButton('ส่งฟรี\nสั่งเลย!', Icons.local_shipping),
                  _buildIconButton('ส่วนลด\nออนไลน์', Icons.discount),
                  _buildIconButton('ภารกิจบิ๊กซี', Icons.target),
                  _buildIconButton('พาร์ทเนอร์', Icons.handshake),
                  _buildIconButton('ประกันภัย\nออนไลน์', Icons.health_and_safety),
                ],
              ),
            ),
            Container(
              height: 150,
              color: Colors.grey[200],
              child: PageView(
                children: [
                  Image.network(
                    'https://placehold.co/300x150?description=Promotional%20banner%20with%20bear%20mascot',
                    fit: BoxFit.cover,
                  ),
                  Image.network(
                    'https://placehold.co/300x150?description=Another%20promotional%20banner',
                    fit: BoxFit.cover,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        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: 'บัญชี',
          ),
        ],
      ),
    );
  }

  Widget _buildIconButton(String label, IconData icon) {
    return Column(
      children: [
        CircleAvatar(
          backgroundColor: Colors.grey[200],
          child: Icon(icon, color: Colors.red),
        ),
        const SizedBox(height: 4),
        Text(
          label,
          textAlign: TextAlign.center,
          style: const TextStyle(fontSize: 12),
        ),
      ],
    );
  }
}