286 lines
9.0 KiB
Dart
286 lines
9.0 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:get/get.dart';
|
|
import 'package:marco/helpers/widgets/my_text.dart';
|
|
import 'package:marco/helpers/widgets/wave_background.dart';
|
|
import 'package:marco/helpers/theme/admin_theme.dart';
|
|
import 'package:marco/helpers/theme/theme_customizer.dart';
|
|
import 'package:flutter_lucide/flutter_lucide.dart';
|
|
|
|
class ThemeOption {
|
|
final String label;
|
|
final Color primary;
|
|
final Color button;
|
|
final Color brand;
|
|
final ColorThemeType colorThemeType;
|
|
|
|
ThemeOption(
|
|
this.label, this.primary, this.button, this.brand, this.colorThemeType);
|
|
}
|
|
|
|
final List<ThemeOption> themeOptions = [
|
|
ThemeOption(
|
|
"Theme 1", Colors.red, Colors.red, Colors.red, ColorThemeType.red),
|
|
ThemeOption(
|
|
"Theme 2",
|
|
const Color(0xFF49BF3C),
|
|
const Color(0xFF49BF3C),
|
|
const Color(0xFF49BF3C),
|
|
ColorThemeType.green,
|
|
),
|
|
ThemeOption(
|
|
"Theme 3",
|
|
const Color(0xFF3F51B5),
|
|
const Color(0xFF3F51B5),
|
|
const Color(0xFF3F51B5),
|
|
ColorThemeType.blue,
|
|
),
|
|
ThemeOption(
|
|
"Theme 4",
|
|
const Color(0xFF663399),
|
|
const Color(0xFF663399),
|
|
const Color(0xFF663399),
|
|
ColorThemeType.purple,
|
|
),
|
|
];
|
|
|
|
class ThemeController extends GetxController {
|
|
RxInt selectedIndex = 0.obs;
|
|
RxBool showApplied = false.obs;
|
|
|
|
void init() {
|
|
final currentPrimary = AdminTheme.theme.contentTheme.primary;
|
|
int index = themeOptions
|
|
.indexWhere((opt) => opt.primary.value == currentPrimary.value);
|
|
selectedIndex.value = index == -1 ? 0 : index;
|
|
}
|
|
|
|
void applyTheme(int index) async {
|
|
selectedIndex.value = index;
|
|
showApplied.value = true;
|
|
|
|
ThemeCustomizer.instance.colorTheme = themeOptions[index].colorThemeType;
|
|
|
|
ThemeCustomizer.applyThemeChange();
|
|
|
|
await Future.delayed(const Duration(milliseconds: 600));
|
|
showApplied.value = false;
|
|
}
|
|
}
|
|
|
|
class ThemeEditorWidget extends StatefulWidget {
|
|
final VoidCallback onClose;
|
|
|
|
const ThemeEditorWidget({super.key, required this.onClose});
|
|
|
|
@override
|
|
_ThemeEditorWidgetState createState() => _ThemeEditorWidgetState();
|
|
}
|
|
|
|
class _ThemeEditorWidgetState extends State<ThemeEditorWidget> {
|
|
final ThemeController themeController = Get.put(ThemeController());
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
themeController.init();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Padding(
|
|
padding: const EdgeInsets.all(12),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Header row with title and close button
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
MyText.bodyLarge("Theme Customization", fontWeight: 600),
|
|
IconButton(
|
|
icon: const Icon(Icons.close),
|
|
onPressed: widget.onClose,
|
|
tooltip: "Back",
|
|
iconSize: 20,
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 12),
|
|
InkWell(
|
|
onTap: () {
|
|
ThemeCustomizer.setTheme(
|
|
ThemeCustomizer.instance.theme == ThemeMode.dark
|
|
? ThemeMode.light
|
|
: ThemeMode.dark);
|
|
},
|
|
child: Icon(
|
|
ThemeCustomizer.instance.theme == ThemeMode.dark
|
|
? LucideIcons.sun
|
|
: LucideIcons.moon,
|
|
size: 18,
|
|
),
|
|
),
|
|
// Theme cards wrapped in reactive Obx widget
|
|
Center(
|
|
child: Obx(
|
|
() => Wrap(
|
|
spacing: 12,
|
|
runSpacing: 12,
|
|
alignment: WrapAlignment.center,
|
|
children: List.generate(themeOptions.length, (i) {
|
|
return ThemeCard(
|
|
themeOption: themeOptions[i],
|
|
isSelected: themeController.selectedIndex.value == i,
|
|
onTap: () => themeController.applyTheme(i),
|
|
);
|
|
}),
|
|
),
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: 12),
|
|
|
|
// Applied indicator reactive widget
|
|
Obx(
|
|
() => themeController.showApplied.value
|
|
? Padding(
|
|
padding: const EdgeInsets.only(top: 10),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Icon(
|
|
Icons.check_circle,
|
|
color:
|
|
themeOptions[themeController.selectedIndex.value]
|
|
.brand,
|
|
size: 20,
|
|
),
|
|
const SizedBox(width: 6),
|
|
Text(
|
|
"Theme Applied!",
|
|
style: TextStyle(
|
|
color: themeOptions[
|
|
themeController.selectedIndex.value]
|
|
.brand,
|
|
fontWeight: FontWeight.w700,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
)
|
|
: const SizedBox(),
|
|
),
|
|
|
|
const SizedBox(height: 16),
|
|
const Text(
|
|
"Preview and select a theme. You can change this anytime.",
|
|
style: TextStyle(fontSize: 13, color: Colors.black54),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class ThemeCard extends StatelessWidget {
|
|
final ThemeOption themeOption;
|
|
final bool isSelected;
|
|
final VoidCallback onTap;
|
|
|
|
const ThemeCard({
|
|
Key? key,
|
|
required this.themeOption,
|
|
required this.isSelected,
|
|
required this.onTap,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return SizedBox(
|
|
width: 80,
|
|
child: Material(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(12),
|
|
elevation: isSelected ? 4 : 1,
|
|
child: InkWell(
|
|
borderRadius: BorderRadius.circular(12),
|
|
onTap: onTap,
|
|
child: AnimatedContainer(
|
|
duration: const Duration(milliseconds: 250),
|
|
curve: Curves.easeInOut,
|
|
padding: const EdgeInsets.all(6),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(
|
|
color: isSelected ? themeOption.brand : Colors.transparent,
|
|
width: 2,
|
|
),
|
|
),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
SizedBox(
|
|
height: 80,
|
|
child: ClipRRect(
|
|
borderRadius: BorderRadius.circular(10),
|
|
child: Stack(
|
|
fit: StackFit.expand,
|
|
children: [
|
|
CustomPaint(
|
|
painter: RedWavePainter(themeOption.brand, 0.15)),
|
|
Center(
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(
|
|
"Hello, User!",
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.w600,
|
|
color: themeOption.primary,
|
|
fontSize: 12,
|
|
),
|
|
),
|
|
const SizedBox(height: 4),
|
|
SizedBox(
|
|
height: 18,
|
|
child: ElevatedButton(
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: themeOption.button,
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 8, vertical: 0),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(4),
|
|
),
|
|
elevation: 1,
|
|
textStyle: const TextStyle(fontSize: 10),
|
|
),
|
|
onPressed: () {},
|
|
child: const Text("Welcome"),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 6),
|
|
Text(
|
|
themeOption.label,
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.w600,
|
|
fontSize: 12,
|
|
color: Colors.grey[700],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|