Page 32 done

README.md

@@ -48,6 +48,7 @@ flutter build apk
 <img src="art/screenshots/page_18.png" alt="page 18" width="200px" hspace="2"/>
 <img src="art/screenshots/page_19.png" alt="page 19" width="200px" hspace="2"/>
 <img src="art/screenshots/page_21.png" alt="page 21" width="200px" hspace="2"/>
+<img src="art/screenshots/page_32.png" alt="page 32" width="200px" hspace="2"/>
 
 <br />
 <img src="art/screenshots/web_page_7.png" alt="Web page 7"/> 

lib/src/mobile_ui/32/circle_tab_indicator.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+
+/// Nice reads
+/// https://medium.com/swlh/flutter-custom-tab-indicator-for-tabbar-d72bbc6c9d0c
+/// https://medium.com/flutter-community/flutter-custom-decoration-eba31253be0b
+
+class CircleTabIndicator extends Decoration {
+  final BoxPainter _painter;
+
+  CircleTabIndicator({required Color color, required double radius})
+      : _painter = _CirclePainter(color, radius);
+
+  @override
+  BoxPainter createBoxPainter([VoidCallback? onChanged]) => _painter;
+}
+
+class _CirclePainter extends BoxPainter {
+  final Paint _paint;
+  final double radius;
+
+  _CirclePainter(Color color, this.radius)
+      : _paint = Paint()
+          ..color = color
+          ..isAntiAlias = true;
+
+  @override
+  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
+    final Offset circleOffset =
+        offset + Offset(cfg.size!.width / 2, cfg.size!.height - radius - 5);
+    canvas.drawCircle(circleOffset, radius, _paint);
+  }
+}

lib/src/mobile_ui/32/page_32.dart

@@ -1,4 +1,11 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get_it/get_it.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+import '../../navigation/navigation_service.dart';
+import 'circle_tab_indicator.dart';
 
 class Page32 extends StatefulWidget {
   const Page32({Key? key}) : super(key: key);
@@ -7,9 +14,210 @@ class Page32 extends StatefulWidget {
   State<Page32> createState() => _Page32State();
 }
 
-class _Page32State extends State<Page32> {
+class _Page32State extends State<Page32> with SingleTickerProviderStateMixin {
+  late TabController _tabController;
+  static List<Tab> myTabs = <Tab>[
+    Tab(
+      text: "PHOTOS",
+    ),
+    Tab(
+      text: 'PHOTOS',
+    ),
+    Tab(
+      text: 'POSTS',
+    ),
+    Tab(
+      text: 'FRIENDS',
+    ),
+  ];
+
+  @override
+  void initState() {
+    super.initState();
+    _tabController = TabController(vsync: this, length: myTabs.length);
+  }
+
+  @override
+  void dispose() {
+    _tabController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
-    return Container();
+    return Scaffold(
+      body: SafeArea(
+        child: Padding(
+          padding: EdgeInsets.symmetric(horizontal: 24.w, vertical: 20.h),
+          child: Column(
+            children: [
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  GestureDetector(
+                    onTap: () {
+                      GetIt.I.get<NavigationService>().back();
+                    },
+                    child: SvgPicture.asset(
+                      "assets/svg/32/arrow_back.svg",
+                      width: 24.w,
+                      height: 24.w,
+                    ),
+                  ),
+                  GestureDetector(
+                    onTap: () {
+                      GetIt.I.get<NavigationService>().back();
+                    },
+                    child: SvgPicture.asset(
+                      "assets/svg/32/settings.svg",
+                      width: 24.w,
+                      height: 24.w,
+                    ),
+                  )
+                ],
+              ),
+              SizedBox(
+                height: 43.h,
+              ),
+              Container(
+                width: 150.w,
+                height: 150.w,
+                decoration: BoxDecoration(
+                  color: Color(0xffC4C4C4),
+                  borderRadius: BorderRadius.circular(150.w),
+                ),
+              ),
+              SizedBox(
+                height: 12.h,
+              ),
+              Text(
+                "John Doe",
+                style: GoogleFonts.workSans(
+                  textStyle: TextStyle(
+                    fontSize: 24.sp,
+                    color: Colors.black,
+                    fontStyle: FontStyle.normal,
+                    fontWeight: FontWeight.w600,
+                  ),
+                ),
+              ),
+              SizedBox(
+                height: 10.h,
+              ),
+              Text(
+                "Designer",
+                style: GoogleFonts.workSans(
+                  textStyle: TextStyle(
+                    fontSize: 12.sp,
+                    color: Colors.black,
+                    fontStyle: FontStyle.normal,
+                    fontWeight: FontWeight.w400,
+                  ),
+                ),
+              ),
+              SizedBox(
+                height: 58.h,
+              ),
+              TabBar(
+                  indicator: CircleTabIndicator(color: Colors.black, radius: 3),
+                  labelColor: Colors.black,
+                  labelStyle: GoogleFonts.workSans(
+                    textStyle: TextStyle(
+                      fontSize: 12.sp,
+                      color: Colors.black,
+                      fontStyle: FontStyle.normal,
+                      fontWeight: FontWeight.w600,
+                    ),
+                  ),
+                  unselectedLabelColor: Color(0xffA8A8A8),
+                  unselectedLabelStyle: GoogleFonts.workSans(
+                    textStyle: TextStyle(
+                      fontSize: 12.sp,
+                      color: Color(0xffA8A8A8),
+                      fontStyle: FontStyle.normal,
+                      fontWeight: FontWeight.w600,
+                    ),
+                  ),
+                  controller: _tabController,
+                  tabs: myTabs.map((e) => e).toList()),
+              SizedBox(
+                height: 48.h,
+              ),
+              Expanded(
+                child: TabBarView(
+                  controller: _tabController,
+                  children: [
+                    GridView.builder(
+                      shrinkWrap: true,
+                      itemCount: 30,
+                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                        crossAxisCount: 3,
+                        mainAxisSpacing: 8.h,
+                        crossAxisSpacing: 6.w,
+                      ),
+                      itemBuilder: (c, i) {
+                        return Container(
+                          height: 110.h,
+                          color: Color(0xffC4C4C4),
+                        );
+                      },
+                    ),
+                    GridView.builder(
+                      shrinkWrap: true,
+                      itemCount: 30,
+                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                        crossAxisCount: 3,
+                        mainAxisSpacing: 8.h,
+                        crossAxisSpacing: 6.w,
+                      ),
+                      itemBuilder: (c, i) {
+                        return Container(
+                          height: 110.h,
+                          color: Color(0xffC4C4C4),
+                        );
+                      },
+                    ),
+                    GridView.builder(
+                      shrinkWrap: true,
+                      itemCount: 30,
+                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                        crossAxisCount: 3,
+                        mainAxisSpacing: 8.h,
+                        crossAxisSpacing: 6.w,
+                      ),
+                      itemBuilder: (c, i) {
+                        return Container(
+                          height: 110.h,
+                          color: Color(0xffC4C4C4),
+                        );
+                      },
+                    ),
+                    GridView.builder(
+                      shrinkWrap: true,
+                      itemCount: 30,
+                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                        crossAxisCount: 3,
+                        mainAxisSpacing: 8.h,
+                        crossAxisSpacing: 6.w,
+                      ),
+                      itemBuilder: (c, i) {
+                        return Container(
+                          height: 110.h,
+                          color: Color(0xffC4C4C4),
+                        );
+                      },
+                    )
+                  ],
+                ),
+              )
+            ],
+          ),
+        ),
+      ),
+    );
   }
 }
+
+/// Nice read
+/// https://medium.com/swlh/flutter-custom-tab-indicator-for-tabbar-d72bbc6c9d0c
+/// https://medium.com/flutter-community/flutter-custom-decoration-eba31253be0b

pubspec.yaml

@@ -89,6 +89,8 @@ flutter:
     - assets/svg/18/
     - assets/svg/19/
     - assets/svg/21/
+    - assets/svg/32/
+