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,
        primarySwatch: Colors.green,
      ),
      home: OrderHistoryScreen(),
    );
  }
}

class OrderHistoryScreen extends StatefulWidget {
  @override
  _OrderHistoryScreenState createState() => _OrderHistoryScreenState();
}

class _OrderHistoryScreenState extends State<OrderHistoryScreen> {
  int _selectedIndex = 2;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Order History'),
        centerTitle: true,
      ),
      body: ListView(
        children: [
          OrderItem(
            date: '6 Dec, 2022',
            time: '20:50',
            orderId: '#23568464',
            products: [
              Product(
                name: 'Brake Pad',
                price: '12000.00',
                quantity: 1,
                imageUrl: 'https://placehold.co/100x100?description=Brake%20Pad',
              ),
            ],
            total: '13000.00',
            actionText: 'Track Order',
          ),
          OrderItem(
            date: '6 Dec, 2022',
            time: '20:50',
            orderId: '#23568463',
            products: [
              Product(
                name: 'Brake Pad',
                price: '60000.00',
                quantity: 5,
                imageUrl: 'https://placehold.co/100x100?description=Brake%20Pad',
              ),
              Product(
                name: 'Battery',
                price: '40000.00',
                quantity: 1,
                imageUrl: 'https://placehold.co/100x100?description=Car%20Battery',
              ),
            ],
            total: '13000.00',
            actionText: 'View Details',
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.category),
            label: 'Categories',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.history),
            label: 'Order History',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'Account',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.green,
        onTap: _onItemTapped,
      ),
    );
  }
}

class OrderItem extends StatelessWidget {
  final String date;
  final String time;
  final String orderId;
  final List<Product> products;
  final String total;
  final String actionText;

  const OrderItem({
    Key? key,
    required this.date,
    required this.time,
    required this.orderId,
    required this.products,
    required this.total,
    required this.actionText,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.all(8.0),
      child: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  date + ' ' + time,
                  style: TextStyle(
                    fontSize: 16.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(
                  orderId,
                  style: TextStyle(
                    fontSize: 16.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
            SizedBox(height: 8.0),
            ...products.map((product) => ListTile(
                  leading: Image.network(product.imageUrl),
                  title: Text(product.name),
                  subtitle: Text('Qty: ${product.quantity}'),
                  trailing: Text('₦ ${product.price}'),
                )),
            Divider(),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  'Total',
                  style: TextStyle(
                    fontSize: 16.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(
                  '₦$total',
                  style: TextStyle(
                    fontSize: 16.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.green,
                  ),
                ),
              ],
            ),
            SizedBox(height: 8.0),
            Center(
              child: ElevatedButton(
                onPressed: () {},
                child: Text(actionText),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class Product {
  final String name;
  final String price;
  final int quantity;
  final String imageUrl;

  Product({
    required this.name,
    required this.price,
    required this.quantity,
    required this.imageUrl,
  });
}