Generated code from pixels2flutter.dev

main.dart

import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Auto Parts Dashboard',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: DashboardScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class DashboardScreen extends StatefulWidget {
  @override
  _DashboardScreenState createState() => _DashboardScreenState();
}

class _DashboardScreenState extends State<DashboardScreen> {
  late Future<List<Part>> partsFuture;
  Set<int> cartItems = {};

  @override
  void initState() {
    super.initState();
    partsFuture = fetchParts();
  }

  Future<List<Part>> fetchParts() async {
    final response = await http.get(Uri.parse('http://localhost:3000'));

    if (response.statusCode == 200) {
      List<dynamic> partsJson = json.decode(response.body);
      return partsJson.map((json) => Part.fromJson(json)).toList();
    } else {
      throw Exception('Failed to load parts');
    }
  }

  void toggleCart(int id) {
    setState(() {
      if (cartItems.contains(id)) {
        cartItems.remove(id);
      } else {
        cartItems.add(id);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('2013 Hyundai Verna i3 Engine'),
        actions: [
          Stack(
            alignment: Alignment.topRight,
            children: [
              IconButton(
                icon: Icon(Icons.shopping_cart),
                onPressed: () {},
              ),
              if (cartItems.isNotEmpty)
                CircleAvatar(
                  radius: 10.0,
                  backgroundColor: Colors.red,
                  child: Text(
                    cartItems.length.toString(),
                    style: TextStyle(fontSize: 12.0, color: Colors.white),
                  ),
                ),
            ],
          ),
        ],
      ),
      body: FutureBuilder<List<Part>>(
        future: partsFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text('Error: ${snapshot.error}'));
          } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
            return Center(child: Text('No parts found'));
          } else {
            return GridView.builder(
              padding: EdgeInsets.all(8.0),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                crossAxisSpacing: 8.0,
                mainAxisSpacing: 8.0,
                childAspectRatio: 0.8,
              ),
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                Part part = snapshot.data![index];
                return Card(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Expanded(
                        child: Image.network(
                          part.imageUrl,
                          fit: BoxFit.contain,
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.all(8.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              children: [
                                Icon(Icons.star, color: Colors.yellow, size: 20.0),
                                SizedBox(width: 4.0),
                                Text(part.rating.toString(), style: TextStyle(fontSize: 14.0)),
                              ],
                            ),
                            SizedBox(height: 4.0),
                            Text(part.name, style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold)),
                            SizedBox(height: 4.0),
                            Text('\$ ${part.price}', style: TextStyle(fontSize: 14.0, color: Colors.green)),
                            SizedBox(height: 4.0),
                            Text('In stock: ${part.inStock}', style: TextStyle(fontSize: 12.0)),
                            if (part.inStock == 0)
                              Text('Out of stock', style: TextStyle(fontSize: 12.0, color: Colors.red)),
                          ],
                        ),
                      ),
                      TextButton(
                        style: TextButton.styleFrom(
                          backgroundColor: cartItems.contains(part.id) ? Colors.transparent : Colors.green,
                          primary: cartItems.contains(part.id) ? Colors.red : Colors.white,
                        ),
                        onPressed: part.inStock > 0 ? () => toggleCart(part.id) : null,
                        child: Text(cartItems.contains(part.id) ? 'Remove' : 'Add to cart'),
                      ),
                    ],
                  ),
                );
              },
            );
          }
        },
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.grid_view),
            label: 'Categories',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.history),
            label: 'Order History',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Account',
          ),
        ],
        selectedItemColor: Colors.green,
      ),
    );
  }
}

class Part {
  final int id;
  final String name;
  final double rating;
  final double price;
  final String imageUrl;
  final int inStock;

  Part({
    required this.id,
    required this.name,
    required this.rating,
    required this.price,
    required this.imageUrl,
    required this.inStock,
  });

  factory Part.fromJson(Map<String, dynamic> json) {
    return Part(
      id: json['id'],
      name: json['name'],
      rating: json['rating'].toDouble(),
      price: json['price'].toDouble(),
      imageUrl: json['imageUrl'],
      inStock: json['inStock'],
    );
  }
}