ProfilePageTabBar

lib/components/colors.dart

@@ -5,4 +5,5 @@ class ConstColor {
   static const Color textColor = Color(0xFF79838B);
   static const Color lightBlue = Color(0xFF44C4FE);
   static const Color lightGrey = Color(0xFFB8C5D0);
+  static const Color blue = Color(0xFF4BC9FE);
 }

lib/main.dart

@@ -1,14 +1,16 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_ui/pages/authorization/provider/sign_up_provider.dart';
+import 'package:flutter_ui/provider/profile_tab_bar_provider.dart';
 import 'package:flutter_ui/screens/home/home_page.dart';
 import 'package:provider/provider.dart';
 
 main() {
   runApp(
     MultiProvider(
       providers: [
-        ChangeNotifierProvider(create: (context) => SignUpProvider()),
+        ChangeNotifierProvider(create: (_) => SignUpProvider()),
+        ChangeNotifierProvider(create: (_)=> ProfileTabProvider()),
       ],
       child: MyApp(),
     ),

lib/provider/profile_tab_bar_provider.dart

@@ -0,0 +1,12 @@
+import 'package:flutter/material.dart';
+
+class ProfileTabProvider extends ChangeNotifier {
+  int _index = 0;
+
+  void changeIndex(int index) {
+    _index = index;
+    notifyListeners();
+  }
+
+  int get index => _index;
+}

lib/screens/info/components/header_info.dart

@@ -14,40 +14,57 @@ class HeaderInfo extends StatelessWidget {
         left: getProportionateScreenWidth(20.0),
         right: getProportionateScreenWidth(20.0),
       ),
+      padding: EdgeInsets.symmetric(
+        horizontal: getProportionateScreenWidth(10.0),
+        vertical: getProportionateScreenHeight(10.0),
+      ),
       height: getProportionateScreenHeight(250.0),
       child: Row(
         children: [
           _setProfileImage(),
-          Column(
-            children: [
-              MyTextWidget("Bahrom\nPo'lat", color: ConstColor.textColor, size: 41.0,),
-            ],
-          )
+          SizedBox(width: getProportionateScreenWidth(10.0)),
+          _setRightSideInfo(),
         ],
       ),
     );
   }
 
-  Padding _setProfileImage() => Padding(
-        padding: EdgeInsets.symmetric(
-          horizontal: getProportionateScreenWidth(10.0),
-          vertical: getProportionateScreenHeight(10.0),
-        ),
-        child: ClipRRect(
-          borderRadius: _setBorderRadius(),
-          child: Image.network(
-            HotelImageUlr.room1,
-            fit: BoxFit.cover,
-            height: getProportionateScreenHeight(250.0),
-            width: getProportionateScreenWidth(154.0),
+  Expanded _setRightSideInfo() {
+    return Expanded(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          MyTextWidget(
+            "Bahrom\nPo'lat",
+            color: ConstColor.textColor,
+            size: 41.0,
+            lines: 2,
           ),
+          SizedBox(height: getProportionateScreenHeight(14.0)),
+          _setAccountInfo('Email', '[email protected]'),
+          SizedBox(height: getProportionateScreenHeight(14.0)),
+          _setAccountInfo('Date of birth', 'June, 18, 1994'),
+          SizedBox(height: getProportionateScreenHeight(14.0)),
+          _setAccountInfo('Address', 'Tashkent district, Tashkent'),
+        ],
+      ),
+    );
+  }
+
+  ClipRRect _setProfileImage() => ClipRRect(
+        borderRadius: _setBorderRadius(),
+        child: Image.network(
+          HotelImageUlr.room1,
+          fit: BoxFit.cover,
+          height: getProportionateScreenHeight(250.0),
+          width: getProportionateScreenWidth(154.0),
         ),
       );
 
   _setAccountInfo(String title, String data) => Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          MyTextWidget(title, color: ConstColor.lightGrey,size: 9.0),
+          MyTextWidget(title, color: ConstColor.lightGrey, size: 9.0),
           MyTextWidget(data, color: ConstColor.textColor),
         ],
       );

lib/screens/info/components/tab_bar.dart

@@ -0,0 +1,63 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_ui/components/exporting_packages.dart';
+import 'package:flutter_ui/provider/profile_tab_bar_provider.dart';
+
+class ProfilePageTabBar extends StatelessWidget {
+  ProfilePageTabBar({Key? key}) : super(key: key);
+  late int _currentIndex;
+  late ProfileTabProvider _tabProvider;
+
+  @override
+  Widget build(BuildContext context) {
+    _tabProvider = context.watch();
+    _currentIndex = _tabProvider.index;
+    return Container(
+      height: getProportionateScreenHeight(32.0),
+      width: getProportionateScreenWidth(194.0),
+      padding: EdgeInsets.symmetric(
+        horizontal: getProportionateScreenWidth(6.0),
+        vertical: getProportionateScreenHeight(5.0),
+      ),
+      decoration: BoxDecoration(
+        borderRadius: _setBorderRadius(),
+        color: Colors.white,
+      ),
+      child: Row(
+        children: [
+          _setButton('About', 0),
+          _setButton('Work', 1),
+        ],
+      ),
+    );
+  }
+
+  Expanded _setButton(
+    String label,
+    int index,
+  ) =>
+      Expanded(
+        child: ElevatedButton(
+          onPressed: () {
+            _tabProvider.changeIndex(index);
+          },
+          child: MyTextWidget(
+            label,
+            color: _checkIndex(index) ? Colors.white : ConstColor.blue,
+            size: 11.0,
+            weight: FontWeight.w700,
+          ),
+          style: ElevatedButton.styleFrom(
+            elevation: 0.0,
+            shadowColor: Colors.transparent,
+            primary: _checkIndex(index) ? ConstColor.blue : Colors.transparent,
+            shape: RoundedRectangleBorder(borderRadius: _setBorderRadius()),
+          ),
+        ),
+      );
+
+  bool _checkIndex(int index) => _currentIndex == index ? true : false;
+
+  BorderRadius _setBorderRadius() => BorderRadius.circular(
+        getProportionateScreenWidth(16.0),
+      );
+}

lib/screens/info/info_page.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_ui/components/colors.dart';
 import 'package:flutter_ui/components/size_config.dart';
 import 'package:flutter_ui/screens/info/components/header_info.dart';
+import 'package:flutter_ui/screens/info/components/tab_bar.dart';
 
 class InfoPage extends StatelessWidget {
   const InfoPage({Key? key}) : super(key: key);
@@ -13,7 +14,9 @@ class InfoPage extends StatelessWidget {
       backgroundColor: ConstColor.primary,
       body: Column(
         children: [
-          HeaderInfo()
+          HeaderInfo(),
+          SizedBox(height: getProportionateScreenHeight(20.0)),
+          ProfilePageTabBar(),
         ],
       ),
     );

lib/widgets/my_text_widget.dart

@@ -6,23 +6,30 @@ class MyTextWidget extends StatelessWidget {
   Color color;
   double size;
   FontWeight weight;
+  int lines;
+  String family;
 
   MyTextWidget(
     this.data, {
     Key? key,
     this.color = Colors.black,
     this.size = 14.0,
     this.weight = FontWeight.w500,
+    this.lines = 1,
+    this.family = 'SfPro',
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     return Text(
       data,
+      maxLines: lines,
+      overflow: TextOverflow.ellipsis,
       style: TextStyle(
         fontSize: getProportionateScreenWidth(size),
         fontWeight: weight,
         color: color,
+        fontFamily: family,
       ),
     );
   }