сделанная 4
This commit is contained in:
parent
c53172c99e
commit
279537d301
10
lib/domain/models/card.dart
Normal file
10
lib/domain/models/card.dart
Normal file
@ -0,0 +1,10 @@
|
||||
class MarketData {
|
||||
final String price;
|
||||
final String name;
|
||||
final String? discount;
|
||||
final String size;
|
||||
final String? image;
|
||||
|
||||
MarketData(this.price, this.name, this.discount, this.size,
|
||||
{required this.image});
|
||||
}
|
251
lib/main.dart
251
lib/main.dart
@ -1,4 +1,5 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:pmu/presentation/home_page/home_page.dart';
|
||||
|
||||
void main() {
|
||||
runApp(const MyApp());
|
||||
@ -12,258 +13,10 @@ class MyApp extends StatelessWidget {
|
||||
return MaterialApp(
|
||||
title: 'Flutter Demo',
|
||||
theme: ThemeData(
|
||||
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
|
||||
colorScheme: ColorScheme.fromSeed(seedColor: Color(0xFFFFA400)),
|
||||
useMaterial3: true,
|
||||
),
|
||||
home: const MyHomePage(title: 'Магизин у дома'),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class MyHomePage extends StatefulWidget {
|
||||
const MyHomePage({super.key, required this.title});
|
||||
|
||||
final String title;
|
||||
|
||||
@override
|
||||
State<MyHomePage> createState() => _MyHomePageState();
|
||||
}
|
||||
|
||||
class _MyHomePageState extends State<MyHomePage> {
|
||||
final Color _color = Color(0xFF9878D7);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
backgroundColor: _color,
|
||||
title: Text(widget.title),
|
||||
),
|
||||
body: const MyWidget(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _CardDate {
|
||||
final String text;
|
||||
final String description;
|
||||
final IconData icon;
|
||||
final String? image;
|
||||
|
||||
_CardDate(this.text,
|
||||
{required this.description,
|
||||
this.icon = Icons.ac_unit_outlined,
|
||||
this.image});
|
||||
}
|
||||
|
||||
class MyWidget extends StatelessWidget {
|
||||
const MyWidget({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final data = [
|
||||
_CardDate(
|
||||
'First',
|
||||
description: "This first card",
|
||||
icon: Icons.ice_skating,
|
||||
image:
|
||||
'https://i.pinimg.com/originals/6a/11/e7/6a11e75396a475e69ccf36eb53459645.png',
|
||||
),
|
||||
_CardDate(
|
||||
'Second',
|
||||
description: "This second card",
|
||||
icon: Icons.ac_unit_rounded,
|
||||
image:
|
||||
'https://mir-s3-cdn-cf.behance.net/project_modules/2800_opt_1/56da13103680399.5f5288873fac6.png',
|
||||
),
|
||||
_CardDate(
|
||||
'Third',
|
||||
description: "This third card",
|
||||
icon: Icons.abc_sharp,
|
||||
image:
|
||||
'https://avatars.mds.yandex.net/i?id=200973d41be50944574dc1ef6f59aec5acd569de-7549266-images-thumbs&n=13',
|
||||
),
|
||||
];
|
||||
|
||||
final markerDate = [
|
||||
_MarketData('100₽', "Банан", '80₽ ', '100 г',
|
||||
image:
|
||||
'https://main-cdn.sbermegamarket.ru/big1/hlr-system/428/425/752/325/184/4/100028179877b0.jpg'),
|
||||
_MarketData('180₽', "Мандарины", '160₽ ', '100 г',
|
||||
image:
|
||||
'https://main-cdn.sbermegamarket.ru/big2/hlr-system/105/621/149/532/518/46/100028180607b0.jpg'),
|
||||
_MarketData('140₽', "Сыр", '120₽ ', '100 г',
|
||||
image:
|
||||
'https://main-cdn.sbermegamarket.ru/big2/hlr-system/-21/355/242/874/191/753/100026606392b0.jpg'),
|
||||
_MarketData('188₽', "Крабовые палочки Aro", '159₽ ', '500 г',
|
||||
image:
|
||||
'https://main-cdn.sbermegamarket.ru/big2/hlr-system/208/792/956/332/518/55/100028195753b0.jpg'),
|
||||
_MarketData('100₽', "Черноголовка Кола", '99₽ ', '2 л',
|
||||
image:
|
||||
'https://main-cdn.sbermegamarket.ru/big2/hlr-system/822/548/713/816/182/3/100032947636b0.jpg'),
|
||||
];
|
||||
|
||||
return Center(
|
||||
child: SingleChildScrollView(
|
||||
child: Wrap(
|
||||
children: markerDate
|
||||
.map((x) => SizedBox(
|
||||
width: MediaQuery.of(context).size.width / 2 - 16,
|
||||
child: _MarketCard.formDate(x),
|
||||
))
|
||||
.toList(),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _MarketData {
|
||||
final String price;
|
||||
final String name;
|
||||
final String? discount;
|
||||
final String size;
|
||||
final String? image;
|
||||
|
||||
_MarketData(this.price, this.name, this.discount, this.size,
|
||||
{required this.image});
|
||||
}
|
||||
|
||||
class _MarketCard extends StatelessWidget {
|
||||
final String price;
|
||||
final String name;
|
||||
final String? discount;
|
||||
final String size;
|
||||
final String? image;
|
||||
|
||||
const _MarketCard(this.price, this.name, this.discount, this.size,
|
||||
{required this.image});
|
||||
|
||||
factory _MarketCard.formDate(_MarketData date) =>
|
||||
_MarketCard(date.price, date.name, date.discount, date.size,
|
||||
image: date.image);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(10),
|
||||
margin: const EdgeInsets.all(4),
|
||||
decoration: BoxDecoration(
|
||||
color: Color(0xFFE5E4E2),
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
child: SizedBox(
|
||||
child: Image.network(
|
||||
image ?? '',
|
||||
fit: BoxFit.fill,
|
||||
errorBuilder: (_, __, ___) => const Placeholder(),
|
||||
),
|
||||
),
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
Text(
|
||||
discount ?? '',
|
||||
style: TextStyle(fontSize: 26, color: Color(0xFFF1571E)),
|
||||
),
|
||||
Text(
|
||||
price,
|
||||
style: TextStyle(
|
||||
fontSize: 16, decoration: TextDecoration.lineThrough),
|
||||
),
|
||||
],
|
||||
),
|
||||
Text(
|
||||
name,
|
||||
style: TextStyle(fontSize: 20),
|
||||
),
|
||||
Text(
|
||||
size,
|
||||
style: TextStyle(fontSize: 18),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _Card extends StatelessWidget {
|
||||
final String text;
|
||||
final IconData icon;
|
||||
final String description;
|
||||
final String? image;
|
||||
|
||||
const _Card(this.text,
|
||||
{this.icon = Icons.earbuds_outlined,
|
||||
required this.description,
|
||||
this.image});
|
||||
|
||||
factory _Card.formDate(_CardDate date) => _Card(
|
||||
date.text,
|
||||
description: date.description,
|
||||
icon: date.icon,
|
||||
image: date.image,
|
||||
);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
margin: const EdgeInsets.only(top: 16, left: 10, right: 10),
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white54,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
border: Border.all(
|
||||
color: Colors.white70,
|
||||
width: 2,
|
||||
),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.grey.withOpacity(0.5),
|
||||
spreadRadius: 4,
|
||||
offset: const Offset(0, 5),
|
||||
blurRadius: 8,
|
||||
)
|
||||
],
|
||||
),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(15),
|
||||
child: SizedBox(
|
||||
height: 100,
|
||||
width: 100,
|
||||
child: Image.network(
|
||||
image ?? '',
|
||||
fit: BoxFit.fill,
|
||||
errorBuilder: (_, __, ___) => const Placeholder(),
|
||||
),
|
||||
),
|
||||
),
|
||||
Flexible(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: Column(children: [
|
||||
Text(
|
||||
text,
|
||||
style: Theme.of(context).textTheme.headlineLarge,
|
||||
),
|
||||
Text(
|
||||
description,
|
||||
),
|
||||
]),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 8.0), child: Icon(icon))
|
||||
],
|
||||
));
|
||||
}
|
||||
}
|
||||
|
48
lib/presentation/details_page/details_page.dart
Normal file
48
lib/presentation/details_page/details_page.dart
Normal file
@ -0,0 +1,48 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:pmu/domain/models/card.dart';
|
||||
|
||||
class DetailsPage extends StatelessWidget {
|
||||
final MarketData data;
|
||||
|
||||
const DetailsPage(this.data, {super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
backgroundColor: Color(0xFFFFA400),
|
||||
),
|
||||
body: SingleChildScrollView(
|
||||
child: Container(
|
||||
constraints: BoxConstraints(
|
||||
minHeight: MediaQuery.sizeOf(context).height - 105),
|
||||
decoration: const BoxDecoration(
|
||||
color: Color(0xFFFFA400),
|
||||
),
|
||||
padding: const EdgeInsets.all(10),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(bottom: 16.0),
|
||||
child: Image.network(data.image ?? ''),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(bottom: 4.0),
|
||||
child: Text(
|
||||
data.name,
|
||||
style: Theme.of(context).textTheme.headlineLarge,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
data.size,
|
||||
style: Theme.of(context).textTheme.bodyLarge,
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
144
lib/presentation/home_page/card.dart
Normal file
144
lib/presentation/home_page/card.dart
Normal file
@ -0,0 +1,144 @@
|
||||
part of "home_page.dart";
|
||||
|
||||
typedef OnLikeCallback = void Function(String title, bool isLiked)?;
|
||||
|
||||
class _MarketCard extends StatefulWidget {
|
||||
final String price;
|
||||
final String name;
|
||||
final String? discount;
|
||||
final String size;
|
||||
final String? image;
|
||||
final OnLikeCallback onLike;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
const _MarketCard(this.price, this.name, this.discount, this.size,
|
||||
{required this.image, this.onLike, this.onTap});
|
||||
|
||||
factory _MarketCard.formDate(MarketData date,
|
||||
{OnLikeCallback? onLike, VoidCallback? onTap}) =>
|
||||
_MarketCard(date.price, date.name, date.discount, date.size,
|
||||
image: date.image, onLike: onLike, onTap: onTap);
|
||||
|
||||
@override
|
||||
State<_MarketCard> createState() => _MarketCardState();
|
||||
}
|
||||
|
||||
class _MarketCardState extends State<_MarketCard> {
|
||||
bool isLiked = false;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GestureDetector(
|
||||
onTap: widget.onTap,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(10),
|
||||
margin: const EdgeInsets.all(4),
|
||||
constraints: const BoxConstraints(minHeight: 140),
|
||||
decoration: BoxDecoration(
|
||||
color: Color(0xFFE5E4E2),
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
),
|
||||
child: IntrinsicHeight(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
child: SizedBox(
|
||||
width: double.infinity,
|
||||
height: 160,
|
||||
child: Stack(
|
||||
children: [
|
||||
Positioned.fill(
|
||||
child: Image.network(
|
||||
widget.image ?? '',
|
||||
fit: BoxFit.cover,
|
||||
errorBuilder: (_, __, ___) => const Placeholder(),
|
||||
),
|
||||
),
|
||||
Align(
|
||||
alignment: Alignment.bottomRight,
|
||||
child: Container(
|
||||
decoration: const BoxDecoration(
|
||||
color: Color(0xFFffef42),
|
||||
borderRadius: BorderRadius.only(
|
||||
topLeft: Radius.circular(20),
|
||||
)),
|
||||
padding: const EdgeInsets.fromLTRB(8, 2, 8, 2),
|
||||
child: Text(
|
||||
"новинка",
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.bodyMedium
|
||||
?.copyWith(color: Colors.black),
|
||||
),
|
||||
),
|
||||
)
|
||||
],
|
||||
)),
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
top: 6,
|
||||
),
|
||||
child: Text(
|
||||
widget.discount ?? '',
|
||||
style:
|
||||
TextStyle(fontSize: 26, color: Color(0xFFF1571E)),
|
||||
),
|
||||
),
|
||||
Text(
|
||||
widget.price,
|
||||
style: TextStyle(
|
||||
fontSize: 16, decoration: TextDecoration.lineThrough),
|
||||
),
|
||||
],
|
||||
),
|
||||
Text(
|
||||
widget.name,
|
||||
style: TextStyle(fontSize: 20),
|
||||
),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
widget.size,
|
||||
style: TextStyle(fontSize: 18),
|
||||
),
|
||||
const Spacer(),
|
||||
Align(
|
||||
alignment: Alignment.bottomRight,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(left: 8.0),
|
||||
child: GestureDetector(
|
||||
onTap: () {
|
||||
setState(() {
|
||||
isLiked = !isLiked;
|
||||
});
|
||||
widget.onLike?.call(widget.name, isLiked);
|
||||
},
|
||||
child: AnimatedSwitcher(
|
||||
duration: const Duration(milliseconds: 100),
|
||||
child: isLiked
|
||||
? const Icon(
|
||||
Icons.favorite,
|
||||
color: Colors.redAccent,
|
||||
key: ValueKey<int>(0),
|
||||
)
|
||||
: const Icon(
|
||||
Icons.favorite,
|
||||
color: Colors.grey,
|
||||
key: ValueKey<int>(1),
|
||||
)),
|
||||
)),
|
||||
)
|
||||
],
|
||||
)
|
||||
],
|
||||
),
|
||||
)),
|
||||
);
|
||||
}
|
||||
}
|
93
lib/presentation/home_page/home_page.dart
Normal file
93
lib/presentation/home_page/home_page.dart
Normal file
@ -0,0 +1,93 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:pmu/domain/models/card.dart';
|
||||
import 'package:pmu/presentation/details_page/details_page.dart';
|
||||
|
||||
part 'card.dart';
|
||||
|
||||
class MyHomePage extends StatefulWidget {
|
||||
const MyHomePage({super.key, required this.title});
|
||||
|
||||
final String title;
|
||||
|
||||
@override
|
||||
State<MyHomePage> createState() => _MyHomePageState();
|
||||
}
|
||||
|
||||
class _MyHomePageState extends State<MyHomePage> {
|
||||
final Color _color = Color(0xFFFFA400);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
backgroundColor: _color,
|
||||
title: Text(widget.title),
|
||||
),
|
||||
body: const Body(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Body extends StatelessWidget {
|
||||
const Body({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final markerDate = [
|
||||
MarketData('100₽', "Банан", '80₽ ', '100 г',
|
||||
image:
|
||||
'https://main-cdn.sbermegamarket.ru/big1/hlr-system/428/425/752/325/184/4/100028179877b0.jpg'),
|
||||
MarketData('180₽', "Мандарины", '160₽ ', '100 г',
|
||||
image:
|
||||
'https://main-cdn.sbermegamarket.ru/big2/hlr-system/105/621/149/532/518/46/100028180607b0.jpg'),
|
||||
MarketData('140₽', "Сыр", '120₽ ', '100 г',
|
||||
image:
|
||||
'https://main-cdn.sbermegamarket.ru/big2/hlr-system/-21/355/242/874/191/753/100026606392b0.jpg'),
|
||||
MarketData('188₽', "Крабовые палочки Aro", '159₽ ', '500 г',
|
||||
image:
|
||||
'https://main-cdn.sbermegamarket.ru/big2/hlr-system/208/792/956/332/518/55/100028195753b0.jpg'),
|
||||
MarketData('100₽', "Черноголовка Кола", '99₽ ', '2 л',
|
||||
image:
|
||||
'https://main-cdn.sbermegamarket.ru/big2/hlr-system/822/548/713/816/182/3/100032947636b0.jpg'),
|
||||
];
|
||||
|
||||
return Center(
|
||||
child: SingleChildScrollView(
|
||||
child: Wrap(
|
||||
children: markerDate
|
||||
.map((x) => SizedBox(
|
||||
width: MediaQuery.of(context).size.width / 2 - 16,
|
||||
child: _MarketCard.formDate(
|
||||
x,
|
||||
onLike: (title, isLiked) =>
|
||||
_showSnackBar(context, title, isLiked),
|
||||
onTap: () => _navToDetails(context, x),
|
||||
),
|
||||
))
|
||||
.toList(),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _showSnackBar(BuildContext context, String title, bool isLiked) {
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
|
||||
content: Text(
|
||||
'Товар $title ${isLiked ? 'добавлен в избранное' : 'удален из избранного'}',
|
||||
style: Theme.of(context).textTheme.bodyLarge,
|
||||
),
|
||||
backgroundColor: Colors.orangeAccent,
|
||||
duration: const Duration(seconds: 1),
|
||||
));
|
||||
});
|
||||
}
|
||||
|
||||
void _navToDetails(BuildContext context, MarketData data) {
|
||||
Navigator.push(
|
||||
context,
|
||||
CupertinoPageRoute(builder: (context) => DetailsPage(data)),
|
||||
);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user