import 'dart:ui';

import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';

class ScreenOne extends StatefulWidget {

const ScreenOne({super.key});

@override
State<ScreenOne> createState() => _ScreenOneState();
}

class _ScreenOneState extends State<ScreenOne> {

@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
children: [
Row(
children: [
Text("EXPLORE", style: TextStyle(fontWeight:
FontWeight.bold,fontSize: 30),),
],
),
Row(
children: [
Expanded(child: SearchBar(
leading: Icon(Icons.search),
trailing: [Icon(Icons.mic)],
hintText: "Search for Clothes..",

),
),
Padding(
padding: const EdgeInsets.all(10),
child: Icon(Icons.filter_alt_sharp, size: 40,),
),
],
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 25),
child: Row(
children: [
Expanded(
child: ElevatedButton(onPressed: () {}, child:
Text("Top",style:TextStyle(fontWeight: FontWeight.bold),)),
),
SizedBox(width: 3,),
Expanded(
child: ElevatedButton(onPressed: () {}, child:
Text("Skirt",style:TextStyle(fontWeight: FontWeight.bold),)),
),
SizedBox(width: 3,),
Expanded(
child: ElevatedButton(onPressed: () {}, child:
Text("Kurta",style:TextStyle(fontWeight: FontWeight.bold),)),
 ),
SizedBox(width: 3,),
Expanded(
child: ElevatedButton(onPressed: () {}, child:
Text("Lengha",style:TextStyle(fontWeight: FontWeight.bold),)),
),
],
),
),
SizedBox(
child: Row(
children: [
Expanded(
child: ProductCard(
title: "OBATU",
imageUrl: 'assets/images/download.jpg',
subtitle: 'A Line Skirt with Waistband'),
),
Expanded(
child: ProductCard(
title: "FLORAL",
imageUrl: 'assets/images/download (1).jpg',
subtitle: 'A Line Skirt with Waistband'),
),
],
),
),
Row(
children: [
Expanded(
child: ProductCard(
title: "DEKLOOKS",
imageUrl: 'assets/images/download (2).jpg',
subtitle: 'A Line Skirt with Waistband'),
),
Expanded(
child: ProductCard(
title: "NEUDIS",
imageUrl: 'assets/images/images.jpg',
subtitle: 'A Line Skirt with Waistband'),
),
],
),
],
),
),
),
bottomNavigationBar: BottomNavigationBar(
selectedItemColor: Colors.black87,
unselectedItemColor: Colors.grey,

items: [
BottomNavigationBarItem(
backgroundColor: Colors.white,
icon: Icon(Icons.home_outlined,size: 28),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.search,size: 27),
 label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite_border_outlined,size: 27),
label: 'Save',
),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_cart_outlined,size: 27),
label: 'Cart',
),
BottomNavigationBarItem(
icon: Icon(Icons.person,size: 27),
label: 'Profile',
),
],
),
);
}
}

class ProductCard extends StatelessWidget {

final String title;
final String imageUrl;
final String subtitle;

ProductCard({
required this.title,
required this.imageUrl,
required this.subtitle,
});

@override
Widget build(BuildContext context) {
return Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack(
children: [
Container(
height: 230,
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage(imageUrl),fit:
BoxFit.cover),
borderRadius: BorderRadius.circular(20),
),
),
Positioned(
top: 8.0,
right: 8.0,
child: Icon(
Icons.favorite_sharp,size: 25,
color: Colors.white,

),
),
],
),
 Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
),
),
SizedBox(height: 8.0),
Text(
subtitle,
style: TextStyle(
fontSize: 14.0,
color: Colors.black87,
),
),
],
),
),
],
),
);
}
}