Refactor ProfilePage layout for improved readability and responsivene…

…ss; update SettingsWidget state creation method
airqo-platform · Jan 24, 2025 · 1f461ab · 1f461ab
1 parent 0af7a80
commit 1f461ab
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 60 deletions.
diff --git a/mobile-v3/lib/src/app/profile/pages/profile_page.dart b/mobile-v3/lib/src/app/profile/pages/profile_page.dart
@@ -42,69 +42,78 @@ class _ProfilePageState extends State<ProfilePage> {
                   children: [
                     SizedBox(
                       height: 100,
-                      child: Row(
-                        children: [
-                          Container(
-                            margin: const EdgeInsets.symmetric(horizontal: 16),
-                            child: CircleAvatar(
-                              backgroundColor: Theme.of(context).highlightColor,
-                              child: Center(
-                                child: SvgPicture.asset(
-                                    "assets/icons/user_icon.svg"),
-                              ),
-                              radius: 50,
-                            ),
-                          ),
-                          Column(
-                            crossAxisAlignment: CrossAxisAlignment.start,
+                      child: LayoutBuilder(
+                        builder: (context, constraints) {
+                          return Row(
                             children: [
-                              Text(
-                                "${firstName} ${lastName}",
-                                style: TextStyle(
-                                  color: AppColors.boldHeadlineColor,
-                                  fontSize: 24,
-                                  fontWeight: FontWeight.w700,
+                              Container(
+                                margin:
+                                    const EdgeInsets.symmetric(horizontal: 16),
+                                child: CircleAvatar(
+                                  backgroundColor:
+                                      Theme.of(context).highlightColor,
+                                  child: Center(
+                                    child: SvgPicture.asset(
+                                        "assets/icons/user_icon.svg"),
+                                  ),
+                                  radius: 50,
                                 ),
                               ),
-                              Spacer(),
-                              Row(
-                                children: [
-                                  Container(
-                                    padding: const EdgeInsets.symmetric(
-                                        horizontal: 32),
-                                    height: 50,
-                                    child: Center(
-                                        child: Text("Edit your profile")),
-                                    //   child: InkWell(
-                                    // onTap: () => Navigator.of(context).push(
-                                    //     MaterialPageRoute(
-                                    //         builder: (context) =>
-                                    //             EditProfile())),
-                                    // child: Text(
-                                    //   "Edit your profile",
-                                    //   style: TextStyle(
-                                    //     fontWeight: FontWeight.w500,
-                                    //     color: Colors.white,
-                                    //   ),
-                                    // ),
-                                    //)),
-                                    decoration: BoxDecoration(
-                                        color: Theme.of(context).highlightColor,
-                                        borderRadius:
-                                            BorderRadius.circular(200)),
-                                  ),
-                                  SizedBox(width: 8),
-                                  CircleAvatar(
-                                      backgroundColor:
-                                          Theme.of(context).highlightColor,
-                                      radius: 26,
-                                      child: SvgPicture.asset(
-                                          "assets/icons/notification.svg"))
-                                ],
+                              Expanded(
+                                child: Column(
+                                  crossAxisAlignment: CrossAxisAlignment.start,
+                                  children: [
+                                    Text(
+                                      "${firstName} ${lastName}",
+                                      style: TextStyle(
+                                        color: AppColors.boldHeadlineColor,
+                                        fontSize: 24,
+                                        fontWeight: FontWeight.w700,
+                                      ),
+                                    ),
+                                    Spacer(),
+                                    Row(
+                                      children: [
+                                        Container(
+                                          padding: const EdgeInsets.symmetric(
+                                              horizontal: 32),
+                                          height: 50,
+                                          child: Center(
+                                              child: Text("Edit your profile")),
+                                          //   child: InkWell(
+                                          // onTap: () => Navigator.of(context).push(
+                                          //     MaterialPageRoute(
+                                          //         builder: (context) =>
+                                          //             EditProfile())),
+                                          // child: Text(
+                                          //   "Edit your profile",
+                                          //   style: TextStyle(
+                                          //     fontWeight: FontWeight.w500,
+                                          //     color: Colors.white,
+                                          //   ),
+                                          // ),
+                                          //)),
+                                          decoration: BoxDecoration(
+                                              color: Theme.of(context)
+                                                  .highlightColor,
+                                              borderRadius:
+                                                  BorderRadius.circular(200)),
+                                        ),
+                                        SizedBox(width: 8),
+                                        CircleAvatar(
+                                            backgroundColor:
+                                                Theme.of(context).highlightColor,
+                                            radius: 26,
+                                            child: SvgPicture.asset(
+                                                "assets/icons/notification.svg"))
+                                      ],
+                                    )
+                                  ],
+                                ),
                               )
                             ],
-                          )
-                        ],
+                          );
+                        },
                       ),
                     ),
                     SizedBox(height: 32),

diff --git a/mobile-v3/lib/src/app/profile/pages/widgets/settings_widget.dart b/mobile-v3/lib/src/app/profile/pages/widgets/settings_widget.dart
@@ -7,9 +7,8 @@ class SettingsWidget extends StatefulWidget {
   const SettingsWidget({super.key});
 
   @override
-  _SettingsWidgetState createState() => _SettingsWidgetState();
+  State<SettingsWidget> createState() => _SettingsWidgetState();
 }
-
 class _SettingsWidgetState extends State<SettingsWidget> {
   String _appVersion = '';
   bool _locationEnabled = true;