forked from firka/firka
fix: countdown widget design
This commit is contained in:
@@ -2,6 +2,8 @@ import 'package:firka/ui/components/firka_card.dart';
|
|||||||
import 'package:firka/l10n/app_localizations.dart';
|
import 'package:firka/l10n/app_localizations.dart';
|
||||||
import 'package:firka/ui/theme/style.dart';
|
import 'package:firka/ui/theme/style.dart';
|
||||||
import 'package:firka/ui/shared/counter_digit.dart';
|
import 'package:firka/ui/shared/counter_digit.dart';
|
||||||
|
import 'package:firka_common/firka_common.dart';
|
||||||
|
import 'package:firka_common/ui/components/filled_circle.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
import 'package:kreta_api/kreta_api.dart';
|
import 'package:kreta_api/kreta_api.dart';
|
||||||
@@ -24,89 +26,72 @@ class StartingSoonWidget extends StatelessWidget {
|
|||||||
var minTxt = hour == 1 ? l10n.starting_min : l10n.starting_min_plural;
|
var minTxt = hour == 1 ? l10n.starting_min : l10n.starting_min_plural;
|
||||||
var secTxt = hour == 1 ? l10n.starting_sec : l10n.starting_sec_plural;
|
var secTxt = hour == 1 ? l10n.starting_sec : l10n.starting_sec_plural;
|
||||||
|
|
||||||
return Column(
|
return FirkaCard.single(
|
||||||
crossAxisAlignment: CrossAxisAlignment.center,
|
margin: EdgeInsets.only(bottom: 1),
|
||||||
children: [
|
padding: EdgeInsets.all(16),
|
||||||
FirkaCard(
|
child: Column(
|
||||||
attached: Attach.bottom,
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
left: [
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
Column(
|
children: [
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
Row(
|
||||||
children: [
|
children: [
|
||||||
Row(
|
FilledCircle(
|
||||||
children: [
|
diameter: 32,
|
||||||
SizedBox(width: 6),
|
color: appStyle.colors.a15p,
|
||||||
Text(
|
child: FirkaIconWidget(
|
||||||
l10n.starting_soon,
|
FirkaIconType.majesticonsLocal,
|
||||||
style: appStyle.fonts.H_16px.apply(
|
"sunSolid",
|
||||||
color: appStyle.colors.textPrimary,
|
size: 20,
|
||||||
),
|
color: appStyle.colors.accent,
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
Row(
|
),
|
||||||
children: [
|
SizedBox(width: 8),
|
||||||
CounterDigitWidget(
|
Text(
|
||||||
hour.toString(),
|
l10n.starting_soon,
|
||||||
appStyle.fonts.H_16px.apply(
|
style: appStyle.fonts.B_16SB.apply(
|
||||||
color: appStyle.colors.textPrimary,
|
color: appStyle.colors.textPrimary,
|
||||||
),
|
|
||||||
),
|
|
||||||
SizedBox(width: 2),
|
|
||||||
Text(
|
|
||||||
hourTxt,
|
|
||||||
style: appStyle.fonts.B_16R.apply(
|
|
||||||
color: appStyle.colors.textPrimary,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
SizedBox(width: 4),
|
|
||||||
CounterDigitWidget(
|
|
||||||
(min / 10).floor().toString(),
|
|
||||||
appStyle.fonts.H_16px.apply(
|
|
||||||
color: appStyle.colors.textPrimary,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
CounterDigitWidget(
|
|
||||||
((min % 10)).toString(),
|
|
||||||
appStyle.fonts.H_16px.apply(
|
|
||||||
color: appStyle.colors.textPrimary,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
SizedBox(width: 2),
|
|
||||||
Text(
|
|
||||||
minTxt,
|
|
||||||
style: appStyle.fonts.B_16R.apply(
|
|
||||||
color: appStyle.colors.textPrimary,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
SizedBox(width: 4),
|
|
||||||
CounterDigitWidget(
|
|
||||||
(sec / 10).floor().toString(),
|
|
||||||
appStyle.fonts.H_16px.apply(
|
|
||||||
color: appStyle.colors.textPrimary,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
CounterDigitWidget(
|
|
||||||
((sec % 10)).toString(),
|
|
||||||
appStyle.fonts.H_16px.apply(
|
|
||||||
color: appStyle.colors.textPrimary,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
SizedBox(width: 2),
|
|
||||||
Text(
|
|
||||||
secTxt,
|
|
||||||
style: appStyle.fonts.B_16R.apply(
|
|
||||||
color: appStyle.colors.textPrimary,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
],
|
),
|
||||||
),
|
],
|
||||||
],
|
),
|
||||||
right: [],
|
Row(
|
||||||
),
|
children: [
|
||||||
],
|
CounterDigitWidget((hour / 10).floor().toString()),
|
||||||
|
SizedBox(width: 4),
|
||||||
|
CounterDigitWidget(((hour % 10)).toString()),
|
||||||
|
SizedBox(width: 8),
|
||||||
|
Text(
|
||||||
|
hourTxt,
|
||||||
|
style: appStyle.fonts.B_16R.apply(
|
||||||
|
color: appStyle.colors.textSecondary,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
SizedBox(width: 8),
|
||||||
|
CounterDigitWidget((min / 10).floor().toString()),
|
||||||
|
SizedBox(width: 4),
|
||||||
|
CounterDigitWidget(((min % 10)).toString()),
|
||||||
|
SizedBox(width: 8),
|
||||||
|
Text(
|
||||||
|
minTxt,
|
||||||
|
style: appStyle.fonts.B_16R.apply(
|
||||||
|
color: appStyle.colors.textSecondary,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
SizedBox(width: 8),
|
||||||
|
CounterDigitWidget((sec / 10).floor().toString()),
|
||||||
|
SizedBox(width: 4),
|
||||||
|
CounterDigitWidget(((sec % 10)).toString()),
|
||||||
|
SizedBox(width: 8),
|
||||||
|
Text(
|
||||||
|
secTxt,
|
||||||
|
style: appStyle.fonts.B_16R.apply(
|
||||||
|
color: appStyle.colors.textSecondary,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,20 +2,26 @@ import 'package:flutter/material.dart';
|
|||||||
|
|
||||||
import 'package:firka_common/ui/theme/style.dart';
|
import 'package:firka_common/ui/theme/style.dart';
|
||||||
|
|
||||||
|
import '../../firka_common.dart';
|
||||||
|
|
||||||
class CounterDigitWidget extends StatelessWidget {
|
class CounterDigitWidget extends StatelessWidget {
|
||||||
final String c;
|
final String c;
|
||||||
final TextStyle? style;
|
|
||||||
|
|
||||||
const CounterDigitWidget(this.c, this.style, {super.key});
|
const CounterDigitWidget(this.c, {super.key});
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return Card(
|
return Container(
|
||||||
shadowColor: Colors.transparent,
|
width: 18,
|
||||||
color: appStyle.colors.buttonSecondaryFill,
|
decoration: ShapeDecoration(
|
||||||
child: Padding(
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
|
||||||
padding: const EdgeInsets.only(left: 8, right: 8, top: 4, bottom: 4),
|
color: appStyle.colors.buttonSecondaryFill,
|
||||||
child: Text(c, style: style),
|
),
|
||||||
|
padding: EdgeInsets.symmetric(vertical: 2),
|
||||||
|
child: Text(
|
||||||
|
c,
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
style: appStyle.fonts.H_16px.apply(color: appStyle.colors.textPrimary),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user