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,
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.purple,
          brightness: Brightness.light,
        ),
      ),
      home: WomenBagsScreen(),
    );
  }
}

class WomenBagsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Women bags'),
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {},
          ),
        ],
      ),
      body: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(onPressed: () {}, child: Text('Filters')),
              ElevatedButton(onPressed: () {}, child: Text('Sorting')),
            ],
          ),
          Expanded(
            child: GridView.builder(
              padding: EdgeInsets.all(8.0),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                crossAxisSpacing: 8.0,
                mainAxisSpacing: 8.0,
                childAspectRatio: 0.7,
              ),
              itemCount: 4,
              itemBuilder: (context, index) {
                return GestureDetector(
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => BagDetailScreen()),
                    );
                  },
                  child: GridTile(
                    footer: GridTileBar(
                      backgroundColor: Colors.black54,
                      title: Text('Mini Leather Olimpia Bag'),
                      subtitle: Text('\$80'),
                    ),
                    child: Image.network(
                      'https://corsproxy.io/?https%3A%2F%2Foaidalleapiprodscus.blob.core.windows.net%2Fprivate%2Forg-dtDDtkEGoFccn5xaP5W1p3Rr%2Fuser-3XZA7QXb1LF8ADMIxEZC0Qp4%2Fimg-jf1Ewoa7JRwQUe48S2ZugWLd.png%3Fst%3D2023-12-01T20%253A24%253A47Z%26se%3D2023-12-01T22%253A24%253A47Z%26sp%3Dr%26sv%3D2021-08-06%26sr%3Db%26rscd%3Dinline%26rsct%3Dimage%2Fpng%26skoid%3D6aaadede-4fb3-4698-a8f6-684d7786b067%26sktid%3Da48cca56-e6da-484e-a814-9c849652bcb3%26skt%3D2023-12-01T17%253A48%253A55Z%26ske%3D2023-12-02T17%253A48%253A55Z%26sks%3Db%26skv%3D2021-08-06%26sig%3DD%252B%252BNTjrsjDoGkR6r377oPIqodAM2wQzQ%2F%2FfALbL1L80%253D',
                      fit: BoxFit.cover,
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
      bottomNavigationBar: NavigationBar(
        destinations: [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
          NavigationDestination(icon: Icon(Icons.favorite), label: 'Favorites'),
          NavigationDestination(icon: Icon(Icons.shopping_bag), label: 'Bag'),
          NavigationDestination(icon: Icon(Icons.person), label: 'Account'),
        ],
      ),
    );
  }
}

class BagDetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Mini Leather...'),
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {},
          ),
        ],
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Image.network(
              'https://corsproxy.io/?https%3A%2F%2Foaidalleapiprodscus.blob.core.windows.net%2Fprivate%2Forg-dtDDtkEGoFccn5xaP5W1p3Rr%2Fuser-3XZA7QXb1LF8ADMIxEZC0Qp4%2Fimg-0q2df63iPVcRlB0HwQiuWRdH.png%3Fst%3D2023-12-01T20%253A24%253A50Z%26se%3D2023-12-01T22%253A24%253A50Z%26sp%3Dr%26sv%3D2021-08-06%26sr%3Db%26rscd%3Dinline%26rsct%3Dimage%2Fpng%26skoid%3D6aaadede-4fb3-4698-a8f6-684d7786b067%26sktid%3Da48cca56-e6da-484e-a814-9c849652bcb3%26skt%3D2023-11-30T23%253A10%253A29Z%26ske%3D2023-12-01T23%253A10%253A29Z%26sks%3Db%26skv%3D2021-08-06%26sig%3D%252B%252BF6kUxneEcxGHAupdcDW3lWHPtb7iOvvN4A7iYd0RM%253D',
              fit: BoxFit.cover,
            ),
            SizedBox(height: 16),
            Text(
              'Mini Leather Olimpia Bag',
              style: Theme.of(context).textTheme.headline6,
            ),
            SizedBox(height: 8),
            Text(
              '\$80',
              style: Theme.of(context).textTheme.headline5?.copyWith(color: Colors.purple),
            ),
            SizedBox(height: 16),
            Text(
              'Crafted in grainy leather, this bag features foldover flap with magnetic closure, polished chain strap, the interior has a zip compartment and wall slip pocket.',
            ),
            SizedBox(height: 16),
            Text('Color:'),
            Row(
              children: List.generate(4, (index) => Padding(
                padding: const EdgeInsets.only(right: 8.0),
                child: CircleAvatar(),
              )),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {},
              child: Text('Add to Cart'),
              style: ElevatedButton.styleFrom(
                minimumSize: Size(double.infinity, 50),
              ),
            ),
            IconButton(
              icon: Icon(Icons.favorite_border),
              onPressed: () {},
            ),
          ],
        ),
      ),
    );
  }
}