feat: replace DropdownButtonFormField with ADPopupMenu for improved UI consistency

This commit is contained in:
Udhay-Adithya
2025-06-19 13:04:30 +05:30
parent ff23413164
commit 0ec2120741
4 changed files with 63 additions and 81 deletions

View File

@@ -2,6 +2,7 @@ import 'package:apidash/screens/common_widgets/auth_textfield.dart';
import 'package:apidash_core/consts.dart';
import 'package:apidash_core/models/auth/api_auth_model.dart';
import 'package:apidash_core/models/auth/auth_api_key_model.dart';
import 'package:apidash_design_system/apidash_design_system.dart';
import 'package:flutter/material.dart';
class ApiKeyAuthFields extends StatefulWidget {
@@ -40,35 +41,26 @@ class _ApiKeyAuthFieldsState extends State<ApiKeyAuthFields> {
Text(
"Add to",
style: TextStyle(
fontWeight: FontWeight.bold,
fontWeight: FontWeight.normal,
fontSize: 14,
),
),
SizedBox(
height: 4,
),
DropdownButtonFormField<String>(
value: _addKeyTo,
decoration: InputDecoration(
constraints: BoxConstraints(
maxWidth: MediaQuery.sizeOf(context).width - 100,
),
contentPadding: const EdgeInsets.all(18),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
),
),
items: [
DropdownMenuItem(
value: 'header',
child: Text('Header'),
),
DropdownMenuItem(
value: 'query',
child: Text('Query Params'),
),
ADPopupMenu<String>(
value: _addKeyTo == 'header' ? 'Header' : 'Query Params',
values: const [
('header', 'Header'),
('query', 'Query Params'),
],
tooltip: "Select where to add API key",
isOutlined: true,
onChanged: (String? newLocation) {
if (newLocation != null) {
setState(() {
_addKeyTo = newLocation;
});
_updateApiKeyAuth();
}
},
@@ -82,7 +74,7 @@ class _ApiKeyAuthFieldsState extends State<ApiKeyAuthFields> {
const SizedBox(height: 16),
AuthTextField(
controller: _keyController,
hintText: "API KeyName",
hintText: "API Key",
isObscureText: true,
onChanged: (value) => _updateApiKeyAuth(),
),

View File

@@ -1,4 +1,5 @@
import 'package:apidash/screens/common_widgets/auth_textfield.dart';
import 'package:apidash_design_system/apidash_design_system.dart';
import 'package:flutter/material.dart';
import 'package:apidash_core/apidash_core.dart';
@@ -42,33 +43,25 @@ class _JwtAuthFieldsState extends State<JwtAuthFields> {
Text(
"Add JWT token to",
style: TextStyle(
fontWeight: FontWeight.bold,
fontWeight: FontWeight.normal,
fontSize: 14,
),
),
SizedBox(height: 4),
DropdownButtonFormField<String>(
value: _addTokenTo,
decoration: InputDecoration(
constraints: BoxConstraints(
maxWidth: MediaQuery.sizeOf(context).width - 100,
),
contentPadding: const EdgeInsets.all(18),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
),
),
items: [
DropdownMenuItem(
value: 'header',
child: Text('Request Header'),
),
DropdownMenuItem(
value: 'query',
child: Text('Query Parameters'),
),
ADPopupMenu<String>(
value:
_addTokenTo == 'header' ? 'Request Header' : 'Query Parameters',
values: const [
('header', 'Request Header'),
('query', 'Query Parameters'),
],
tooltip: "Select where to add JWT token",
isOutlined: true,
onChanged: (String? newAddTokenTo) {
if (newAddTokenTo != null) {
setState(() {
_addTokenTo = newAddTokenTo;
});
_updateJwtAuth();
}
},
@@ -77,33 +70,25 @@ class _JwtAuthFieldsState extends State<JwtAuthFields> {
Text(
"Algorithm",
style: TextStyle(
fontWeight: FontWeight.bold,
fontWeight: FontWeight.normal,
fontSize: 14,
),
),
SizedBox(height: 4),
DropdownButtonFormField<String>(
ADPopupMenu<String>(
value: _algorithm,
decoration: InputDecoration(
constraints: BoxConstraints(
maxWidth: MediaQuery.sizeOf(context).width - 100,
),
contentPadding: const EdgeInsets.all(18),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
),
),
items: [
'HS256',
'HS384',
'HS512',
].map((algorithm) {
return DropdownMenuItem(
value: algorithm,
child: Text(algorithm),
);
}).toList(),
values: const [
('HS256', 'HS256'),
('HS384', 'HS384'),
('HS512', 'HS512'),
],
tooltip: "Select JWT algorithm",
isOutlined: true,
onChanged: (String? newAlgorithm) {
if (newAlgorithm != null) {
setState(() {
_algorithm = newAlgorithm;
});
_updateJwtAuth();
}
},
@@ -120,7 +105,8 @@ class _JwtAuthFieldsState extends State<JwtAuthFields> {
title: Text(
"Secret is Base64 encoded",
style: TextStyle(
fontWeight: FontWeight.bold,
fontWeight: FontWeight.normal,
fontSize: 14,
),
),
value: _isSecretBase64Encoded,
@@ -138,7 +124,8 @@ class _JwtAuthFieldsState extends State<JwtAuthFields> {
Text(
"Payload (JSON format)",
style: TextStyle(
fontWeight: FontWeight.bold,
fontWeight: FontWeight.normal,
fontSize: 14,
),
),
SizedBox(height: 4),

View File

@@ -45,7 +45,8 @@ class _AuthFieldState extends State<AuthTextField> {
Text(
widget.hintText,
style: TextStyle(
fontWeight: FontWeight.bold,
fontWeight: FontWeight.normal,
fontSize: 14,
),
),
const SizedBox(height: 6),

View File

@@ -2,6 +2,7 @@ import 'package:apidash/screens/common_widgets/auth/api_key_auth_fields.dart';
import 'package:apidash/screens/common_widgets/auth/basic_auth_fields.dart';
import 'package:apidash/screens/common_widgets/auth/bearer_auth_fields.dart';
import 'package:apidash/screens/common_widgets/auth/jwt_auth_fields.dart';
import 'package:apidash_design_system/widgets/popup_menu.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:apidash_core/apidash_core.dart';
@@ -39,20 +40,20 @@ class EditAuthType extends ConsumerWidget {
SizedBox(
height: 8,
),
DropdownButtonFormField<APIAuthType>(
value: currentAuthType,
elevation: 4,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(9),
),
),
items: APIAuthType.values.map((type) {
return DropdownMenuItem(
value: type,
child: Text(type.name.capitalize()),
);
}).toList(),
ADPopupMenu<APIAuthType>(
value: currentAuthType.name.capitalize(),
values: const [
(APIAuthType.none, 'None'),
(APIAuthType.basic, 'Basic'),
(APIAuthType.apiKey, 'API Key'),
(APIAuthType.bearer, 'Bearer'),
(APIAuthType.jwt, 'JWT'),
(APIAuthType.digest, 'Digest'),
(APIAuthType.oauth1, 'OAuth 1.0'),
(APIAuthType.oauth2, 'OAuth 2.0'),
],
tooltip: "Select Authentication Type",
isOutlined: true,
onChanged: (APIAuthType? newType) {
final selectedRequest = ref.read(selectedRequestModelProvider);
if (newType != null) {
@@ -72,6 +73,7 @@ class EditAuthType extends ConsumerWidget {
);
}
// ...existing code...
Widget _buildAuthFields(
BuildContext context,
WidgetRef ref,