luckyimnotanigger/adguard-home-manager
1
0
Fork 0
mirror of https://github.com/JGeek00/adguard-home-manager.git synced 2025-04-19 21:39:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improved theme color selection for desktop

Browse source
This commit is contained in:
Juan Gilsanz Polo 2024-01-24 13:07:25 +01:00
parent 0df32d3941
commit 65ee702b89
2 changed files with 90 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
lib/screens/settings/customization/color_item.dart
View file

@ -1,23 +1,31 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
class ColorItem extends StatelessWidget { class ColorItem extends StatelessWidget {
final int index;
final int total;
final Color color; final Color color;
final int numericValue; final int numericValue;
final int? selectedValue; final int? selectedValue;
final void Function(int) onChanged; final void Function(int) onChanged;
const ColorItem({ const ColorItem({
Key? key, super.key,
required this.index,
required this.total,
required this.color, required this.color,
required this.numericValue, required this.numericValue,
required this.selectedValue, required this.selectedValue,
required this.onChanged required this.onChanged
}) : super(key: key); });
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Padding( return Padding(
padding: const EdgeInsets.all(10), padding: index == 0
? const EdgeInsets.only(top: 10, right: 10, bottom: 10)
: index == total-1
? const EdgeInsets.only(top: 10, bottom: 10, left: 10)
: const EdgeInsets.all(10),
child: Material( child: Material(
borderRadius: BorderRadius.circular(50), borderRadius: BorderRadius.circular(50),
child: InkWell( child: InkWell(

153
lib/screens/settings/customization/customization.dart
View file

@ -1,3 +1,5 @@
import 'dart:io';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart';
@ -30,9 +32,9 @@ class CustomizationWidget extends StatefulWidget {
final AppConfigProvider appConfigProvider; final AppConfigProvider appConfigProvider;
const CustomizationWidget({ const CustomizationWidget({
Key? key, super.key,
required this.appConfigProvider, required this.appConfigProvider,
}) : super(key: key); });
@override @override
State<CustomizationWidget> createState() => _CustomizationWidgetState(); State<CustomizationWidget> createState() => _CustomizationWidgetState();
@ -44,6 +46,8 @@ class _CustomizationWidgetState extends State<CustomizationWidget> {
int selectedColor = 0; int selectedColor = 0;
bool useThemeColorInsteadGreenRed = false; bool useThemeColorInsteadGreenRed = false;
final _colorsScrollController = ScrollController();
@override @override
void initState() { void initState() {
selectedTheme = widget.appConfigProvider.selectedThemeNumber; selectedTheme = widget.appConfigProvider.selectedThemeNumber;
@ -125,83 +129,84 @@ class _CustomizationWidgetState extends State<CustomizationWidget> {
title: AppLocalizations.of(context)!.useDynamicTheme, title: AppLocalizations.of(context)!.useDynamicTheme,
), ),
if (!(appConfigProvider.androidDeviceInfo != null && appConfigProvider.androidDeviceInfo!.version.sdkInt >= 31)) const SizedBox(height: 20), if (!(appConfigProvider.androidDeviceInfo != null && appConfigProvider.androidDeviceInfo!.version.sdkInt >= 31)) const SizedBox(height: 20),
if (dynamicColor == false) ...[ if (dynamicColor == false) Padding(
SizedBox( padding: const EdgeInsets.only(bottom: 8, left: 16, right: 16),
width: MediaQuery.of(context).size.width, child: Scrollbar(
height: 70, controller: _colorsScrollController,
child: ListView.builder( thumbVisibility: Platform.isMacOS || Platform.isLinux || Platform.isWindows,
scrollDirection: Axis.horizontal, interactive: Platform.isMacOS || Platform.isLinux || Platform.isWindows,
itemCount: colors.length, thickness: Platform.isMacOS || Platform.isLinux || Platform.isWindows ? 8 : 0,
itemBuilder: (context, index) { child: Padding(
if (index == 0) { padding: const EdgeInsets.only(bottom: 16),
return Row( child: Column(
children: [ crossAxisAlignment: CrossAxisAlignment.start,
const SizedBox(width: 15), children: [
ColorItem( SizedBox(
color: colors[index], width: MediaQuery.of(context).size.width,
numericValue: index, height: 70,
selectedValue: selectedColor, child: ListView.builder(
onChanged: (value) { controller: _colorsScrollController,
setState(() => selectedColor = value); scrollDirection: Axis.horizontal,
appConfigProvider.setStaticColor(value); itemCount: colors.length,
padding: const EdgeInsets.all(0),
itemBuilder: (context, index) {
if (index == 0) {
return Row(
children: [
ColorItem(
index: index,
total: colors.length,
color: colors[index],
numericValue: index,
selectedValue: selectedColor,
onChanged: (value) {
setState(() => selectedColor = value);
appConfigProvider.setStaticColor(value);
}
),
Container(
margin: const EdgeInsets.symmetric(horizontal: 10),
width: 1,
height: 60,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(1)
),
)
],
);
} }
), else {
Container( return ColorItem(
margin: const EdgeInsets.symmetric(horizontal: 10), index: index,
width: 1, total: colors.length,
height: 60, color: colors[index],
decoration: BoxDecoration( numericValue: index,
color: Colors.grey, selectedValue: selectedColor,
borderRadius: BorderRadius.circular(1) onChanged: (value) {
), setState(() => selectedColor = value);
) appConfigProvider.setStaticColor(value);
], }
); );
}
else if (index == colors.length-1) {
return Row(
children: [
ColorItem(
color: colors[index],
numericValue: index,
selectedValue: selectedColor,
onChanged: (value) {
setState(() => selectedColor = value);
appConfigProvider.setStaticColor(value);
} }
},
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: Text(
colorTranslation(context, selectedColor),
style: TextStyle(
color: Theme.of(context).listTileTheme.iconColor,
fontSize: 16
), ),
const SizedBox(width: 15) ),
], )
); ],
}
else {
return ColorItem(
color: colors[index],
numericValue: index,
selectedValue: selectedColor,
onChanged: (value) {
setState(() => selectedColor = value);
appConfigProvider.setStaticColor(value);
}
);
}
},
),
),
Padding(
padding: const EdgeInsets.only(
left: 25,
top: 10
),
child: Text(
colorTranslation(context, selectedColor),
style: TextStyle(
color: Theme.of(context).listTileTheme.iconColor,
fontSize: 16
), ),
), ),
) ),
], ),
CustomSwitchListTile( CustomSwitchListTile(
value: useThemeColorInsteadGreenRed, value: useThemeColorInsteadGreenRed,
onChanged: (value) { onChanged: (value) {