Skip to content

Instantly share code, notes, and snippets.

@minhcasi
Created January 8, 2024 08:30
Show Gist options
  • Save minhcasi/e2ba022c7b39e080cf041d83b1b09a93 to your computer and use it in GitHub Desktop.
Save minhcasi/e2ba022c7b39e080cf041d83b1b09a93 to your computer and use it in GitHub Desktop.
Generated code from pixels2flutter.dev
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
useMaterial3: true,
primarySwatch: Colors.blue,
),
home: ProductListScreen(),
);
}
}
class ProductListScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Women bags'),
actions: [
IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
],
),
body: 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 ProductItem();
},
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite),
label: 'Favorites',
),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_bag),
label: 'Bag',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Account',
),
],
),
);
}
}
class ProductItem extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ProductDetailScreen()),
);
},
child: Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Image.network(
'https://corsproxy.io/?https%3A%2F%2Foaidalleapiprodscus.blob.core.windows.net%2Fprivate%2Forg-pzogUi5ZNwmkZMweaET3pXP9%2Fuser-HX6FQDngq9edLHwNvxFIGm5h%2Fimg-kJyDf4DYNgJE825iVpkaIvT4.png%3Fst%3D2024-01-08T07%253A30%253A11Z%26se%3D2024-01-08T09%253A30%253A11Z%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%3D2024-01-08T05%253A18%253A22Z%26ske%3D2024-01-09T05%253A18%253A22Z%26sks%3Db%26skv%3D2021-08-06%26sig%3DVkxHvr7CESQPbthqyg1rmP4LobN51MoTCdyCH8bg7xg%253D',
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Mini Leather Olympia Bag',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
'\$80',
style: TextStyle(color: Colors.grey),
),
],
),
),
],
),
),
);
}
}
class ProductDetailScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Mini Leather...'),
actions: [
IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
],
),
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Image.network(
'https://corsproxy.io/?https%3A%2F%2Foaidalleapiprodscus.blob.core.windows.net%2Fprivate%2Forg-pzogUi5ZNwmkZMweaET3pXP9%2Fuser-HX6FQDngq9edLHwNvxFIGm5h%2Fimg-QY7xhFf86GGSmOcpfD9IYtiH.png%3Fst%3D2024-01-08T07%253A30%253A11Z%26se%3D2024-01-08T09%253A30%253A11Z%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%3D2024-01-08T00%253A08%253A56Z%26ske%3D2024-01-09T00%253A08%253A56Z%26sks%3Db%26skv%3D2021-08-06%26sig%3DRzNmXPGgsFqHKXik96UpytrPh1%2FPgxl4xylE3MKur6g%253D',
fit: BoxFit.cover,
width: double.infinity,
height: 400,
),
Padding(
padding: EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Mini Leather Olympia Bag',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24.0,
),
),
Text(
'\$80',
style: TextStyle(
color: Colors.grey,
fontSize: 20.0,
),
),
SizedBox(height: 16.0),
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.',
style: TextStyle(fontSize: 16.0),
),
SizedBox(height: 16.0),
Text(
'Color:',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
Row(
children: List.generate(4, (index) => CircleAvatar()),
),
SizedBox(height: 24.0),
Center(
child: ElevatedButton(
onPressed: () {},
child: Text('Add to Cart'),
style: ElevatedButton.styleFrom(
minimumSize: Size(double.infinity, 50),
),
),
),
],
),
),
],
),
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment