made full new grade color picker
This commit is contained in:
parent
e0bf8ac5e5
commit
75ba5405bb
@ -295,7 +295,8 @@ class FilcColorPickerState extends State<FilcColorPicker> {
|
|||||||
],
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
if (widget.colorMode != CustomColorMode.enterId)
|
if (widget.colorMode != CustomColorMode.enterId &&
|
||||||
|
widget.colorMode != CustomColorMode.grade)
|
||||||
SizedBox(
|
SizedBox(
|
||||||
height: 70 * (widget.colorMode == CustomColorMode.theme ? 2 : 1),
|
height: 70 * (widget.colorMode == CustomColorMode.theme ? 2 : 1),
|
||||||
child: BlockPicker(
|
child: BlockPicker(
|
||||||
|
381
refilc_mobile_ui/lib/screens/settings/submenu/grade_colors.dart
Normal file
381
refilc_mobile_ui/lib/screens/settings/submenu/grade_colors.dart
Normal file
@ -0,0 +1,381 @@
|
|||||||
|
import 'package:refilc/models/settings.dart';
|
||||||
|
import 'package:refilc/theme/colors/colors.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:provider/provider.dart';
|
||||||
|
import 'package:refilc/ui/flutter_colorpicker/colorpicker.dart';
|
||||||
|
import 'package:refilc/ui/widgets/grade/grade_tile.dart';
|
||||||
|
import 'package:refilc_kreta_api/models/grade.dart';
|
||||||
|
import 'package:refilc_mobile_ui/screens/settings/theme_screen.dart';
|
||||||
|
import 'submenu_screen.i18n.dart';
|
||||||
|
|
||||||
|
enum SelectedGrade { one, two, three, four, five }
|
||||||
|
|
||||||
|
class GradeColorsSettingsScreen extends StatefulWidget {
|
||||||
|
const GradeColorsSettingsScreen({super.key});
|
||||||
|
|
||||||
|
@override
|
||||||
|
GradeColorsSettingsScreenState createState() =>
|
||||||
|
GradeColorsSettingsScreenState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class GradeColorsSettingsScreenState extends State<GradeColorsSettingsScreen> {
|
||||||
|
late SettingsProvider settingsProvider;
|
||||||
|
|
||||||
|
SelectedGrade currentEditGrade = SelectedGrade.one;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
SettingsProvider settingsProvider = Provider.of<SettingsProvider>(context);
|
||||||
|
|
||||||
|
return Scaffold(
|
||||||
|
appBar: AppBar(
|
||||||
|
surfaceTintColor: Theme.of(context).scaffoldBackgroundColor,
|
||||||
|
leading: BackButton(
|
||||||
|
color: AppColors.of(context).text,
|
||||||
|
onPressed: () {
|
||||||
|
setState(() {
|
||||||
|
// made this cuz else it will be ugly
|
||||||
|
currentEditGrade = SelectedGrade.one;
|
||||||
|
});
|
||||||
|
Navigator.of(context).pop();
|
||||||
|
},
|
||||||
|
),
|
||||||
|
title: Text(
|
||||||
|
"grade_colors".i18n,
|
||||||
|
style: TextStyle(color: AppColors.of(context).text),
|
||||||
|
),
|
||||||
|
actions: [
|
||||||
|
IconButton(
|
||||||
|
onPressed: () {
|
||||||
|
List<Color> colors = List.castFrom(settingsProvider.gradeColors);
|
||||||
|
var defaultColors =
|
||||||
|
SettingsProvider.defaultSettings().gradeColors;
|
||||||
|
colors[currentEditGrade.index] =
|
||||||
|
defaultColors[currentEditGrade.index];
|
||||||
|
settingsProvider.update(gradeColors: colors);
|
||||||
|
},
|
||||||
|
icon: const Icon(
|
||||||
|
Icons.restore,
|
||||||
|
size: 26.0,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(
|
||||||
|
width: 10.0,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
body: SizedBox(
|
||||||
|
width: double.infinity,
|
||||||
|
height: double.infinity,
|
||||||
|
child: Column(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
|
children: [
|
||||||
|
Column(
|
||||||
|
children: [
|
||||||
|
SizedBox(
|
||||||
|
height: MediaQuery.of(context).size.height * 0.14,
|
||||||
|
),
|
||||||
|
Stack(
|
||||||
|
children: [
|
||||||
|
Container(
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: Theme.of(context).colorScheme.background,
|
||||||
|
borderRadius: BorderRadius.circular(75.0),
|
||||||
|
boxShadow: [
|
||||||
|
BoxShadow(
|
||||||
|
color: Theme.of(context)
|
||||||
|
.colorScheme
|
||||||
|
.shadow
|
||||||
|
.withOpacity(.1),
|
||||||
|
blurRadius: 10.0,
|
||||||
|
offset: const Offset(0, 5),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
padding: const EdgeInsets.all(6.0),
|
||||||
|
child: GradeValueWidget(
|
||||||
|
GradeValue(currentEditGrade.index + 1, '', '', 100),
|
||||||
|
fill: true,
|
||||||
|
size: 75.0,
|
||||||
|
// color:
|
||||||
|
// settingsProvider.gradeColors[currentEditGrade.index],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
// before grades
|
||||||
|
if (currentEditGrade.index > 0)
|
||||||
|
Transform.translate(
|
||||||
|
offset: const Offset(-110, 16.5),
|
||||||
|
child: GradeValueWidget(
|
||||||
|
GradeValue(currentEditGrade.index, '', '', 100),
|
||||||
|
fill: true,
|
||||||
|
size: 60.0,
|
||||||
|
// color:
|
||||||
|
// settingsProvider.gradeColors[currentEditGrade.index],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
if (currentEditGrade.index > 1)
|
||||||
|
Transform.translate(
|
||||||
|
offset: const Offset(-200, 23),
|
||||||
|
child: GradeValueWidget(
|
||||||
|
GradeValue(currentEditGrade.index - 1, '', '', 100),
|
||||||
|
fill: true,
|
||||||
|
size: 50.0,
|
||||||
|
// color:
|
||||||
|
// settingsProvider.gradeColors[currentEditGrade.index],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
// after grades
|
||||||
|
if (currentEditGrade.index < 4)
|
||||||
|
Transform.translate(
|
||||||
|
offset: const Offset(142, 16.5),
|
||||||
|
child: GradeValueWidget(
|
||||||
|
GradeValue(currentEditGrade.index + 2, '', '', 100),
|
||||||
|
fill: true,
|
||||||
|
size: 60.0,
|
||||||
|
// color:
|
||||||
|
// settingsProvider.gradeColors[currentEditGrade.index],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
if (currentEditGrade.index < 3)
|
||||||
|
Transform.translate(
|
||||||
|
offset: const Offset(245, 23),
|
||||||
|
child: GradeValueWidget(
|
||||||
|
GradeValue(currentEditGrade.index + 3, '', '', 100),
|
||||||
|
fill: true,
|
||||||
|
size: 50.0,
|
||||||
|
// color:
|
||||||
|
// settingsProvider.gradeColors[currentEditGrade.index],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
SizedBox(
|
||||||
|
height: MediaQuery.of(context).size.height * 0.14,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: 12.0),
|
||||||
|
child: SafeArea(
|
||||||
|
child: FilcColorPicker(
|
||||||
|
colorMode: CustomColorMode.grade,
|
||||||
|
pickerColor:
|
||||||
|
settingsProvider.gradeColors[currentEditGrade.index],
|
||||||
|
onColorChanged: (c) {
|
||||||
|
setState(() {
|
||||||
|
// update grade color
|
||||||
|
settingsProvider.update(
|
||||||
|
gradeColors: settingsProvider.gradeColors
|
||||||
|
..[currentEditGrade.index] = c);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onColorChangeEnd: (c, {adaptive}) {
|
||||||
|
// update grade color
|
||||||
|
},
|
||||||
|
onThemeIdProvided: (t) {},
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.only(bottom: 20.0, top: 16.0),
|
||||||
|
child: Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
|
children: [
|
||||||
|
GestureDetector(
|
||||||
|
onTap: () => setState(() {
|
||||||
|
currentEditGrade = SelectedGrade.one;
|
||||||
|
}),
|
||||||
|
child: Container(
|
||||||
|
width: 45.0,
|
||||||
|
height: 45.0,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
border: Border.all(
|
||||||
|
color: currentEditGrade == SelectedGrade.one
|
||||||
|
? Theme.of(context).colorScheme.secondary
|
||||||
|
: Theme.of(context)
|
||||||
|
.colorScheme
|
||||||
|
.secondary
|
||||||
|
.withOpacity(.2),
|
||||||
|
width: 1.0,
|
||||||
|
),
|
||||||
|
borderRadius: BorderRadius.circular(50.0),
|
||||||
|
color: currentEditGrade == SelectedGrade.one
|
||||||
|
? Theme.of(context).colorScheme.secondary
|
||||||
|
: null,
|
||||||
|
),
|
||||||
|
child: Center(
|
||||||
|
child: Text(
|
||||||
|
'1',
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 14.0,
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
color: currentEditGrade == SelectedGrade.one
|
||||||
|
? Colors.white
|
||||||
|
: null,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(width: 10.0),
|
||||||
|
GestureDetector(
|
||||||
|
onTap: () => setState(() {
|
||||||
|
currentEditGrade = SelectedGrade.two;
|
||||||
|
}),
|
||||||
|
child: Container(
|
||||||
|
width: 45.0,
|
||||||
|
height: 45.0,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
border: Border.all(
|
||||||
|
color: currentEditGrade == SelectedGrade.two
|
||||||
|
? Theme.of(context).colorScheme.secondary
|
||||||
|
: Theme.of(context)
|
||||||
|
.colorScheme
|
||||||
|
.secondary
|
||||||
|
.withOpacity(.2),
|
||||||
|
width: 1.0,
|
||||||
|
),
|
||||||
|
borderRadius: BorderRadius.circular(50.0),
|
||||||
|
color: currentEditGrade == SelectedGrade.two
|
||||||
|
? Theme.of(context).colorScheme.secondary
|
||||||
|
: null,
|
||||||
|
),
|
||||||
|
child: Center(
|
||||||
|
child: Text(
|
||||||
|
'2',
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 14.0,
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
color: currentEditGrade == SelectedGrade.two
|
||||||
|
? Colors.white
|
||||||
|
: null,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(width: 10.0),
|
||||||
|
GestureDetector(
|
||||||
|
onTap: () => setState(() {
|
||||||
|
currentEditGrade = SelectedGrade.three;
|
||||||
|
}),
|
||||||
|
child: Container(
|
||||||
|
width: 45.0,
|
||||||
|
height: 45.0,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
border: Border.all(
|
||||||
|
color: currentEditGrade == SelectedGrade.three
|
||||||
|
? Theme.of(context).colorScheme.secondary
|
||||||
|
: Theme.of(context)
|
||||||
|
.colorScheme
|
||||||
|
.secondary
|
||||||
|
.withOpacity(.2),
|
||||||
|
width: 1.0,
|
||||||
|
),
|
||||||
|
borderRadius: BorderRadius.circular(50.0),
|
||||||
|
color: currentEditGrade == SelectedGrade.three
|
||||||
|
? Theme.of(context).colorScheme.secondary
|
||||||
|
: null,
|
||||||
|
),
|
||||||
|
child: Center(
|
||||||
|
child: Text(
|
||||||
|
'3',
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 14.0,
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
color: currentEditGrade == SelectedGrade.three
|
||||||
|
? Colors.white
|
||||||
|
: null,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(width: 10.0),
|
||||||
|
GestureDetector(
|
||||||
|
onTap: () => setState(() {
|
||||||
|
currentEditGrade = SelectedGrade.four;
|
||||||
|
}),
|
||||||
|
child: Container(
|
||||||
|
width: 45.0,
|
||||||
|
height: 45.0,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
border: Border.all(
|
||||||
|
color: currentEditGrade == SelectedGrade.four
|
||||||
|
? Theme.of(context).colorScheme.secondary
|
||||||
|
: Theme.of(context)
|
||||||
|
.colorScheme
|
||||||
|
.secondary
|
||||||
|
.withOpacity(.2),
|
||||||
|
width: 1.0,
|
||||||
|
),
|
||||||
|
borderRadius: BorderRadius.circular(50.0),
|
||||||
|
color: currentEditGrade == SelectedGrade.four
|
||||||
|
? Theme.of(context).colorScheme.secondary
|
||||||
|
: null,
|
||||||
|
),
|
||||||
|
child: Center(
|
||||||
|
child: Text(
|
||||||
|
'4',
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 14.0,
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
color: currentEditGrade == SelectedGrade.four
|
||||||
|
? Colors.white
|
||||||
|
: null,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(width: 10.0),
|
||||||
|
GestureDetector(
|
||||||
|
onTap: () => setState(() {
|
||||||
|
currentEditGrade = SelectedGrade.five;
|
||||||
|
}),
|
||||||
|
child: Container(
|
||||||
|
width: 45.0,
|
||||||
|
height: 45.0,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
border: Border.all(
|
||||||
|
color: currentEditGrade == SelectedGrade.five
|
||||||
|
? Theme.of(context).colorScheme.secondary
|
||||||
|
: Theme.of(context)
|
||||||
|
.colorScheme
|
||||||
|
.secondary
|
||||||
|
.withOpacity(.2),
|
||||||
|
width: 1.0,
|
||||||
|
),
|
||||||
|
borderRadius: BorderRadius.circular(50.0),
|
||||||
|
color: currentEditGrade == SelectedGrade.five
|
||||||
|
? Theme.of(context).colorScheme.secondary
|
||||||
|
: null,
|
||||||
|
),
|
||||||
|
child: Center(
|
||||||
|
child: Text(
|
||||||
|
'5',
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 14.0,
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
color: currentEditGrade == SelectedGrade.five
|
||||||
|
? Colors.white
|
||||||
|
: null,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
@ -30,6 +30,8 @@ import 'package:refilc_plus/providers/plus_provider.dart';
|
|||||||
import 'package:refilc_plus/ui/mobile/plus/upsell.dart';
|
import 'package:refilc_plus/ui/mobile/plus/upsell.dart';
|
||||||
import 'package:google_fonts/google_fonts.dart';
|
import 'package:google_fonts/google_fonts.dart';
|
||||||
|
|
||||||
|
import 'grade_colors.dart';
|
||||||
|
|
||||||
class MenuPersonalizeSettings extends StatelessWidget {
|
class MenuPersonalizeSettings extends StatelessWidget {
|
||||||
const MenuPersonalizeSettings({
|
const MenuPersonalizeSettings({
|
||||||
super.key,
|
super.key,
|
||||||
@ -499,8 +501,14 @@ class PersonalizeSettingsScreenState extends State<PersonalizeSettingsScreen>
|
|||||||
children: [
|
children: [
|
||||||
PanelButton(
|
PanelButton(
|
||||||
onPressed: () {
|
onPressed: () {
|
||||||
SettingsHelper.gradeColors(context);
|
// SettingsHelper.gradeColors(context);
|
||||||
setState(() {});
|
// setState(() {});
|
||||||
|
Navigator.of(context, rootNavigator: true).push(
|
||||||
|
CupertinoPageRoute(
|
||||||
|
builder: (context) =>
|
||||||
|
const GradeColorsSettingsScreen(),
|
||||||
|
),
|
||||||
|
);
|
||||||
},
|
},
|
||||||
title: Text(
|
title: Text(
|
||||||
"grade_colors".i18n,
|
"grade_colors".i18n,
|
||||||
|
@ -17,6 +17,8 @@ extension SettingsLocalization on String {
|
|||||||
"rare": "Rare",
|
"rare": "Rare",
|
||||||
"epic": "Epic",
|
"epic": "Epic",
|
||||||
"legendary": "Legendary",
|
"legendary": "Legendary",
|
||||||
|
// grade colors
|
||||||
|
"grade_colors": "Grade Colors",
|
||||||
},
|
},
|
||||||
"hu_hu": {
|
"hu_hu": {
|
||||||
"general": "Általános",
|
"general": "Általános",
|
||||||
@ -32,6 +34,8 @@ extension SettingsLocalization on String {
|
|||||||
"rare": "Ritka",
|
"rare": "Ritka",
|
||||||
"epic": "Epikus",
|
"epic": "Epikus",
|
||||||
"legendary": "Legendás",
|
"legendary": "Legendás",
|
||||||
|
// grade colors
|
||||||
|
"grade_colors": "Jegyek színei",
|
||||||
},
|
},
|
||||||
"de_de": {
|
"de_de": {
|
||||||
"general": "Allgemeine",
|
"general": "Allgemeine",
|
||||||
@ -47,6 +51,8 @@ extension SettingsLocalization on String {
|
|||||||
"rare": "Selten",
|
"rare": "Selten",
|
||||||
"epic": "Episch",
|
"epic": "Episch",
|
||||||
"legendary": "Legendär",
|
"legendary": "Legendär",
|
||||||
|
// grade colors
|
||||||
|
"grade_colors": "Notenfarben",
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -44,6 +44,7 @@ enum CustomColorMode {
|
|||||||
text,
|
text,
|
||||||
icon,
|
icon,
|
||||||
enterId,
|
enterId,
|
||||||
|
grade,
|
||||||
}
|
}
|
||||||
|
|
||||||
class _PremiumCustomAccentColorSettingState
|
class _PremiumCustomAccentColorSettingState
|
||||||
@ -158,6 +159,9 @@ class _PremiumCustomAccentColorSettingState
|
|||||||
case CustomColorMode.enterId:
|
case CustomColorMode.enterId:
|
||||||
// do nothing here lol
|
// do nothing here lol
|
||||||
break;
|
break;
|
||||||
|
case CustomColorMode.grade:
|
||||||
|
// do nothing here as well
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -218,6 +222,9 @@ class _PremiumCustomAccentColorSettingState
|
|||||||
settings.update(customAccentColor: accent, store: store);
|
settings.update(customAccentColor: accent, store: store);
|
||||||
settings.update(customIconColor: icon, store: store);
|
settings.update(customIconColor: icon, store: store);
|
||||||
break;
|
break;
|
||||||
|
case CustomColorMode.grade:
|
||||||
|
// do nothing
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user