edit key word api added

This commit is contained in:
amirrezaghabeli
2026-04-25 12:13:49 +03:30
parent eb75952b8e
commit 00a3180499
13 changed files with 542 additions and 69 deletions
+2 -1
View File
@@ -12,6 +12,7 @@ import '../strings/profile_strings.dart';
import '../widgets/main_data_tab.dart';
import '../widgets/members_tab.dart';
import '../widgets/profile_tab_bar.dart';
import '../widgets/subject_tab.dart';
class DesktopProfilePage extends StatefulWidget {
const DesktopProfilePage({super.key});
@@ -98,7 +99,7 @@ class _DesktopProfilePageState extends State<DesktopProfilePage>
onLogout: () => viewModel.logout(),
),
const MembersTab(),
const Center(child: Text('Subject Tab Content')),
const SubjectTab(),
],
),
),
+1 -1
View File
@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:tm_app/core/routes/app_routes.dart';
import 'package:tm_app/view_models/profile_view_model.dart';
import 'package:tm_app/views/profile/widgets/main_data_tab.dart';
import '../../../core/constants/common_strings.dart';
import '../../../core/theme/colors.dart';
@@ -11,6 +10,7 @@ import '../../../core/utils/size_config.dart';
import '../../../view_models/auth_view_model.dart';
import '../../shared/tender_app_bar.dart';
import '../strings/profile_strings.dart';
import '../widgets/main_data_tab.dart';
import '../widgets/members_tab.dart';
import '../widgets/profile_tab_bar.dart';
import '../widgets/subject_tab.dart';
@@ -1,29 +1,53 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:go_router/go_router.dart';
import 'package:tm_app/core/utils/size_config.dart';
import 'package:tm_app/views/login/widgets/widgets.dart';
import '../../../core/constants/assets.dart';
import '../../../core/theme/colors.dart';
class EditKeyWordBottomSheet extends StatelessWidget {
const EditKeyWordBottomSheet({super.key});
class EditKeyWordBottomSheet extends StatefulWidget {
const EditKeyWordBottomSheet({
required this.keyWords,
required this.isDesktop,
this.onSubmit,
super.key,
});
final List<String> keyWords;
final Future<void> Function(List<String> keyWords)? onSubmit;
final bool isDesktop;
@override
State<EditKeyWordBottomSheet> createState() => _EditKeyWordBottomSheetState();
}
class _EditKeyWordBottomSheetState extends State<EditKeyWordBottomSheet> {
final TextEditingController _controller = TextEditingController();
final FocusNode _focusNode = FocusNode();
late final List<String> _keywords = List.from(widget.keyWords);
@override
Widget build(BuildContext context) {
return Wrap(
children: [
Container(
width: double.infinity,
padding: EdgeInsets.symmetric(
horizontal: 24.0.w(),
vertical: 24.0.h(),
padding: EdgeInsets.only(
left: 24.0.w(),
right: 24.0.w(),
top: 24.0.h(),
bottom: MediaQuery.of(context).viewInsets.bottom,
),
decoration: BoxDecoration(
color: AppColors.backgroundColor,
borderRadius: const BorderRadius.vertical(top: Radius.circular(24)),
borderRadius: BorderRadius.vertical(
top: const Radius.circular(24),
bottom:
widget.isDesktop ? const Radius.circular(24) : Radius.zero,
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -35,14 +59,17 @@ class EditKeyWordBottomSheet extends StatelessWidget {
fontWeight: FontWeight.w600,
),
),
SvgPicture.asset(
AssetsManager.closeCircle,
width: 20.0.w(),
height: 20.0.w(),
fit: BoxFit.cover,
colorFilter: ColorFilter.mode(
AppColors.grey60,
BlendMode.srcIn,
IconButton(
onPressed: () => context.pop(),
icon: SvgPicture.asset(
AssetsManager.closeCircle,
width: 20.0.w(),
height: 20.0.w(),
fit: BoxFit.cover,
colorFilter: ColorFilter.mode(
AppColors.grey60,
BlendMode.srcIn,
),
),
),
],
@@ -51,6 +78,22 @@ class EditKeyWordBottomSheet extends StatelessWidget {
Divider(color: AppColors.grey20),
SizedBox(height: 24.0.h()),
TextField(
focusNode: _focusNode,
controller: _controller,
onSubmitted: (value) {
if (value.trim().isEmpty) {
return;
}
setState(() {
_keywords.add(value);
});
_controller.clear();
Future.delayed(const Duration(milliseconds: 50), () {
_focusNode.requestFocus();
});
},
decoration: InputDecoration(
hintText: 'Key Word',
hintStyle: TextStyle(
@@ -77,22 +120,40 @@ class EditKeyWordBottomSheet extends StatelessWidget {
),
),
SizedBox(height: 16.0.h()),
Wrap(
spacing: 8,
runSpacing: 16.0.h(),
children: [
_chip(label: 'UIUX', backgroundColor: Colors.green[200]!),
_chip(
label: 'Lorem ipsum',
backgroundColor: Colors.orange[100]!,
SizedBox(
height: 200.0.h(), // Set a fixed height for the container
child: SingleChildScrollView(
child: Wrap(
spacing: 8,
runSpacing: 16.0.h(),
children:
_keywords
.map(
(e) => _chip(
label: e,
backgroundColor: Colors.green[200]!,
onDelete:
() => setState(() {
_keywords.remove(e);
}),
),
)
.toList(),
// [
// _chip(label: 'UIUX', backgroundColor: Colors.green[200]!),
// _chip(
// label: 'Lorem ipsum',
// backgroundColor: Colors.orange[100]!,
// ),
// _chip(label: 'sample', backgroundColor: Colors.grey[300]!),
// _chip(label: 'Unknown', backgroundColor: Colors.red[200]!),
// _chip(
// label: 'Lorem ipsum 02',
// backgroundColor: Colors.blue[100]!,
// ),
// ],
),
_chip(label: 'sample', backgroundColor: Colors.grey[300]!),
_chip(label: 'Unknown', backgroundColor: Colors.red[200]!),
_chip(
label: 'Lorem ipsum 02',
backgroundColor: Colors.blue[100]!,
),
],
),
),
SizedBox(height: 32.0.h()),
BaseButton(
@@ -100,8 +161,14 @@ class EditKeyWordBottomSheet extends StatelessWidget {
text: 'Submit Request',
backgroundColor: AppColors.primary20,
textColor: AppColors.mainBlue,
onPressed: () {},
onPressed: () async {
await widget.onSubmit?.call(_keywords);
if (context.mounted) {
context.pop();
}
},
),
SizedBox(height: 24.0.h()),
],
),
),
@@ -109,11 +176,15 @@ class EditKeyWordBottomSheet extends StatelessWidget {
);
}
Widget _chip({required String label, required Color backgroundColor}) {
Widget _chip({
required String label,
required Color backgroundColor,
required VoidCallback onDelete,
}) {
return InputChip(
label: Text(label),
backgroundColor: backgroundColor,
onDeleted: () {},
onDeleted: onDelete,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
side: const BorderSide(color: Colors.transparent),
@@ -0,0 +1,297 @@
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:tm_app/core/utils/size_config.dart';
// Note: Ensure your size_config and theme imports are present
// import 'package:tm_app/core/utils/size_config.dart';
// import 'package:tm_app/core/theme/colors.dart';
class EditKeyWordBottomSheet extends StatefulWidget {
const EditKeyWordBottomSheet({super.key});
@override
State<EditKeyWordBottomSheet> createState() => _EditKeyWordBottomSheetState();
}
class _EditKeyWordBottomSheetState extends State<EditKeyWordBottomSheet> {
final List<String> _keywords = [
'1234',
'Lorem ipsum',
'sample',
'Unknown',
'Lorem ipsum 02',
];
// Location selection state
bool _isDropdownOpen = false;
final List<Map<String, String>> _selectedCountries = [
{'code': 'NO', 'name': 'Norway', 'flag': '🇳🇴'},
{'code': 'SE', 'name': 'Sweden', 'flag': '🇸🇪'},
];
final List<Map<String, String>> _allCountries = [
{'code': 'AU', 'name': 'Australia', 'flag': '🇦🇺'},
{'code': 'AT', 'name': 'Austria', 'flag': '🇦🇹'},
{'code': 'AZ', 'name': 'Azerbaijan', 'flag': '🇦🇿'},
{'code': 'BS', 'name': 'Bahamas', 'flag': '🇧🇸'},
{'code': 'BH', 'name': 'Bahrain', 'flag': '🇧🇭'},
];
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
padding: EdgeInsets.only(
left: 24.0.w(),
right: 24.0.w(),
top: 24.0.h(),
bottom: MediaQuery.of(context).viewInsets.bottom + 24.0.h(),
),
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(top: Radius.circular(32)),
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// KEY WORD SECTION
_buildSectionHeader('Key Word'),
SizedBox(height: 16.0.h()),
Wrap(
spacing: 8,
runSpacing: 12.0.h(),
children: _keywords.map((e) => _buildKeywordChip(e)).toList(),
),
SizedBox(height: 32.0.h()),
const Divider(color: Color(0xFFF1F1F1)),
SizedBox(height: 24.0.h()),
// LOCATION SECTION
_buildSectionHeader('Location'),
SizedBox(height: 16.0.h()),
Stack(
clipBehavior: Clip.none,
children: [
// 1. Selected Country Chips (Below the input)
Padding(
padding: EdgeInsets.only(top: 64.0.h()),
child: Wrap(
spacing: 12,
runSpacing: 8,
children:
_selectedCountries
.map((c) => _buildCountryChip(c))
.toList(),
),
),
// 2. The Pseudo-TextField
GestureDetector(
onTap: () => setState(() => _isDropdownOpen = !_isDropdownOpen),
child: Container(
height: 52.0.h(),
padding: const EdgeInsets.symmetric(horizontal: 16),
decoration: BoxDecoration(
border: Border.all(color: const Color(0xFFD1E3FF)),
borderRadius: BorderRadius.circular(12),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Location',
style: TextStyle(
color: Colors.grey.shade400,
fontSize: 16.0.sp(),
),
),
Icon(
_isDropdownOpen
? Icons.keyboard_arrow_up
: Icons.keyboard_arrow_down,
color: Colors.grey,
),
],
),
),
),
// 3. Floating Dropdown Menu (Positioned ABOVE the input field)
if (_isDropdownOpen)
Positioned(
bottom: 60.0.h(), // Sits above the text field
left: 0,
right: 0,
child: Material(
elevation: 12,
shadowColor: Colors.black26,
borderRadius: BorderRadius.circular(12),
color: Colors.white,
child: Container(
constraints: BoxConstraints(maxHeight: 220.0.h()),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.grey.shade100),
),
child: ListView.separated(
shrinkWrap: true,
padding: EdgeInsets.zero,
itemCount: _allCountries.length,
separatorBuilder:
(context, index) => const Divider(
height: 1,
color: Color(0xFFF5F5F5),
),
itemBuilder: (context, index) {
final country = _allCountries[index];
return ListTile(
contentPadding: const EdgeInsets.symmetric(
horizontal: 16,
),
leading: Text(
country['flag']!,
style: const TextStyle(fontSize: 22),
),
title: Text(
country['name']!,
style: TextStyle(
fontSize: 15.0.sp(),
color: Colors.black87,
),
),
onTap: () {
setState(() {
// Add if not already selected
if (!_selectedCountries.any(
(c) => c['code'] == country['code'],
)) {
_selectedCountries.add(country);
}
_isDropdownOpen = false;
});
},
);
},
),
),
),
),
],
),
SizedBox(height: 40.0.h()),
// SAVE BUTTON
SizedBox(
width: double.infinity,
height: 54.0.h(),
child: ElevatedButton(
onPressed: () => context.pop(),
style: ElevatedButton.styleFrom(
backgroundColor: const Color(
0xFFE8F1FF,
), // Matches "Save" blue background
foregroundColor: const Color(
0xFF1A73E8,
), // Matches "Save" text color
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(28),
),
),
child: Text(
'Save',
style: TextStyle(
fontSize: 16.0.sp(),
fontWeight: FontWeight.bold,
),
),
),
),
],
),
);
}
Widget _buildSectionHeader(String title) {
return Row(
children: [
Text(
title,
style: TextStyle(
fontSize: 18.0.sp(),
fontWeight: FontWeight.w500,
color: const Color(0xFF616161),
),
),
SizedBox(width: 8.0.w()),
Icon(
Icons.edit_outlined,
size: 20.0.w(),
color: const Color(0xFF757575),
),
],
);
}
Widget _buildKeywordChip(String label) {
// Coloring logic to match screenshot
Color bg = const Color(0xFFF5F5F5);
Color text = const Color(0xFF424242);
if (label == '1234') bg = const Color(0xFFE8F5E9);
if (label == 'Lorem ipsum') bg = const Color(0xFFFFF3E0);
if (label == 'Unknown') bg = const Color(0xFFFFEBEE);
if (label == 'Lorem ipsum 02' || label == 'sample')
bg = const Color(0xFFECEFF1);
return Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
decoration: BoxDecoration(
color: bg,
borderRadius: BorderRadius.circular(8),
),
child: Text(
label,
style: TextStyle(
color: text,
fontSize: 14.0.sp(),
fontWeight: FontWeight.w400,
),
),
);
}
Widget _buildCountryChip(Map<String, String> country) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
decoration: BoxDecoration(
color: const Color(0xFFF5F5F5),
borderRadius: BorderRadius.circular(8),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
country['code']!,
style: TextStyle(
fontSize: 14.0.sp(),
fontWeight: FontWeight.w600,
color: const Color(0xFF424242),
),
),
SizedBox(width: 6.0.w()),
Text(country['flag']!, style: const TextStyle(fontSize: 18)),
SizedBox(width: 6.0.w()),
GestureDetector(
onTap: () => setState(() => _selectedCountries.remove(country)),
child: const Icon(Icons.cancel, size: 18, color: Colors.grey),
),
],
),
);
}
}
+57 -15
View File
@@ -1,16 +1,22 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:go_router/go_router.dart';
import 'package:provider/provider.dart';
import 'package:tm_app/core/constants/assets.dart';
import 'package:tm_app/core/theme/colors.dart';
import 'package:tm_app/core/utils/size_config.dart';
import '../../../view_models/profile_view_model.dart';
import 'edit_key_word_bottom_sheet.dart';
class SubjectTab extends StatelessWidget {
const SubjectTab({super.key});
final bool isDesktop = true;
@override
Widget build(BuildContext context) {
final viewModel = context.read<ProfileViewModel>();
return Column(
children: [
SizedBox(height: 36.0.h()),
@@ -20,26 +26,62 @@ class SubjectTab extends StatelessWidget {
SizedBox(height: 24.0.h()),
_keyWord(
onEditPressed: () {
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (_) {
return const EditKeyWordBottomSheet();
},
);
if (isDesktop) {
showDialog(
context: context,
builder: (_) {
return Dialog(
child: SizedBox(
width: 560,
child: EditKeyWordBottomSheet(
isDesktop: true,
keyWords: viewModel.profileData?.keywords ?? [],
onSubmit: (keyWords) async {
context.pop();
await viewModel.updateProfileKeyWords(
keyWords: keyWords,
);
},
),
),
);
},
);
} else {
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (_) {
return EditKeyWordBottomSheet(
isDesktop: false,
keyWords: viewModel.profileData?.keywords ?? [],
onSubmit: (keyWords) async {
context.pop();
await viewModel.updateProfileKeyWords(keyWords: keyWords);
},
);
},
);
}
},
),
SizedBox(height: 16.0.h()),
Wrap(
spacing: 8,
runSpacing: 16.0.h(),
children: [
_chip(label: 'UIUX', backgroundColor: Colors.green[200]!),
_chip(label: 'Lorem ipsum', backgroundColor: Colors.orange[100]!),
_chip(label: 'sample', backgroundColor: Colors.grey[300]!),
_chip(label: 'Unknown', backgroundColor: Colors.red[200]!),
_chip(label: 'Lorem ipsum 02', backgroundColor: Colors.blue[100]!),
],
// children: [
// _chip(label: 'UIUX', backgroundColor: Colors.green[200]!),
// _chip(label: 'Lorem ipsum', backgroundColor: Colors.orange[100]!),
// _chip(label: 'sample', backgroundColor: Colors.grey[300]!),
// _chip(label: 'Unknown', backgroundColor: Colors.red[200]!),
// _chip(label: 'Lorem ipsum 02', backgroundColor: Colors.blue[100]!),
// ],
children:
viewModel.profileData!.keywords!
.map(
(e) => _chip(label: e, backgroundColor: Colors.green[200]!),
)
.toList(),
),
SizedBox(height: 24.0.h()),
Divider(color: AppColors.grey20),
@@ -118,7 +160,7 @@ class SubjectTab extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'Budget',
'Key Word',
style: TextStyle(
fontSize: 16.0.sp(),
fontWeight: FontWeight.w400,