Expandable Language List

lib/pages/user_data_page.dart

@@ -47,6 +47,8 @@ class _UserDataPageState extends State<UserDataPage> {
   MyLocation? _mainLocationFromDb;
   MyLocation? _secondaryLocationFromDb;
   bool _secondLocationExists = false;
+  bool _isLanguageListExpanded = false;
+  static const int _initialLanguageListItemCount = 5;
 
   @override
   void initState() {
@@ -367,8 +369,8 @@ class _UserDataPageState extends State<UserDataPage> {
     } else {
       return Scaffold(
         appBar: AppBar(
-          title:
-              Text('${widget.isRegProcess ? 'About you' : 'Edit your data'} '),
+          title: Text(
+              '${widget.isRegProcess ? 'Personal Details' : 'Edit your details'} '),
           centerTitle: true,
           actions: [
             if (widget.isEditMode && !widget.isRegProcess)
@@ -471,7 +473,12 @@ class _UserDataPageState extends State<UserDataPage> {
                 ],
               ),
               const SizedBox(height: 20),
-              const TextBold(text: 'Age'),
+              const TextWithBold(
+                boldText: 'Age ',
+                trailingText: ' (optional)',
+                boldSize: 18,
+                trailingSize: 12,
+              ),
               Row(
                 children: [
                   const Padding(padding: EdgeInsets.symmetric(horizontal: 8)),
@@ -534,10 +541,16 @@ class _UserDataPageState extends State<UserDataPage> {
               ),
               const SizedBox(height: 20),
               const Divider(),
-              TextBold(
-                text: 'Language: (${_selectedLanguages.length} selected)',
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  TextBold(
+                    text: 'Language: (${_selectedLanguages.length} selected)',
+                  ),
+                  _buildExpandCollapseButton(),
+                ],
               ),
-              ...languagesList.map(buildSingleCheckbox),
+              ..._buildLanguageList(),
               const Divider(),
               Padding(
                 padding: const EdgeInsets.all(8.0),
@@ -555,6 +568,31 @@ class _UserDataPageState extends State<UserDataPage> {
     }
   }
 
+  List<Widget> _buildLanguageList() {
+    List<LanguageSetting> displayedLanguages = _isLanguageListExpanded
+        ? languagesList
+        : languagesList.take(_initialLanguageListItemCount).toList();
+
+    return displayedLanguages.map(buildSingleCheckbox).toList();
+  }
+
+  Widget _buildExpandCollapseButton() {
+    if (languagesList.length <= _initialLanguageListItemCount) {
+      return Container();
+    }
+
+    return TextButton(
+      onPressed: () {
+        setState(() {
+          _isLanguageListExpanded = !_isLanguageListExpanded;
+        });
+      },
+      child: Text(
+        _isLanguageListExpanded ? 'Show less languages' : 'Show more languages',
+      ),
+    );
+  }
+
   Widget buildSingleCheckbox(LanguageSetting languageSetting) => buildCheckbox(
         languageSetting: languageSetting,
         onClicked: () {