Skip to content

Instantly share code, notes, and snippets.

@malibayram

malibayram/beetech_1.dart

Created January 22, 2024 09:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save malibayram/62e76c1db2a3184e48ea5b4175780fb7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save malibayram/62e76c1db2a3184e48ea5b4175780fb7 to your computer and use it in GitHub Desktop.
Download ZIP
beetech_1.dart
Raw
beetech_1.dart
// Copyright (c) 2019, the Dart project authors. Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
const MyHomePage({
super.key,
required this.title,
}) : super();
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Container(
width: 360,
height: 800,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(color: Colors.white),
child: Stack(
children: [
Positioned(
left: 16,
top: 146,
child: Container(
width: 328,
height: 837,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Container(
width: 156,
height: 263,
decoration: BoxDecoration(color: Colors.white),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 164,
padding: const EdgeInsets.only(
top: 4,
left: 4,
right: 12,
bottom: 136,
),
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
image: DecorationImage(
image: NetworkImage("https://via.placeholder.com/156x164"),
fit: BoxFit.cover,
),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
decoration: ShapeDecoration(
color: Color(0xFF10B981),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(2)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'Trending',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w500,
height: 0.15,
),
),
],
),
),
const SizedBox(width: 65),
Container(
width: 24,
height: 24,
padding: const EdgeInsets.all(4),
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
color: Colors.white.withOpacity(0.6399999856948853),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50),
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 16,
height: 16,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 16,
height: 16,
child: Stack(children: [
]),
),
],
),
),
],
),
),
],
),
),
const SizedBox(height: 8),
Container(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 156,
child: Text(
'Allen Solly Regular fit cotton shirt',
style: TextStyle(
color: Color(0xFF1F2937),
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w400,
height: 0.12,
),
),
),
const SizedBox(height: 8),
Container(
width: double.infinity,
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'\$35',
style: TextStyle(
color: Color(0xFF1F2937),
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w600,
height: 0.11,
letterSpacing: 0.07,
),
),
const SizedBox(width: 4),
Text(
'\$40.25',
style: TextStyle(
color: Color(0xFF9CA3AF),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w500,
height: 0.18,
),
),
const SizedBox(width: 4),
Text(
'15% OFF',
style: TextStyle(
color: Color(0xFFEA580C),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w500,
height: 0.18,
),
),
],
),
),
const SizedBox(height: 8),
Container(
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.all(2),
decoration: ShapeDecoration(
color: Color(0xFFF59E0B),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(2)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 12,
height: 12,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Container(
width: 12,
height: 12,
child: Stack(children: [
]),
),
),
],
),
),
],
),
),
const SizedBox(width: 4),
Text(
'4.3',
style: TextStyle(
color: Color(0xFF1F2937),
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w500,
height: 0.12,
),
),
const SizedBox(width: 4),
Text(
'(41)',
style: TextStyle(
color: Color(0xFF6B7280),
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w400,
height: 0.12,
),
),
],
),
),
],
),
),
],
),
),
),
Positioned(
left: 172,
top: 0,
child: Container(
width: 156,
height: 263,
decoration: BoxDecoration(color: Colors.white),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 156,
height: 164,
padding: const EdgeInsets.only(
top: 4,
left: 120,
right: 12,
bottom: 136,
),
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
image: DecorationImage(
image: NetworkImage("https://via.placeholder.com/156x164"),
fit: BoxFit.cover,
),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 24,
height: 24,
padding: const EdgeInsets.all(4),
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
color: Colors.white.withOpacity(0.6399999856948853),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50),
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 16,
height: 16,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 16,
height: 16,
child: Stack(children: [
]),
),
],
),
),
],
),
),
],
),
),
const SizedBox(height: 8),
Container(
height: 91,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 156,
child: Text(
'Calvin Clein Regular fit slim fit shirt',
style: TextStyle(
color: Color(0xFF1F2937),
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w400,
height: 0.12,
),
),
),
const SizedBox(height: 8),
Container(
width: double.infinity,
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'\$52',
style: TextStyle(
color: Color(0xFF1F2937),
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w600,
height: 0.11,
letterSpacing: 0.07,
),
),
const SizedBox(width: 4),
Text(
'\$62.4',
style: TextStyle(
color: Color(0xFF9CA3AF),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w500,
height: 0.18,
),
),
const SizedBox(width: 4),
Text(
'20% OFF',
style: TextStyle(
color: Color(0xFFEA580C),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w500,
height: 0.18,
),
),
],
),
),
const SizedBox(height: 8),
Container(
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.all(2),
decoration: ShapeDecoration(
color: Color(0xFFF59E0B),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(2)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 12,
height: 12,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Container(
width: 12,
height: 12,
child: Stack(children: [
]),
),
),
],
),
),
],
),
),
const SizedBox(width: 4),
Text(
'4.1',
style: TextStyle(
color: Color(0xFF1F2937),
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w500,
height: 0.12,
),
),
const SizedBox(width: 4),
Text(
'(87)',
style: TextStyle(
color: Color(0xFF6B7280),
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w400,
height: 0.12,
),
),
],
),
),
],
),
),
],
),
),
),
Positioned(
left: 0,
top: 287,
child: Container(
width: 156,
height: 263,
decoration: BoxDecoration(color: Colors.white),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 156,
height: 164,
padding: const EdgeInsets.only(
top: 4,
left: 120,
right: 12,
bottom: 136,
),
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
image: DecorationImage(
image: NetworkImage("https://via.placeholder.com/156x164"),
fit: BoxFit.cover,
),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 24,
height: 24,
padding: const EdgeInsets.all(4),
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
color: Colors.white.withOpacity(0.6399999856948853),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50),
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 16,
height: 16,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 16,
height: 16,
child: Stack(children: [
]),
),
],
),
),
],
),
),
],
),
),
const SizedBox(height: 8),
Container(
height: 91,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 156,
child: Text(
'H&M Regular fit cotton shirt',
style: TextStyle(
color: Color(0xFF1F2937),
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w400,
height: 0.12,
),
),
),
const SizedBox(height: 8),
Container(
width: double.infinity,
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'\$59',
style: TextStyle(
color: Color(0xFF1F2937),
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w600,
height: 0.11,
letterSpacing: 0.07,
),
),
const SizedBox(width: 4),
Text(
'\$70.8',
style: TextStyle(
color: Color(0xFF9CA3AF),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w500,
height: 0.18,
),
),
const SizedBox(width: 4),
Text(
'20% OFF',
style: TextStyle(
color: Color(0xFFEA580C),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w500,
height: 0.18,
),
),
],
),
),
const SizedBox(height: 8),
Container(
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.all(2),
decoration: ShapeDecoration(
color: Color(0xFFF59E0B),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(2)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 12,
height: 12,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Container(
width: 12,
height: 12,
child: Stack(children: [
]),
),
),
],
),
),
],
),
),
const SizedBox(width: 4),
Text(
'4.3',
style: TextStyle(
color: Color(0xFF1F2937),
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w500,
height: 0.12,
),
),
const SizedBox(width: 4),
Text(
'(41)',
style: TextStyle(
color: Color(0xFF6B7280),
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w400,
height: 0.12,
),
),
],
),
),
],
),
),
],
),
),
),
Positioned(
left: 172,
top: 287,
child: Container(
width: 156,
height: 263,
decoration: BoxDecoration(color: Colors.white),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 164,
padding: const EdgeInsets.only(
top: 4,
left: 4,
right: 12,
bottom: 136,
),
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
image: DecorationImage(
image: NetworkImage("https://via.placeholder.com/156x164"),
fit: BoxFit.cover,
),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
decoration: ShapeDecoration(
color: Color(0xFF10B981),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(2)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'Trending',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w500,
height: 0.15,
),
),
],
),
),
const SizedBox(width: 65),
Container(
width: 24,
height: 24,
padding: const EdgeInsets.all(4),
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
color: Colors.white.withOpacity(0.6399999856948853),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50),
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 16,
height: 16,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 16,
height: 16,
child: Stack(children: [
]),
),
],
),
),
],
),
),
],
),
),
const SizedBox(height: 8),
Container(
height: 91,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 156,
child: Text(
'Calvin Clein Regular fit casual shirt',
style: TextStyle(
color: Color(0xFF1F2937),
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w400,
height: 0.12,
),
),
),
const SizedBox(height: 8),
Container(
width: double.infinity,
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'\$60',
style: TextStyle(
color: Color(0xFF1F2937),
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w600,
height: 0.11,
letterSpacing: 0.07,
),
),
const SizedBox(width: 4),
Text(
'\$75',
style: TextStyle(
color: Color(0xFF9CA3AF),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w500,
height: 0.18,
),
),
const SizedBox(width: 4),
Text(
'25% OFF',
style: TextStyle(
color: Color(0xFFEA580C),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w500,
height: 0.18,
),
),
],
),
),
const SizedBox(height: 8),
Container(
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.all(2),
decoration: ShapeDecoration(
color: Color(0xFFF59E0B),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(2)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 12,
height: 12,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Container(
width: 12,
height: 12,
child: Stack(children: [
]),
),
),
],
),
),
],
),
),
const SizedBox(width: 4),
Text(
'4.8',
style: TextStyle(
color: Color(0xFF1F2937),
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w500,
height: 0.12,
),
),
const SizedBox(width: 4),
Text(
'(692)',
style: TextStyle(
color: Color(0xFF6B7280),
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w400,
height: 0.12,
),
),
],
),
),
],
),
),
],
),
),
),
Positioned(
left: 0,
top: 574,
child: Container(
width: 156,
height: 263,
decoration: BoxDecoration(color: Colors.white),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 156,
height: 164,
padding: const EdgeInsets.only(
top: 4,
left: 120,
right: 12,
bottom: 136,
),
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
image: DecorationImage(
image: NetworkImage("https://via.placeholder.com/156x164"),
fit: BoxFit.cover,
),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 24,
height: 24,
padding: const EdgeInsets.all(4),
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
color: Colors.white.withOpacity(0.6399999856948853),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50),
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 16,
height: 16,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 16,
height: 16,
child: Stack(children: [
]),
),
],
),
),
],
),
),
],
),
),
const SizedBox(height: 8),
Container(
height: 91,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 156,
child: Text(
'Tommy Hilfiger slim fit semi formal shirt',
style: TextStyle(
color: Color(0xFF1F2937),
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w400,
height: 0.12,
),
),
),
const SizedBox(height: 8),
Container(
width: double.infinity,
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'\$62',
style: TextStyle(
color: Color(0xFF1F2937),
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w600,
height: 0.11,
letterSpacing: 0.07,
),
),
const SizedBox(width: 4),
Text(
'\$71.3',
style: TextStyle(
color: Color(0xFF9CA3AF),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w500,
height: 0.18,
),
),
const SizedBox(width: 4),
Text(
'15% OFF',
style: TextStyle(
color: Color(0xFFEA580C),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w500,
height: 0.18,
),
),
],
),
),
const SizedBox(height: 8),
Container(
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.all(2),
decoration: ShapeDecoration(
color: Color(0xFFF59E0B),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(2)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 12,
height: 12,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Container(
width: 12,
height: 12,
child: Stack(children: [
]),
),
),
],
),
),
],
),
),
const SizedBox(width: 4),
Text(
'4.0',
style: TextStyle(
color: Color(0xFF1F2937),
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w500,
height: 0.12,
),
),
const SizedBox(width: 4),
Text(
'(212)',
style: TextStyle(
color: Color(0xFF6B7280),
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w400,
height: 0.12,
),
),
],
),
),
],
),
),
],
),
),
),
Positioned(
left: 172,
top: 574,
child: Container(
width: 156,
height: 263,
decoration: BoxDecoration(color: Colors.white),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 164,
padding: const EdgeInsets.only(
top: 4,
left: 4,
right: 12,
bottom: 136,
),
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
image: DecorationImage(
image: NetworkImage("https://via.placeholder.com/156x164"),
fit: BoxFit.cover,
),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
decoration: ShapeDecoration(
color: Color(0xFF10B981),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(2)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'Trending',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w500,
height: 0.15,
),
),
],
),
),
const SizedBox(width: 65),
Container(
width: 24,
height: 24,
padding: const EdgeInsets.all(4),
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
color: Colors.white.withOpacity(0.6399999856948853),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50),
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 16,
height: 16,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 16,
height: 16,
child: Stack(children: [
]),
),
],
),
),
],
),
),
],
),
),
const SizedBox(height: 8),
Container(
height: 91,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 156,
child: Text(
'Arrow slim fit semi formal shirt',
style: TextStyle(
color: Color(0xFF1F2937),
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w400,
height: 0.12,
),
),
),
const SizedBox(height: 8),
Container(
width: double.infinity,
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'\$49',
style: TextStyle(
color: Color(0xFF1F2937),
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w600,
height: 0.11,
letterSpacing: 0.07,
),
),
const SizedBox(width: 4),
Text(
'53.9',
style: TextStyle(
color: Color(0xFF9CA3AF),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w500,
height: 0.18,
),
),
const SizedBox(width: 4),
Text(
'10% OFF',
style: TextStyle(
color: Color(0xFFEA580C),
fontSize: 10,
fontFamily: 'Inter',
fontWeight: FontWeight.w500,
height: 0.18,
),
),
],
),
),
const SizedBox(height: 8),
Container(
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.all(2),
decoration: ShapeDecoration(
color: Color(0xFFF59E0B),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(2)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 12,
height: 12,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Container(
width: 12,
height: 12,
child: Stack(children: [
]),
),
),
],
),
),
],
),
),
const SizedBox(width: 4),
Text(
'4.2',
style: TextStyle(
color: Color(0xFF1F2937),
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w500,
height: 0.12,
),
),
const SizedBox(width: 4),
Text(
'(312)',
style: TextStyle(
color: Color(0xFF6B7280),
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w400,
height: 0.12,
),
),
],
),
),
],
),
),
],
),
),
),
],
),
),
),
Positioned(
left: -1,
top: 708,
child: Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Color(0x0F4B5563),
blurRadius: 12,
offset: Offset(0, 0),
spreadRadius: 0,
)
],
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 181,
height: 64,
padding: const EdgeInsets.symmetric(horizontal: 67, vertical: 8),
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(color: Colors.white),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 24,
height: 24,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Container(
width: 24,
height: 24,
child: Stack(children: [
]),
),
),
],
),
),
const SizedBox(height: 4),
Text(
'Filter',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF1F2937),
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w400,
height: 0.11,
letterSpacing: 0.07,
),
),
],
),
),
Container(
width: 181,
height: 64,
padding: const EdgeInsets.symmetric(horizontal: 67, vertical: 8),
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(color: Colors.white),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 24,
height: 24,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Container(
width: 24,
height: 24,
child: Stack(children: [
]),
),
),
],
),
),
const SizedBox(height: 4),
Text(
'Sort By',
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF1F2937),
fontSize: 14,
fontFamily: 'Inter',
fontWeight: FontWeight.w400,
height: 0.11,
letterSpacing: 0.07,
),
),
],
),
),
],
),
),
),
Positioned(
left: 0,
top: 96,
child: Container(
width: 360,
padding: const EdgeInsets.symmetric(vertical: 8),
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(color: Color(0xFFF9FAFB)),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'15400 Items',
style: TextStyle(
color: Color(0xFF1F2937),
fontSize: 12,
fontFamily: 'Inter',
fontWeight: FontWeight.w500,
height: 0.12,
),
),
],
),
),
),
Positioned(
left: 0,
top: 772,
child: Container(
width: 360,
height: 28,
padding: const EdgeInsets.only(top: 18, bottom: 8),
decoration: BoxDecoration(color: Colors.white),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 72,
height: 2,
decoration: ShapeDecoration(
color: Color(0xFF1F2937),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
),
),
],
),
),
),
Positioned(
left: 0,
top: 0,
child: Container(
height: 96,
padding: const EdgeInsets.only(top: 32),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Color(0x0F4B5563),
blurRadius: 12,
offset: Offset(0, 6),
spreadRadius: 0,
)
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 360,
height: 64,
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 17),
decoration: BoxDecoration(color: Colors.white),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 328,
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Container(
height: 30,
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 24,
height: 24,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Container(
width: 24,
height: 24,
child: Stack(children: [
]),
),
),
],
),
),
const SizedBox(width: 16),
Expanded(
child: SizedBox(
child: Text(
'Men’s T-Shirt',
style: TextStyle(
color: Color(0xFF1F2937),
fontSize: 20,
fontFamily: 'Inter',
fontWeight: FontWeight.w500,
height: 0.07,
letterSpacing: 0.10,
),
),
),
),
],
),
),
),
const SizedBox(width: 16),
Container(
width: 64,
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 24,
height: 24,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Container(
width: 24,
height: 24,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 24,
height: 24,
child: Stack(children: [
]),
),
],
),
),
),
],
),
),
const SizedBox(width: 16),
Container(
width: 24,
height: 24,
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 24,
height: 24,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 24,
height: 24,
child: Stack(children: [
]),
),
],
),
),
],
),
),
],
),
),
],
),
),
],
),
),
],
),
),
),
Positioned(
left: 0,
top: 0,
child: Container(
width: 360,
height: 32,
child: Stack(
children: [
Positioned(
left: 0,
top: -0,
child: Container(
width: 360,
height: 32,
decoration: BoxDecoration(color: Colors.white),
),
),
Positioned(
left: 278,
top: 10,
child: Container(
width: 70,
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 18,
height: 12,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage("https://via.placeholder.com/18x12"),
fit: BoxFit.fill,
),
),
),
const SizedBox(width: 6),
Container(
width: 16,
height: 12,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage("https://via.placeholder.com/16x12"),
fit: BoxFit.fill,
),
),
),
const SizedBox(width: 6),
Container(
width: 24,
height: 12,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Opacity(
opacity: 0.40,
child: Container(
width: 24,
height: 12,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage("https://via.placeholder.com/24x12"),
fit: BoxFit.fill,
),
),
),
),
),
Positioned(
left: 1.97,
top: 2.12,
child: Container(
width: 17.76,
height: 7.76,
decoration: ShapeDecoration(
color: Color(0xFF1F2937),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(1.33),
),
),
),
),
],
),
),
],
),
),
),
Positioned(
left: 12,
top: 8,
child: Text(
'12:30',
style: TextStyle(
color: Color(0xFF1F2937),
fontSize: 14,
fontFamily: 'Roboto',
fontWeight: FontWeight.w500,
height: 0,
letterSpacing: 0.01,
),
),
),
],
),
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment