Improved dns settings main screen

lib/l10n/app_en.arb

@@ -473,5 +473,10 @@
     "dnsConfigSaved": "DNS server configuration saved successfully",
     "dnsConfigNotSaved": "The DNS server configuration could not be saved",
     "savingConfig": "Saving configuration...",
-    "someValueNotValid": "Some value is not valid"
+    "someValueNotValid": "Some value is not valid",
+    "upstreamDnsDescription": "Configure upstream servers and DNS mode",
+    "bootstrapDnsDescription": "Configure the bootstrap DNS servers",
+    "privateReverseDnsDescription": "Configure custom DNS resolvers and enable private reverse DNS resolving",
+    "dnsServerSettingsDescription": "Configure a rate limit, the blocking mode and more",
+    "dnsCacheConfigDescription": "Configure how the server should manage the DNS cache"
 }

lib/l10n/app_es.arb

@@ -473,5 +473,10 @@
     "dnsConfigSaved": "La configuración del servidor DNS se ha guardado correctamente",
     "dnsConfigNotSaved": "La configuración del servidor DNS no ha podido ser guardada",
     "savingConfig": "Guardando configuración...",
-    "someValueNotValid": "Algún valor no es válido"
+    "someValueNotValid": "Algún valor no es válido",
+    "upstreamDnsDescription": "Configura los servidores de subida y el modo DNS",
+    "bootstrapDnsDescription": "Configura los servidores DNS de arranque",
+    "privateReverseDnsDescription": "Configura DNS resolutores personalizados y habilita resolutores internos y privados",
+    "dnsServerSettingsDescription": "Configura el límite de peticiones, el modo de bloqueo y más",
+    "dnsCacheConfigDescription": "Configura cómo el servidor debe manejar la caché del DNS"
 }

lib/screens/settings/dns/dns.dart

@@ -7,6 +7,7 @@ import 'package:adguard_home_manager/screens/settings/dns/dns_server_settings.da
 import 'package:adguard_home_manager/screens/settings/dns/bootstrap_dns.dart';
 import 'package:adguard_home_manager/screens/settings/dns/private_reverse_servers.dart';
 import 'package:adguard_home_manager/screens/settings/dns/upstream_dns.dart';
+import 'package:adguard_home_manager/widgets/custom_list_tile.dart';
 
 import 'package:adguard_home_manager/providers/servers_provider.dart';
 import 'package:adguard_home_manager/providers/app_config_provider.dart';
@@ -95,75 +96,55 @@ class _DnsSettingsWidgetState extends State<DnsSettingsWidget> {
         case 1:
           return ListView(
             children: [
-              ListTile(
+              CustomListTile(
-                title: Text(
+                title: AppLocalizations.of(context)!.upstreamDns,
-                  AppLocalizations.of(context)!.upstreamDns,
+                subtitle: AppLocalizations.of(context)!.upstreamDnsDescription,
-                  style: const TextStyle(
-                    fontSize: 16,
-                    fontWeight: FontWeight.normal
-                  ),
-                ),
                 onTap: () => Navigator.push(context, MaterialPageRoute(
                   builder: (context) => UpstreamDnsScreen(
                     serversProvider: serversProvider
                   )
                 )),
+                icon: Icons.upload_rounded,
               ),
-              ListTile(
+              CustomListTile(
-                title: Text(
+                title: AppLocalizations.of(context)!.bootstrapDns,
-                  AppLocalizations.of(context)!.bootstrapDns,
+                subtitle: AppLocalizations.of(context)!.bootstrapDnsDescription,
-                  style: const TextStyle(
-                    fontSize: 16,
-                    fontWeight: FontWeight.normal
-                  ),
-                ),
                 onTap: () => Navigator.push(context, MaterialPageRoute(
                   builder: (context) => BootstrapDnsScreen(
                     serversProvider: serversProvider
                   )
                 )),
+                icon: Icons.dns_rounded,
               ),
-              ListTile(
+              CustomListTile(
-                title: Text(
+                title: AppLocalizations.of(context)!.privateReverseDnsServers,
-                  AppLocalizations.of(context)!.privateReverseDnsServers,
+                subtitle: AppLocalizations.of(context)!.privateReverseDnsDescription,
-                  style: const TextStyle(
-                    fontSize: 16,
-                    fontWeight: FontWeight.normal
-                  ),
-                ),
                 onTap: () => Navigator.push(context, MaterialPageRoute(
                   builder: (context) => PrivateReverseDnsServersScreen(
                     serversProvider: serversProvider
                   )
                 )),
+                icon: Icons.person_rounded,
               ),
-              ListTile(
+              CustomListTile(
-                title: Text(
+                title: AppLocalizations.of(context)!.dnsServerSettings,
-                  AppLocalizations.of(context)!.dnsServerSettings,
+                subtitle: AppLocalizations.of(context)!.dnsServerSettingsDescription,
-                  style: const TextStyle(
-                    fontSize: 16,
-                    fontWeight: FontWeight.normal
-                  ),
-                ),
                 onTap: () => Navigator.push(context, MaterialPageRoute(
                   builder: (context) => DnsServerSettingsScreen(
                     serversProvider: serversProvider
                   )
                 )),
+                icon: Icons.settings,
               ),
-              ListTile(
+              CustomListTile(
-                title: Text(
+                title: AppLocalizations.of(context)!.dnsCacheConfig,
-                  AppLocalizations.of(context)!.dnsCacheConfig,
+                subtitle: AppLocalizations.of(context)!.dnsCacheConfigDescription,
-                  style: const TextStyle(
-                    fontSize: 16,
-                    fontWeight: FontWeight.normal
-                  ),
-                ),
                 onTap: () => Navigator.push(context, MaterialPageRoute(
                   builder: (context) => CacheConfigDnsScreen(
                     serversProvider: serversProvider
                   )
                 )),
+                icon: Icons.storage_rounded,
               ),
             ],
           );

lib/widgets/custom_list_tile.dart

@@ -0,0 +1,68 @@
+import 'package:flutter/material.dart';
+
+class CustomListTile extends StatelessWidget {
+  final String title;
+  final String? subtitle;
+  final void Function() onTap;
+  final IconData? icon;
+
+  const CustomListTile({
+    Key? key,
+    required this.title,
+    this.subtitle,
+    required this.onTap,
+    this.icon,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      color: Colors.transparent,
+      child: InkWell(
+        onTap: onTap,
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
+          child: Row(
+            children: [
+              if (icon != null) ...[
+                Icon(
+                  icon,
+                  color: const Color.fromRGBO(104, 104, 104, 1),
+                ),
+                const SizedBox(width: 20),
+              ],
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  SizedBox(
+                    width: MediaQuery.of(context).size.width-84,
+                    child: Text(
+                      title,
+                      style: const TextStyle(
+                        fontSize: 18,
+                        fontWeight: FontWeight.normal
+                      ),
+                    ),
+                  ),
+                  if (subtitle != null) ...[
+                    const SizedBox(height: 5),
+                    SizedBox(
+                      width: MediaQuery.of(context).size.width-84,
+                      child: Text(
+                        subtitle!,
+                        style: const TextStyle(
+                          color: Color.fromRGBO(104, 104, 104, 1),
+                          fontSize: 14
+                        ),
+                      ),
+                    ),
+                  ]
+                ],
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}