mirror of
https://github.com/JGeek00/adguard-home-manager.git
synced 2025-05-04 20:30:35 +00:00
Added select server screen and add server screen
This commit is contained in:
Juan Gilsanz Polo
parent
e1ff7a151d
commit
a97ae20631
22 changed files with 623 additions and 27 deletions
194
lib/widgets/add_server_modal.dart
Normal file
194
lib/widgets/add_server_modal.dart
Normal file
|
|
@ -0,0 +1,194 @@
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
|
||||
|
||||
import 'package:adguard_home_manager/widgets/custom_radio_toggle.dart';
|
||||
|
||||
import 'package:adguard_home_manager/config/system_overlay_style.dart';
|
||||
|
||||
class AddServerModal extends StatefulWidget {
|
||||
const AddServerModal({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
State<AddServerModal> createState() => _AddServerModalState();
|
||||
}
|
||||
|
||||
class _AddServerModalState extends State<AddServerModal> {
|
||||
final TextEditingController nameController = TextEditingController();
|
||||
|
||||
String connectionType = "http";
|
||||
|
||||
final TextEditingController ipDomainController = TextEditingController();
|
||||
String? ipDomainError;
|
||||
|
||||
final TextEditingController pathController = TextEditingController();
|
||||
String? pathError;
|
||||
|
||||
final TextEditingController portController = TextEditingController();
|
||||
String? portError;
|
||||
|
||||
final TextEditingController userController = TextEditingController();
|
||||
|
||||
final TextEditingController passwordController = TextEditingController();
|
||||
|
||||
bool defaultServer = false;
|
||||
|
||||
Widget sectionLabel(String label) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 20,
|
||||
vertical: 30
|
||||
),
|
||||
child: Text(
|
||||
label,
|
||||
style: const TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget textField({
|
||||
required String label,
|
||||
required TextEditingController controller,
|
||||
String? error,
|
||||
required IconData icon,
|
||||
TextInputType? keyboardType
|
||||
}) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20),
|
||||
child: TextFormField(
|
||||
controller: controller,
|
||||
decoration: InputDecoration(
|
||||
prefixIcon: Icon(icon),
|
||||
errorText: error,
|
||||
border: const OutlineInputBorder(
|
||||
borderRadius: BorderRadius.all(
|
||||
Radius.circular(10)
|
||||
)
|
||||
),
|
||||
labelText: label,
|
||||
),
|
||||
keyboardType: keyboardType,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Stack(
|
||||
children: [
|
||||
Scaffold(
|
||||
backgroundColor: Theme.of(context).dialogBackgroundColor,
|
||||
appBar: AppBar(
|
||||
systemOverlayStyle: systemUiOverlayStyleConfig(context),
|
||||
title: Text(AppLocalizations.of(context)!.createConnection),
|
||||
elevation: 5,
|
||||
actions: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(right: 10),
|
||||
child: IconButton(
|
||||
tooltip: AppLocalizations.of(context)!.connect,
|
||||
onPressed: () => {},
|
||||
icon: const Icon(Icons.login_rounded)
|
||||
),
|
||||
),
|
||||
],
|
||||
toolbarHeight: 70,
|
||||
),
|
||||
body: ListView(
|
||||
children: [
|
||||
sectionLabel(AppLocalizations.of(context)!.general),
|
||||
textField(
|
||||
label: AppLocalizations.of(context)!.name,
|
||||
controller: nameController,
|
||||
icon: Icons.badge_rounded
|
||||
),
|
||||
sectionLabel(AppLocalizations.of(context)!.connection),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: [
|
||||
CustomRadioToggle(
|
||||
groupSelected: connectionType,
|
||||
value: 'http',
|
||||
label: 'HTTP',
|
||||
onTap: (value) => setState(() => connectionType = value)
|
||||
),
|
||||
CustomRadioToggle(
|
||||
groupSelected: connectionType,
|
||||
value: 'https',
|
||||
label: 'HTTPS',
|
||||
onTap: (value) => setState(() => connectionType = value)
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
textField(
|
||||
label: AppLocalizations.of(context)!.ipDomain,
|
||||
controller: ipDomainController,
|
||||
icon: Icons.link_rounded,
|
||||
error: ipDomainError,
|
||||
keyboardType: TextInputType.url
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
textField(
|
||||
label: AppLocalizations.of(context)!.path,
|
||||
controller: pathController,
|
||||
icon: Icons.route_rounded,
|
||||
error: pathError
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
textField(
|
||||
label: AppLocalizations.of(context)!.port,
|
||||
controller: portController,
|
||||
icon: Icons.numbers_rounded,
|
||||
error: portError,
|
||||
keyboardType: TextInputType.number
|
||||
),
|
||||
sectionLabel(AppLocalizations.of(context)!.authentication),
|
||||
textField(
|
||||
label: AppLocalizations.of(context)!.username,
|
||||
controller: userController,
|
||||
icon: Icons.person_rounded,
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
textField(
|
||||
label: AppLocalizations.of(context)!.password,
|
||||
controller: passwordController,
|
||||
icon: Icons.lock_rounded,
|
||||
keyboardType: TextInputType.visiblePassword
|
||||
),
|
||||
sectionLabel(AppLocalizations.of(context)!.other),
|
||||
Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
onTap: () => setState(() => defaultServer = !defaultServer),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
AppLocalizations.of(context)!.defaultServer,
|
||||
style: const TextStyle(
|
||||
fontSize: 15,
|
||||
),
|
||||
),
|
||||
Switch(
|
||||
value: defaultServer,
|
||||
onChanged: (value) => setState(() => defaultServer = value),
|
||||
activeColor: Theme.of(context).primaryColor,
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +1,17 @@
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
|
||||
|
||||
import 'package:adguard_home_manager/models/app_screen.dart';
|
||||
import 'package:adguard_home_manager/config/app_screens.dart';
|
||||
|
||||
class BottomNavBar extends StatelessWidget {
|
||||
final List<AppScreen> screens;
|
||||
final int selectedScreen;
|
||||
final void Function(int) onSelect;
|
||||
|
||||
const BottomNavBar({
|
||||
Key? key,
|
||||
Key? key,
|
||||
required this.screens,
|
||||
required this.selectedScreen,
|
||||
required this.onSelect,
|
||||
}) : super(key: key);
|
||||
|
|
@ -23,6 +26,9 @@ class BottomNavBar extends StatelessWidget {
|
|||
case 'settings':
|
||||
return AppLocalizations.of(context)!.settings;
|
||||
|
||||
case 'connect':
|
||||
return AppLocalizations.of(context)!.connect;
|
||||
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
|
|
|
|||
65
lib/widgets/custom_radio_toggle.dart
Normal file
65
lib/widgets/custom_radio_toggle.dart
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import 'package:flutter/material.dart';
|
||||
|
||||
class CustomRadioToggle extends StatelessWidget {
|
||||
final String groupSelected;
|
||||
final String value;
|
||||
final String label;
|
||||
final void Function(String) onTap;
|
||||
|
||||
const CustomRadioToggle({
|
||||
Key? key,
|
||||
required this.groupSelected,
|
||||
required this.value,
|
||||
required this.label,
|
||||
required this.onTap,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Material(
|
||||
borderRadius: BorderRadius.circular(30),
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
onTap: () => onTap(value),
|
||||
borderRadius: BorderRadius.circular(30),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 15,
|
||||
vertical: 5
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: groupSelected == value
|
||||
? Theme.of(context).primaryColor
|
||||
: Theme.of(context).primaryColor.withOpacity(0.05),
|
||||
border: Border.all(
|
||||
color: Theme.of(context).primaryColor
|
||||
),
|
||||
borderRadius: BorderRadius.circular(30)
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
if (groupSelected == value) ...[
|
||||
const Icon(
|
||||
Icons.check,
|
||||
color: Colors.white,
|
||||
size: 18,
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
],
|
||||
Text(
|
||||
label,
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
color: groupSelected == value
|
||||
? Colors.white
|
||||
: null
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue