Responsive header: desktop left-justified, mobile avatar + username

Author: will-ch-h

lib/main.dart

@@ -22,6 +22,8 @@ class HomePage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final isMobile = MediaQuery.of(context).size.width < 600;
+
     return Scaffold(
       body: SingleChildScrollView(
         child: Column(
@@ -30,14 +32,9 @@ class HomePage extends StatelessWidget {
               width: double.infinity,
               height: MediaQuery.of(context).size.height,
               color: const Color(0xFF3A3A3A),
-              padding: const EdgeInsets.symmetric(horizontal: 46, vertical: 26),
-              alignment: Alignment.centerLeft,
-              child: const CircleAvatar(
-                radius: 76,
-                backgroundImage: NetworkImage(
-                  'https://avatars.githubusercontent.com/will-ch-h',
-                ),
-              ),
+              padding: const EdgeInsets.symmetric(horizontal: 46, vertical: 46),
+              alignment: isMobile ? Alignment.topLeft : Alignment.centerLeft,
+              child: isMobile ? const _MobileHeader() : const _DesktopHeader(),
             ),
             Container(
               width: double.infinity,
@@ -50,3 +47,52 @@ class HomePage extends StatelessWidget {
     );
   }
 }
+
+class _DesktopHeader extends StatelessWidget {
+  const _DesktopHeader();
+
+  @override
+  Widget build(BuildContext context) {
+    return const CircleAvatar(
+      radius: 96,
+      backgroundImage: NetworkImage(
+        'https://avatars.githubusercontent.com/will-ch-h',
+      ),
+    );
+  }
+}
+
+class _MobileHeader extends StatelessWidget {
+  const _MobileHeader();
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Row(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            const CircleAvatar(
+              radius: 40,
+              backgroundImage: NetworkImage(
+                'https://avatars.githubusercontent.com/will-ch-h',
+              ),
+            ),
+            const SizedBox(width: 16),
+            const Text(
+              'will-ch-h',
+              style: TextStyle(
+                color: Colors.white,
+                fontSize: 22,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+          ],
+        ),
+        const SizedBox(height: 24),
+        // information goes here
+      ],
+    );
+  }
+}