diff --git a/lib/main.dart b/lib/main.dart index 317c64e..97b272d 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -15,7 +15,7 @@ class MyApp extends StatelessWidget { colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), useMaterial3: true, ), - home: const MyHomePage(title: 'My first app with flutter'), + home: const MyHomePage(title: 'Магизин у дома'), ); } } @@ -30,86 +30,240 @@ class MyHomePage extends StatefulWidget { } class _MyHomePageState extends State<MyHomePage> { - int _counter = 0; - int _time = 0; - - void _incrementCounter() { - setState(() { - _counter++; - }); - } - - void _startTime() { - setState(() { - _time = 0; - }); - for (int i = 0; i < 20001; i++) { - Future.delayed(Duration(milliseconds: i), () { - if (_time == 20000) { - _showFullScreenImage(); - } else { - setState(() { - _time = i; - }); - } - }); - } - } - - void _showFullScreenImage() { - showDialog( - context: context, - barrierDismissible: false, - builder: (BuildContext context) { - return Dialog( - backgroundColor: Colors.transparent, - insetPadding: EdgeInsets.zero, - child: GestureDetector( - onTap: () { - Navigator.of(context).pop(); - }, - child: SizedBox.expand( - child: Image.asset('assets/pict.png', fit: BoxFit.cover), - ), - ), - ); - }, - ); - } + final Color _color = Color(0xFF9878D7); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( - backgroundColor: Theme.of(context).colorScheme.inversePrimary, + backgroundColor: _color, title: Text(widget.title), ), - body: Center( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: <Widget>[ - const SizedBox(height: 20), - const Text( - 'Timer value:', - ), - Text( - '$_time', - style: Theme.of(context).textTheme.headlineMedium, - ), - ], + 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(), ), ), - floatingActionButton: Row( - mainAxisAlignment: MainAxisAlignment.end, + ); + } +} + +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: [ - const SizedBox(width: 10), - FloatingActionButton( - onPressed: _startTime, - tooltip: 'Start Timer', - child: const Icon(Icons.timer), + 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)) + ], + )); + } +}