diff --git a/lib/domain/models/card.dart b/lib/domain/models/card.dart index e69de29..9a6f4c6 100644 --- a/lib/domain/models/card.dart +++ b/lib/domain/models/card.dart @@ -0,0 +1,14 @@ +class CardData { + + final String word; + final String translation; + final String image; + final int mark; + + const CardData({ + required this.word, + required this.translation, + required this.image, + this.mark = 0, + }); +} \ No newline at end of file diff --git a/lib/presentation/details_page/details_page.dart b/lib/presentation/details_page/details_page.dart new file mode 100644 index 0000000..22efe21 --- /dev/null +++ b/lib/presentation/details_page/details_page.dart @@ -0,0 +1,38 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +import '../../domain/models/card.dart'; +import '../../presentation/home_page/home_page.dart'; + +class DetailPage extends StatelessWidget { + final CardData data; + + const DetailPage(this.data, {super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar(), + body: 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.word, + style: Theme + .of(context) + .textTheme + .headlineLarge,)), + + Text(data.translation, + style: Theme + .of(context) + .textTheme + .bodyLarge,) + ], + ) + ); + } +} diff --git a/lib/presentation/home_page/card.dart b/lib/presentation/home_page/card.dart index 018a8ad..c132b93 100644 --- a/lib/presentation/home_page/card.dart +++ b/lib/presentation/home_page/card.dart @@ -8,6 +8,7 @@ class _Card extends StatefulWidget { final String image; final int mark; final OnKnowCallBack onKnow; + final VoidCallback? onTap; const _Card({ required this.word, @@ -15,13 +16,15 @@ class _Card extends StatefulWidget { required this.image, this.mark = 0, this.onKnow, + this.onTap, }); factory _Card.fromData( - _Card data, { + CardData data, { OnKnowCallBack? onKnow, + VoidCallback? onTap, }) => - _Card(word: data.word, translation: data.translation, image: data.image, mark: data.mark, onKnow: onKnow); + _Card(word: data.word, translation: data.translation, image: data.image, mark: data.mark, onKnow: onKnow, onTap: onTap,); @override State<_Card> createState() => _CardState(); diff --git a/lib/presentation/home_page/home_page.dart b/lib/presentation/home_page/home_page.dart index 72eb21f..e5e60f9 100644 --- a/lib/presentation/home_page/home_page.dart +++ b/lib/presentation/home_page/home_page.dart @@ -1,5 +1,9 @@ +import 'package:card_app/domain/models/card.dart'; +import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; +import '../details_page/details_page.dart'; + part 'card.dart'; class MyHomePage extends StatefulWidget { @@ -28,21 +32,21 @@ class Body extends StatelessWidget { @override Widget build(BuildContext context) { - final List<_Card> words = [ - _Card( + final List words = [ + CardData( word: 'Hello', translation: 'Привет', image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS69a8OWnRueQNykBpuyfbGxl3gt5ct46NOHg&s', mark: 5, ), - _Card( + CardData( word: 'Book', translation: 'Книга', image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSfbH7Ckkbzrr3KZlb144GTaAmJnz87U9opGw&s', mark: 3), - _Card( + CardData( word: 'Cat', translation: 'Кот', image: @@ -55,15 +59,21 @@ class Body extends StatelessWidget { children: words .map((e) => _Card.fromData( e, - onKnow: (title, isKnow) { - _showSnackBar(context, title, isKnow); - }, + onKnow: (title, isKnow) => + _showSnackBar(context, title, isKnow), + onTap: () => _navToDetails(context, e), )).toList(), ), ), ); } + void _navToDetails(BuildContext context, CardData data){ + Navigator.push( + context, + CupertinoPageRoute(builder: (context) => DetailPage((data))), + ); + } void _showSnackBar(BuildContext context, String title, bool isKnow){ WidgetsBinding.instance.addPostFrameCallback((_){ @@ -83,78 +93,81 @@ class _CardState extends State<_Card> { @override Widget build(BuildContext context) { - return Container( - constraints: const BoxConstraints(minHeight: 140, maxWidth: 240), - padding: const EdgeInsets.all(20), - margin: const EdgeInsets.all(10), - decoration: BoxDecoration( - color: Colors.black12, - borderRadius: BorderRadius.circular(10), - ), - child: Stack( - children: [ - Column( - children: [ - Column( - children: [ - Image.network(widget.image, width: 300), - Text( - widget.word, - style: Theme.of(context).textTheme.headlineLarge, - ), - Text( - widget.translation, - style: Theme.of(context).textTheme.bodyMedium, - ), - ], - ), - Align( - alignment: Alignment.bottomRight, - child: Padding( - padding: const EdgeInsets.only(left: 8.0), - child: GestureDetector( - onTap: () { - setState(() { - isKnow = !isKnow; - }); - widget.onKnow?.call(widget.word, isKnow); - }, - child: AnimatedSwitcher( - duration: const Duration(milliseconds: 200), - child: isKnow - ? const Icon(Icons.check_circle, - color: Colors.green, key: ValueKey(0)) - : const Icon(Icons.check_circle_outline, - key: ValueKey(1)), + return GestureDetector( + onTap: widget.onTap, + child: Container( + constraints: const BoxConstraints(minHeight: 140, maxWidth: 240), + padding: const EdgeInsets.all(20), + margin: const EdgeInsets.all(10), + decoration: BoxDecoration( + color: Colors.black12, + borderRadius: BorderRadius.circular(10), + ), + child: Stack( + children: [ + Column( + children: [ + Column( + children: [ + Image.network(widget.image, width: 300), + Text( + widget.word, + style: Theme.of(context).textTheme.headlineLarge, + ), + Text( + widget.translation, + style: Theme.of(context).textTheme.bodyMedium, + ), + ], + ), + Align( + alignment: Alignment.bottomRight, + child: Padding( + padding: const EdgeInsets.only(left: 8.0), + child: GestureDetector( + onTap: () { + setState(() { + isKnow = !isKnow; + }); + widget.onKnow?.call(widget.word, isKnow); + }, + child: AnimatedSwitcher( + duration: const Duration(milliseconds: 200), + child: isKnow + ? const Icon(Icons.check_circle, + color: Colors.green, key: ValueKey(0)) + : const Icon(Icons.check_circle_outline, + key: ValueKey(1)), + ), ), ), ), - ), - ], - ), - Align( - alignment: Alignment.center, - child: Row(children: [ - Container( - child: Container( - width: widget.mark * 10, - decoration: const BoxDecoration( - color: Colors.greenAccent, + ], + ), + Align( + alignment: Alignment.center, + child: Row(children: [ + Container( + child: Container( + width: widget.mark * 10, + decoration: const BoxDecoration( + color: Colors.greenAccent, + ), + padding: const EdgeInsets.fromLTRB(8, 2, 8, 2), ), - padding: const EdgeInsets.fromLTRB(8, 2, 8, 2), ), - ), - Expanded( - child: Container( - decoration: const BoxDecoration( - color: Colors.red, + Expanded( + child: Container( + decoration: const BoxDecoration( + color: Colors.red, + ), + padding: const EdgeInsets.fromLTRB(8, 2, 8, 2), ), - padding: const EdgeInsets.fromLTRB(8, 2, 8, 2), - ), - ) - ]), - ) - ], - )); + ) + ]), + ) + ], + )), + ); } }