feat: Refactor ExperiencePage and ExperienceCustomInput to use design system components and remove deprecated ExperienceBadge

This commit is contained in:
Achintha Isuru
2026-01-24 21:08:55 -05:00
parent f81e1949d1
commit d6cceaceec
4 changed files with 24 additions and 133 deletions

View File

@@ -18,7 +18,7 @@ extension ProfileNavigator on IModularNavigator {
/// Navigates to the experience page.
void pushExperience() {
pushNamed('/profile/experience');
pushNamed('./experience');
}
/// Navigates to the attire page.

View File

@@ -4,7 +4,6 @@ import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_modular/flutter_modular.dart';
import '../blocs/experience_bloc.dart';
import '../widgets/experience_badge.dart';
import '../widgets/experience_custom_input.dart';
import '../widgets/experience_section_title.dart';
@@ -63,21 +62,9 @@ class _ExperienceView extends StatelessWidget {
return Scaffold(
backgroundColor: UiColors.background,
appBar: AppBar(
backgroundColor: UiColors.bgPopup,
elevation: 0,
leading: IconButton(
icon: Icon(UiIcons.chevronLeft, color: UiColors.textSecondary),
onPressed: () => Modular.to.pop(),
),
title: Text(
i18n.title,
style: UiTypography.title1m.copyWith(color: UiColors.textPrimary),
),
bottom: PreferredSize(
preferredSize: const Size.fromHeight(1.0),
child: Container(color: UiColors.border, height: 1.0),
),
appBar: UiAppBar(
title: i18n.title,
onLeadingPressed: () => Modular.to.pop(),
),
body: BlocConsumer<ExperienceBloc, ExperienceState>(
listener: (context, state) {
@@ -105,12 +92,14 @@ class _ExperienceView extends StatelessWidget {
runSpacing: UiConstants.space2,
children: state.availableIndustries
.map(
(i) => ExperienceBadge(
(i) => UiChip(
label: _getIndustryLabel(i18n.industries, i),
isSelected: state.selectedIndustries.contains(i),
onTap: () => BlocProvider.of<ExperienceBloc>(context)
.add(ExperienceIndustryToggled(i)),
isIndustry: true,
variant: state.selectedIndustries.contains(i)
? UiChipVariant.primary
: UiChipVariant.secondary,
),
)
.toList(),
@@ -127,11 +116,14 @@ class _ExperienceView extends StatelessWidget {
runSpacing: UiConstants.space2,
children: state.availableSkills
.map(
(s) => ExperienceBadge(
(s) => UiChip(
label: _getSkillLabel(i18n.skills, s),
isSelected: state.selectedSkills.contains(s),
onTap: () => BlocProvider.of<ExperienceBloc>(context)
.add(ExperienceSkillToggled(s)),
variant: state.selectedSkills.contains(s)
? UiChipVariant.primary
: UiChipVariant.secondary,
),
)
.toList(),
@@ -171,24 +163,9 @@ class _ExperienceView extends StatelessWidget {
spacing: UiConstants.space2,
runSpacing: UiConstants.space2,
children: customSkills.map((skill) {
return Container(
padding: EdgeInsets.symmetric(
horizontal: UiConstants.space3,
vertical: UiConstants.space2,
),
decoration: BoxDecoration(
color: UiColors.accent,
borderRadius: UiConstants.radiusFull,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
skill,
style: UiTypography.body2m.copyWith(color: UiColors.textPrimary),
),
],
),
return UiChip(
label: skill,
variant: UiChipVariant.accent,
);
}).toList(),
),
@@ -206,32 +183,22 @@ class _ExperienceView extends StatelessWidget {
child: SafeArea(
child: SizedBox(
width: double.infinity,
child: ElevatedButton(
child: UiButton.primary(
onPressed: state.status == ExperienceStatus.loading
? null
: () => BlocProvider.of<ExperienceBloc>(context).add(ExperienceSubmitted()),
style: ElevatedButton.styleFrom(
backgroundColor: UiColors.primary,
foregroundColor: UiColors.primaryForeground,
padding: EdgeInsets.symmetric(vertical: UiConstants.space4),
shape: RoundedRectangleBorder(
borderRadius: UiConstants.radiusFull,
),
elevation: 0,
),
fullWidth: true,
text: state.status == ExperienceStatus.loading ? null : i18n.save_button,
child: state.status == ExperienceStatus.loading
? SizedBox(
height: 20.0,
width: 20.0,
child: CircularProgressIndicator(
strokeWidth: 2,
valueColor: AlwaysStoppedAnimation<Color>(UiColors.primaryForeground),
valueColor: AlwaysStoppedAnimation<Color>(UiColors.white), // UiColors.primaryForeground is white mostly
),
)
: Text(
i18n.save_button,
style: UiTypography.title2b,
),
: null,
),
),
),

View File

@@ -1,43 +0,0 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
class ExperienceBadge extends StatelessWidget {
final String label;
final bool isSelected;
final VoidCallback onTap;
final bool isIndustry;
const ExperienceBadge({
super.key,
required this.label,
required this.isSelected,
required this.onTap,
this.isIndustry = false,
});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Container(
padding: EdgeInsets.symmetric(
horizontal: UiConstants.space3,
vertical: UiConstants.space2,
),
decoration: BoxDecoration(
color: isSelected ? UiColors.primary : Colors.transparent,
borderRadius: UiConstants.radiusFull,
border: Border.all(
color: isSelected ? UiColors.primary : UiColors.border,
),
),
child: Text(
label,
style: UiTypography.body2m.copyWith(
color: isSelected ? UiColors.primaryForeground : UiColors.textSecondary,
),
),
),
);
}
}

View File

@@ -33,49 +33,16 @@ class _ExperienceCustomInputState extends State<ExperienceCustomInput> {
return Row(
children: [
Expanded(
child: TextField(
child: UiTextField(
controller: _controller,
onSubmitted: (_) => _addSkill(),
style: UiTypography.body1r.copyWith(color: UiColors.textPrimary),
decoration: InputDecoration(
hintText: t.staff.onboarding.experience.custom_skill_hint,
hintStyle: UiTypography.body1r.copyWith(color: UiColors.textPlaceholder),
contentPadding: EdgeInsets.symmetric(
horizontal: UiConstants.space3,
vertical: UiConstants.space3,
),
border: OutlineInputBorder(
borderRadius: UiConstants.radiusMd,
borderSide: BorderSide(color: UiColors.border),
),
enabledBorder: OutlineInputBorder(
borderRadius: UiConstants.radiusMd,
borderSide: BorderSide(color: UiColors.border),
),
focusedBorder: OutlineInputBorder(
borderRadius: UiConstants.radiusMd,
borderSide: BorderSide(color: UiColors.primary),
),
),
fillColor: UiColors.bgPopup,
filled: true,
),
hintText: t.staff.onboarding.experience.custom_skill_hint,
),
),
SizedBox(width: UiConstants.space2),
InkWell(
UiIconButton.primary(
icon: UiIcons.add,
onTap: _addSkill,
child: Container(
width: 48,
height: 48,
decoration: BoxDecoration(
color: UiColors.primary,
borderRadius: BorderRadius.circular(UiConstants.radiusMd),
),
child: Center(
child: Icon(UiIcons.add, color: UiColors.primaryForeground),
),
),
),
],
);