3 доне

This commit is contained in:
ValAnn 2024-10-23 14:55:48 +04:00
parent a4e6e9dcf9
commit 30c63e20ab
4 changed files with 144 additions and 76 deletions

View File

@ -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,
});
}

View File

@ -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,)
],
)
);
}
}

View File

@ -8,6 +8,7 @@ class _Card extends StatefulWidget {
final String image; final String image;
final int mark; final int mark;
final OnKnowCallBack onKnow; final OnKnowCallBack onKnow;
final VoidCallback? onTap;
const _Card({ const _Card({
required this.word, required this.word,
@ -15,13 +16,15 @@ class _Card extends StatefulWidget {
required this.image, required this.image,
this.mark = 0, this.mark = 0,
this.onKnow, this.onKnow,
this.onTap,
}); });
factory _Card.fromData( factory _Card.fromData(
_Card data, { CardData data, {
OnKnowCallBack? onKnow, 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 @override
State<_Card> createState() => _CardState(); State<_Card> createState() => _CardState();

View File

@ -1,5 +1,9 @@
import 'package:card_app/domain/models/card.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import '../details_page/details_page.dart';
part 'card.dart'; part 'card.dart';
class MyHomePage extends StatefulWidget { class MyHomePage extends StatefulWidget {
@ -28,21 +32,21 @@ class Body extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final List<_Card> words = [ final List<CardData> words = [
_Card( CardData(
word: 'Hello', word: 'Hello',
translation: 'Привет', translation: 'Привет',
image: image:
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS69a8OWnRueQNykBpuyfbGxl3gt5ct46NOHg&s', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS69a8OWnRueQNykBpuyfbGxl3gt5ct46NOHg&s',
mark: 5, mark: 5,
), ),
_Card( CardData(
word: 'Book', word: 'Book',
translation: 'Книга', translation: 'Книга',
image: image:
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSfbH7Ckkbzrr3KZlb144GTaAmJnz87U9opGw&s', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSfbH7Ckkbzrr3KZlb144GTaAmJnz87U9opGw&s',
mark: 3), mark: 3),
_Card( CardData(
word: 'Cat', word: 'Cat',
translation: 'Кот', translation: 'Кот',
image: image:
@ -55,15 +59,21 @@ class Body extends StatelessWidget {
children: words children: words
.map((e) => _Card.fromData( .map((e) => _Card.fromData(
e, e,
onKnow: (title, isKnow) { onKnow: (title, isKnow) =>
_showSnackBar(context, title, isKnow); _showSnackBar(context, title, isKnow),
}, onTap: () => _navToDetails(context, e),
)).toList(), )).toList(),
), ),
), ),
); );
} }
void _navToDetails(BuildContext context, CardData data){
Navigator.push(
context,
CupertinoPageRoute(builder: (context) => DetailPage((data))),
);
}
void _showSnackBar(BuildContext context, String title, bool isKnow){ void _showSnackBar(BuildContext context, String title, bool isKnow){
WidgetsBinding.instance.addPostFrameCallback((_){ WidgetsBinding.instance.addPostFrameCallback((_){
@ -83,78 +93,81 @@ class _CardState extends State<_Card> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return GestureDetector(
constraints: const BoxConstraints(minHeight: 140, maxWidth: 240), onTap: widget.onTap,
padding: const EdgeInsets.all(20), child: Container(
margin: const EdgeInsets.all(10), constraints: const BoxConstraints(minHeight: 140, maxWidth: 240),
decoration: BoxDecoration( padding: const EdgeInsets.all(20),
color: Colors.black12, margin: const EdgeInsets.all(10),
borderRadius: BorderRadius.circular(10), decoration: BoxDecoration(
), color: Colors.black12,
child: Stack( borderRadius: BorderRadius.circular(10),
children: [ ),
Column( child: Stack(
children: [ children: [
Column( Column(
children: [ children: [
Image.network(widget.image, width: 300), Column(
Text( children: [
widget.word, Image.network(widget.image, width: 300),
style: Theme.of(context).textTheme.headlineLarge, Text(
), widget.word,
Text( style: Theme.of(context).textTheme.headlineLarge,
widget.translation, ),
style: Theme.of(context).textTheme.bodyMedium, Text(
), widget.translation,
], style: Theme.of(context).textTheme.bodyMedium,
), ),
Align( ],
alignment: Alignment.bottomRight, ),
child: Padding( Align(
padding: const EdgeInsets.only(left: 8.0), alignment: Alignment.bottomRight,
child: GestureDetector( child: Padding(
onTap: () { padding: const EdgeInsets.only(left: 8.0),
setState(() { child: GestureDetector(
isKnow = !isKnow; onTap: () {
}); setState(() {
widget.onKnow?.call(widget.word, isKnow); isKnow = !isKnow;
}, });
child: AnimatedSwitcher( widget.onKnow?.call(widget.word, isKnow);
duration: const Duration(milliseconds: 200), },
child: isKnow child: AnimatedSwitcher(
? const Icon(Icons.check_circle, duration: const Duration(milliseconds: 200),
color: Colors.green, key: ValueKey(0)) child: isKnow
: const Icon(Icons.check_circle_outline, ? const Icon(Icons.check_circle,
key: ValueKey(1)), color: Colors.green, key: ValueKey(0))
: const Icon(Icons.check_circle_outline,
key: ValueKey(1)),
),
), ),
), ),
), ),
), ],
], ),
), Align(
Align( alignment: Alignment.center,
alignment: Alignment.center, child: Row(children: [
child: Row(children: [ Container(
Container( child: Container(
child: Container( width: widget.mark * 10,
width: widget.mark * 10, decoration: const BoxDecoration(
decoration: const BoxDecoration( color: Colors.greenAccent,
color: Colors.greenAccent, ),
padding: const EdgeInsets.fromLTRB(8, 2, 8, 2),
), ),
padding: const EdgeInsets.fromLTRB(8, 2, 8, 2),
), ),
), Expanded(
Expanded( child: Container(
child: Container( decoration: const BoxDecoration(
decoration: const BoxDecoration( color: Colors.red,
color: Colors.red, ),
padding: const EdgeInsets.fromLTRB(8, 2, 8, 2),
), ),
padding: const EdgeInsets.fromLTRB(8, 2, 8, 2), )
), ]),
) )
]), ],
) )),
], );
));
} }
} }