3 доне
This commit is contained in:
parent
a4e6e9dcf9
commit
30c63e20ab
@ -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,
|
||||||
|
});
|
||||||
|
}
|
38
lib/presentation/details_page/details_page.dart
Normal file
38
lib/presentation/details_page/details_page.dart
Normal 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,)
|
||||||
|
],
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
@ -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();
|
||||||
|
@ -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),
|
)
|
||||||
),
|
]),
|
||||||
)
|
)
|
||||||
]),
|
],
|
||||||
)
|
)),
|
||||||
],
|
);
|
||||||
));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user