diff --git a/README.md b/README.md index d6a056a..9b06ede 100644 --- a/README.md +++ b/README.md @@ -106,30 +106,37 @@ flutter build apk | ---------------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------- | | | | | | +| Page 69 | Page 70 | Page 71 | Page 72 | +| ---------------------------------------------------- | ---------------------------------------------------- | ------- | ---------------------------------------------------- | +| | | | | -| Page 69 | Page 70 | Page 71 | Page 72 | -| ---------------------------------------------------- | ---------------------------------------------------- | ------- | ------- | -| | | | | +| Page 73 | Page 74 | Page 75 | Page 76 | +| ---------------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------- | +| | | | | -| Page 73 | Page 74 | Page 75 | Page 76 | -| ------- | ------- | ------- | ------- | -| | | | | +| Page 77 | Page 78 | Page 79 | Page 80 | +| ---------------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------- | +| | | | | -| Page 77 | Page 78 | Page 79 | Page 80 | -| ------- | ------- | ------- | ------- | -| | | | | +| Page 81 | Page 82 | Page 83 | Page 84 | +| ---------------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------- | +| | | | | + +| Page 85 | Page 86 | Page 87 | Page 88 | +| ---------------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------- | ------- | +| | | | | -| Page 91 | Page 92 | Page 93 | Page 94 | +| Page 89 | Page 90 | Page 91 | Page 92 | | ------- | ------- | ------- | ------- | | | | | | -| Page 95 | Page 96 | Page 97 | Page 98 | +| Page 93 | Page 94 | Page 95 | Page 96 | | ------- | ------- | ------- | ------- | | | | | | -| Page 99 | Page 100 | -| ------- | -------- | -| | | +| Page 97 | Page 98 | Page 99 | Page 100 | +| ------- | ------- | ------- | -------- | +| | | | |
Web Page 7 diff --git a/art/screenshots/page_72.png b/art/screenshots/page_72.png new file mode 100644 index 0000000..c635246 Binary files /dev/null and b/art/screenshots/page_72.png differ diff --git a/art/screenshots/page_73.png b/art/screenshots/page_73.png new file mode 100644 index 0000000..89a83c2 Binary files /dev/null and b/art/screenshots/page_73.png differ diff --git a/art/screenshots/page_74.png b/art/screenshots/page_74.png new file mode 100644 index 0000000..eda293c Binary files /dev/null and b/art/screenshots/page_74.png differ diff --git a/art/screenshots/page_75.png b/art/screenshots/page_75.png new file mode 100644 index 0000000..43ff2f0 Binary files /dev/null and b/art/screenshots/page_75.png differ diff --git a/art/screenshots/page_76.png b/art/screenshots/page_76.png new file mode 100644 index 0000000..d568d18 Binary files /dev/null and b/art/screenshots/page_76.png differ diff --git a/art/screenshots/page_77.png b/art/screenshots/page_77.png new file mode 100644 index 0000000..96bff58 Binary files /dev/null and b/art/screenshots/page_77.png differ diff --git a/art/screenshots/page_78.png b/art/screenshots/page_78.png new file mode 100644 index 0000000..880c6b4 Binary files /dev/null and b/art/screenshots/page_78.png differ diff --git a/art/screenshots/page_79.png b/art/screenshots/page_79.png new file mode 100644 index 0000000..c8e4221 Binary files /dev/null and b/art/screenshots/page_79.png differ diff --git a/art/screenshots/page_80.png b/art/screenshots/page_80.png new file mode 100644 index 0000000..92abd30 Binary files /dev/null and b/art/screenshots/page_80.png differ diff --git a/art/screenshots/page_81.png b/art/screenshots/page_81.png new file mode 100644 index 0000000..f0dfc77 Binary files /dev/null and b/art/screenshots/page_81.png differ diff --git a/art/screenshots/page_82.png b/art/screenshots/page_82.png new file mode 100644 index 0000000..da0ab06 Binary files /dev/null and b/art/screenshots/page_82.png differ diff --git a/art/screenshots/page_83.png b/art/screenshots/page_83.png new file mode 100644 index 0000000..8696101 Binary files /dev/null and b/art/screenshots/page_83.png differ diff --git a/art/screenshots/page_84.png b/art/screenshots/page_84.png new file mode 100644 index 0000000..33e1d16 Binary files /dev/null and b/art/screenshots/page_84.png differ diff --git a/art/screenshots/page_85.png b/art/screenshots/page_85.png new file mode 100644 index 0000000..eb32491 Binary files /dev/null and b/art/screenshots/page_85.png differ diff --git a/art/screenshots/page_86.png b/art/screenshots/page_86.png new file mode 100644 index 0000000..7b393ae Binary files /dev/null and b/art/screenshots/page_86.png differ diff --git a/art/screenshots/page_87.png b/art/screenshots/page_87.png new file mode 100644 index 0000000..eb9259a Binary files /dev/null and b/art/screenshots/page_87.png differ diff --git a/assets/svg/m76/google.svg b/assets/svg/m76/google.svg new file mode 100644 index 0000000..c97b8a2 --- /dev/null +++ b/assets/svg/m76/google.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/svg/m76/twitter.svg b/assets/svg/m76/twitter.svg new file mode 100644 index 0000000..4e88222 --- /dev/null +++ b/assets/svg/m76/twitter.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/lib/src/mobile_ui/72/page_72.dart b/lib/src/mobile_ui/72/page_72.dart new file mode 100644 index 0000000..ce92ef6 --- /dev/null +++ b/lib/src/mobile_ui/72/page_72.dart @@ -0,0 +1,239 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; + +class Page72 extends StatelessWidget { + const Page72({super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + foregroundColor: Colors.black, + backgroundColor: Colors.white, + title: Text("Home"), + actions: [ + IconButton( + onPressed: () {}, + icon: Icon(Icons.notifications_none), + ), + IconButton( + onPressed: () {}, + icon: Icon(Icons.search), + ), + ], + ), + body: SingleChildScrollView( + padding: EdgeInsets.symmetric(vertical: 24), + child: Column( + children: [ + ...List.generate( + 3, + (index) => Container( + margin: EdgeInsets.only(bottom: 20, left: 8, right: 8), + padding: EdgeInsets.only(bottom: 24), + decoration: BoxDecoration( + border: Border( + bottom: BorderSide(color: Color(0xffD0D0D0)), + ), + ), + child: Column( + children: [ + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + child: Text( + 'G-7 finance ministers strike landmark deal on taxing multinationals, tech giants', + style: TextStyle( + color: Colors.black, + fontSize: 18, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w500, + ), + ), + ), + SizedBox(width: 10), + Container( + width: 80, + height: 80, + decoration: BoxDecoration(color: Color(0xFFC4C4C4)), + ) + ], + ), + SizedBox( + height: 24, + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Author Name', + style: TextStyle( + color: Colors.black, + fontSize: 14, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + const SizedBox(height: 2), + Text( + 'May 20 · 5 min read', + style: TextStyle( + color: Color(0xFFA8A8A8), + fontSize: 12, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + ], + ), + Row( + mainAxisSize: MainAxisSize.min, + children: [ + Icon(Icons.bookmark_border), + const SizedBox(width: 24), + Icon(Icons.more_vert), + ], + ), + ], + ), + ], + ), + ), + ), + Container( + padding: EdgeInsets.all(24), + decoration: BoxDecoration(color: Color(0xFFF4F4F4)), + child: Column( + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + 'New for you', + style: TextStyle( + color: Color(0xFFFF832B), + fontSize: 18, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w600, + ), + ), + Row( + children: [ + Text( + 'Customize', + style: TextStyle( + color: Color(0xFF262626), + fontSize: 12, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + Container( + height: 15, + margin: EdgeInsets.symmetric(horizontal: 16), + decoration: ShapeDecoration( + shape: RoundedRectangleBorder( + side: BorderSide( + width: 1, + strokeAlign: BorderSide.strokeAlignCenter, + color: Color(0xFF000000), + ), + ), + ), + ), + Text( + 'See all', + style: TextStyle( + color: Color(0xFF262626), + fontSize: 12, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ) + ], + ), + ], + ), + SizedBox( + height: 9, + ), + Row( + children: List.generate( + 5, + (index) => Container( + margin: EdgeInsets.only(right: 16), + child: Column( + children: [ + Container( + width: 55, + height: 55, + decoration: ShapeDecoration( + color: Color(0xFF525252), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(8)), + ), + ), + SizedBox( + height: 12, + ), + Container( + width: 15, + decoration: ShapeDecoration( + shape: RoundedRectangleBorder( + side: BorderSide( + width: 3, + strokeAlign: BorderSide.strokeAlignCenter, + color: index == 0 + ? Color(0xFFA8A8A8) + : Colors.transparent, + ), + ), + ), + ) + ], + ), + ), + ), + ), + ], + ), + ), + SizedBox( + height: 12, + ), + Container( + height: 90, + margin: EdgeInsets.symmetric(horizontal: 24), + padding: EdgeInsets.symmetric(horizontal: 21, vertical: 16), + decoration: BoxDecoration( + color: Color(0xFFD0D0D0), + ), + alignment: Alignment.topLeft, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + 'Author name', + style: TextStyle( + color: Color(0xFF262626), + fontSize: 18, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w600, + ), + ), + Icon(Icons.arrow_circle_right_outlined) + ], + ), + ) + ], + ), + ), + drawer: Drawer(), + ); + } +} diff --git a/lib/src/mobile_ui/73/page_73.dart b/lib/src/mobile_ui/73/page_73.dart new file mode 100644 index 0000000..b0c62c7 --- /dev/null +++ b/lib/src/mobile_ui/73/page_73.dart @@ -0,0 +1,397 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; + +class Page73 extends StatelessWidget { + const Page73({super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + foregroundColor: Colors.black, + backgroundColor: Colors.white, + title: Text("Home"), + actions: [ + IconButton( + onPressed: () {}, + icon: Icon(Icons.notifications_none), + ), + IconButton( + onPressed: () {}, + icon: Icon(Icons.search), + ), + ], + ), + body: SingleChildScrollView( + padding: EdgeInsets.symmetric(vertical: 24), + child: Column( + children: [ + ...List.generate( + 3, + (index) => Container( + margin: EdgeInsets.only(bottom: 20, left: 8, right: 8), + padding: EdgeInsets.only(bottom: 24), + decoration: BoxDecoration( + border: Border( + bottom: BorderSide(color: Color(0xffD0D0D0)), + ), + ), + child: Column( + children: [ + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + child: Text( + 'G-7 finance ministers strike landmark deal on taxing multinationals, tech giants', + style: TextStyle( + color: Colors.black, + fontSize: 18, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w500, + ), + ), + ), + SizedBox(width: 10), + Container( + width: 80, + height: 80, + decoration: BoxDecoration(color: Color(0xFFC4C4C4)), + ) + ], + ), + SizedBox( + height: 24, + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Author Name', + style: TextStyle( + color: Colors.black, + fontSize: 14, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + const SizedBox(height: 2), + Text( + 'May 20 · 5 min read', + style: TextStyle( + color: Color(0xFFA8A8A8), + fontSize: 12, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + ], + ), + Row( + mainAxisSize: MainAxisSize.min, + children: [ + Icon(Icons.bookmark_border), + const SizedBox(width: 24), + Icon(Icons.more_vert), + ], + ), + ], + ), + ], + ), + ), + ), + Container( + padding: EdgeInsets.all(24), + decoration: BoxDecoration(color: Color(0xFFF4F4F4)), + child: Column( + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + 'New for you', + style: TextStyle( + color: Color(0xFFFF832B), + fontSize: 18, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w600, + ), + ), + Row( + children: [ + Text( + 'Customize', + style: TextStyle( + color: Color(0xFF262626), + fontSize: 12, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + Container( + height: 15, + margin: EdgeInsets.symmetric(horizontal: 16), + decoration: ShapeDecoration( + shape: RoundedRectangleBorder( + side: BorderSide( + width: 1, + strokeAlign: BorderSide.strokeAlignCenter, + color: Color(0xFF000000), + ), + ), + ), + ), + Text( + 'See all', + style: TextStyle( + color: Color(0xFF262626), + fontSize: 12, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ) + ], + ), + ], + ), + SizedBox( + height: 9, + ), + Row( + children: List.generate( + 5, + (index) => Container( + margin: EdgeInsets.only(right: 16), + child: Column( + children: [ + Container( + width: 55, + height: 55, + decoration: ShapeDecoration( + color: Color(0xFF525252), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(8)), + ), + ), + SizedBox( + height: 12, + ), + Container( + width: 15, + decoration: ShapeDecoration( + shape: RoundedRectangleBorder( + side: BorderSide( + width: 3, + strokeAlign: BorderSide.strokeAlignCenter, + color: index == 0 + ? Color(0xFFA8A8A8) + : Colors.transparent, + ), + ), + ), + ) + ], + ), + ), + ), + ), + ], + ), + ), + SizedBox( + height: 12, + ), + Container( + height: 90, + margin: EdgeInsets.symmetric(horizontal: 24), + padding: EdgeInsets.symmetric(horizontal: 21, vertical: 16), + decoration: BoxDecoration( + color: Color(0xFFD0D0D0), + ), + alignment: Alignment.topLeft, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + 'Author name', + style: TextStyle( + color: Color(0xFF262626), + fontSize: 18, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w600, + ), + ), + Icon(Icons.arrow_circle_right_outlined) + ], + ), + ) + ], + ), + ), + drawerScrimColor: Colors.transparent, + drawer: Drawer( + backgroundColor: Color(0xFF262626), + width: 316.w, + child: SafeArea( + bottom: false, + child: Column( + children: [ + Container( + padding: EdgeInsets.only(left: 27.w, bottom: 14.h, top: 27.h), + width: double.infinity, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + width: 80, + height: 80, + decoration: ShapeDecoration( + color: Color(0xFFC4C4C4), + shape: OvalBorder( + side: BorderSide( + width: 1, + strokeAlign: BorderSide.strokeAlignOutside, + color: Colors.white, + ), + ), + ), + ), + SizedBox( + height: 32.h, + ), + Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Your name', + style: TextStyle( + color: Colors.white, + fontSize: 18.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + const SizedBox(height: 12), + Text( + 'View profile', + style: TextStyle( + color: Color(0xFFA8A8A8), + fontSize: 12.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w300, + ), + ), + ], + ), + ], + ), + ), + Expanded( + child: Container( + width: double.infinity, + padding: EdgeInsets.symmetric(horizontal: 27, vertical: 22), + color: Color(0xff525252), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Tab #1', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + Text( + 'Tab #2', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + Text( + 'Tab #3', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + Text( + 'Tab #4', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 48.h, + ), + Text( + 'Tab #5', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + Text( + 'Tab #6', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + Text( + 'Tab #7', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + ], + ), + )) + ], + ), + ), + ), + ); + } +} diff --git a/lib/src/mobile_ui/74/page_74.dart b/lib/src/mobile_ui/74/page_74.dart new file mode 100644 index 0000000..5ddac64 --- /dev/null +++ b/lib/src/mobile_ui/74/page_74.dart @@ -0,0 +1,418 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; + +class Page74 extends StatelessWidget { + const Page74({super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + foregroundColor: Colors.black, + backgroundColor: Colors.white, + title: Text("Home"), + actions: [ + IconButton( + onPressed: () {}, + icon: Icon(Icons.notifications_none), + ), + IconButton( + onPressed: () {}, + icon: Icon(Icons.search), + ), + ], + ), + body: SingleChildScrollView( + padding: EdgeInsets.symmetric(vertical: 24), + child: Column( + children: [ + SizedBox( + height: 177.h, + child: ListView.builder( + scrollDirection: Axis.horizontal, + itemCount: 2, + itemBuilder: (context, index) => Container( + width: 318.w, + margin: EdgeInsets.only(left: 8, right: 8), + child: Column( + children: [ + Container( + width: 318.w, + height: 80.h, + decoration: BoxDecoration(color: Color(0xFFC4C4C4)), + ), + SizedBox( + height: 8.h, + ), + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + child: Text( + 'G-7 finance ministers strike landmark deal on taxing multinationals, tech giants', + style: TextStyle( + color: Colors.black, + fontSize: 18.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w500, + ), + overflow: TextOverflow.ellipsis, + ), + ), + ], + ), + SizedBox( + height: 8.h, + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Author Name', + style: TextStyle( + color: Colors.black, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + const SizedBox(height: 2), + Text( + 'May 20 · 5 min read', + style: TextStyle( + color: Color(0xFFA8A8A8), + fontSize: 12.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + ], + ), + Row( + mainAxisSize: MainAxisSize.min, + children: [ + Icon( + Icons.bookmark_border, + size: 24.w, + ), + SizedBox(width: 24.w), + Icon( + Icons.more_vert, + size: 24.w, + ), + ], + ), + ], + ), + ], + ), + ), + ), + ), + Divider( + color: Color(0xFFD0D0D0), + ), + SizedBox( + height: 56.h, + ), + ...List.generate( + 3, + (index) => PostCard(), + ), + ], + ), + ), + drawerScrimColor: Colors.transparent, + drawer: Drawer( + backgroundColor: Color(0xFF262626), + width: 316.w, + child: SafeArea( + bottom: false, + child: Column( + children: [ + Container( + padding: EdgeInsets.only(left: 27.w, bottom: 14.h, top: 27.h), + width: double.infinity, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + width: 80, + height: 80, + decoration: ShapeDecoration( + color: Color(0xFFC4C4C4), + shape: OvalBorder( + side: BorderSide( + width: 1, + strokeAlign: BorderSide.strokeAlignOutside, + color: Colors.white, + ), + ), + ), + ), + SizedBox( + height: 32.h, + ), + Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Your name', + style: TextStyle( + color: Colors.white, + fontSize: 18.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + const SizedBox(height: 12), + Text( + 'View profile', + style: TextStyle( + color: Color(0xFFA8A8A8), + fontSize: 12.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w300, + ), + ), + ], + ), + ], + ), + ), + Expanded( + child: Container( + width: double.infinity, + padding: EdgeInsets.symmetric(horizontal: 27, vertical: 22), + color: Color(0xff525252), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Tab #1', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + Text( + 'Tab #2', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + Text( + 'Tab #3', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + Text( + 'Tab #4', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 48.h, + ), + Text( + 'Tab #5', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + Text( + 'Tab #6', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + Text( + 'Tab #7', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + ], + ), + )) + ], + ), + ), + ), + ); + } +} + +class PostCard extends StatelessWidget { + const PostCard({ + super.key, + }); + + @override + Widget build(BuildContext context) { + return Container( + margin: EdgeInsets.only(bottom: 20, left: 8, right: 8), + padding: EdgeInsets.only(bottom: 24), + decoration: BoxDecoration( + border: Border( + bottom: BorderSide(color: Color(0xffD0D0D0)), + ), + ), + child: Column( + children: [ + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'How to use design thinking in your projects', + style: TextStyle( + color: Colors.black, + fontSize: 18.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w500, + ), + ), + SizedBox( + height: 8.h, + ), + Text( + 'At some point, you would want to ..', + style: TextStyle( + color: Color(0xFFA8A8A8), + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w500, + ), + ) + ], + ), + ), + SizedBox(width: 10.w), + Stack( + children: [ + Container( + margin: EdgeInsets.only(left: 4, bottom: 6), + width: 80.w, + height: 80.w, + decoration: BoxDecoration(color: Color(0xFF525252)), + ), + Positioned( + bottom: 0, + left: 0, + child: Container( + width: 24.w, + height: 24.w, + decoration: ShapeDecoration( + color: Color(0xFFA8A8A8), + shape: RoundedRectangleBorder( + side: BorderSide(width: 2, color: Color(0xFF525252)), + ), + ), + ), + ), + ], + ) + ], + ), + SizedBox( + height: 24.h, + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Author Name', + style: TextStyle( + color: Colors.black, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox(height: 2.sp), + Text( + 'May 20 · 5 min read', + style: TextStyle( + color: Color(0xFFA8A8A8), + fontSize: 12.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + ], + ), + Row( + mainAxisSize: MainAxisSize.min, + children: [ + Icon( + Icons.bookmark_border, + size: 24.w, + ), + SizedBox(width: 24.sp), + Icon( + Icons.more_vert, + size: 24.w, + ), + ], + ), + ], + ), + ], + ), + ); + } +} diff --git a/lib/src/mobile_ui/75/page_75.dart b/lib/src/mobile_ui/75/page_75.dart new file mode 100644 index 0000000..9c024fd --- /dev/null +++ b/lib/src/mobile_ui/75/page_75.dart @@ -0,0 +1,423 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; + +class Page75 extends StatelessWidget { + const Page75({super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + foregroundColor: Colors.black, + backgroundColor: Colors.white, + title: Text("Podcast"), + actions: [ + IconButton( + onPressed: () {}, + icon: Icon(Icons.notifications_none), + ), + IconButton( + onPressed: () {}, + icon: Icon(Icons.search), + ), + ], + ), + body: SingleChildScrollView( + padding: EdgeInsets.symmetric(vertical: 24), + child: Column( + children: [ + SizedBox( + height: 177.h, + child: ListView.builder( + scrollDirection: Axis.horizontal, + itemCount: 2, + itemBuilder: (context, index) => Container( + width: 318.w, + margin: EdgeInsets.only(left: 8, right: 8), + child: Column( + children: [ + Container( + width: 318.w, + height: 80.h, + decoration: BoxDecoration(color: Color(0xFFC4C4C4)), + ), + SizedBox( + height: 8.h, + ), + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + child: Text( + 'G-7 finance ministers strike landmark deal on taxing multinationals, tech giants', + style: TextStyle( + color: Colors.black, + fontSize: 18.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w500, + ), + overflow: TextOverflow.ellipsis, + ), + ), + ], + ), + SizedBox( + height: 8.h, + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Author Name', + style: TextStyle( + color: Colors.black, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + const SizedBox(height: 2), + Text( + 'May 20 · 5 min read', + style: TextStyle( + color: Color(0xFFA8A8A8), + fontSize: 12.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + ], + ), + Row( + mainAxisSize: MainAxisSize.min, + children: [ + Icon( + Icons.bookmark_border, + size: 24.w, + ), + SizedBox(width: 24.w), + Icon( + Icons.more_vert, + size: 24.w, + ), + ], + ), + ], + ), + ], + ), + ), + ), + ), + Divider( + color: Color(0xFFD0D0D0), + ), + SizedBox( + height: 32.h, + ), + ...List.generate( + 3, + (index) => PostCard(), + ), + ], + ), + ), + drawerScrimColor: Colors.transparent, + drawer: Drawer( + backgroundColor: Color(0xFF262626), + width: 316.w, + child: SafeArea( + bottom: false, + child: Column( + children: [ + Container( + padding: EdgeInsets.only(left: 27.w, bottom: 14.h, top: 27.h), + width: double.infinity, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + width: 80, + height: 80, + decoration: ShapeDecoration( + color: Color(0xFFC4C4C4), + shape: OvalBorder( + side: BorderSide( + width: 1, + strokeAlign: BorderSide.strokeAlignOutside, + color: Colors.white, + ), + ), + ), + ), + SizedBox( + height: 32.h, + ), + Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Your name', + style: TextStyle( + color: Colors.white, + fontSize: 18.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + const SizedBox(height: 12), + Text( + 'View profile', + style: TextStyle( + color: Color(0xFFA8A8A8), + fontSize: 12.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w300, + ), + ), + ], + ), + ], + ), + ), + Expanded( + child: Container( + width: double.infinity, + padding: EdgeInsets.symmetric(horizontal: 27, vertical: 22), + color: Color(0xff525252), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Tab #1', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + Text( + 'Tab #2', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + Text( + 'Tab #3', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + Text( + 'Tab #4', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 48.h, + ), + Text( + 'Tab #5', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + Text( + 'Tab #6', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + Text( + 'Tab #7', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + ], + ), + )) + ], + ), + ), + ), + ); + } +} + +class PostCard extends StatelessWidget { + const PostCard({ + super.key, + }); + + @override + Widget build(BuildContext context) { + return Container( + margin: EdgeInsets.only(bottom: 20, left: 8, right: 8), + padding: EdgeInsets.only(bottom: 24), + decoration: BoxDecoration( + border: Border( + bottom: BorderSide(color: Color(0xffD0D0D0)), + ), + ), + child: Column( + children: [ + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'How to use design thinking in your projects', + style: TextStyle( + color: Colors.black, + fontSize: 18.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w500, + ), + ), + SizedBox( + height: 8.h, + ), + Text( + 'At some point, you would want to ..', + style: TextStyle( + color: Color(0xFFA8A8A8), + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w500, + ), + ) + ], + ), + ), + SizedBox(width: 10.w), + Stack( + children: [ + Container( + margin: EdgeInsets.only(left: 4, bottom: 6), + width: 80.w, + height: 80.w, + decoration: BoxDecoration(color: Color(0xFF525252)), + alignment: Alignment.center, + child: Icon( + Icons.play_circle_outline_outlined, + color: Colors.white, + ), + ), + Positioned( + bottom: 0, + left: 0, + child: Container( + width: 24.w, + height: 24.w, + decoration: ShapeDecoration( + color: Color(0xFFA8A8A8), + shape: RoundedRectangleBorder( + side: BorderSide(width: 2, color: Color(0xFF525252)), + ), + ), + ), + ), + ], + ) + ], + ), + SizedBox( + height: 24.h, + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Author Name', + style: TextStyle( + color: Colors.black, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox(height: 2.sp), + Text( + 'May 20 · 5 min read', + style: TextStyle( + color: Color(0xFFA8A8A8), + fontSize: 12.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + ], + ), + Row( + mainAxisSize: MainAxisSize.min, + children: [ + Icon( + Icons.bookmark_border, + size: 24.w, + ), + SizedBox(width: 24.sp), + Icon( + Icons.more_vert, + size: 24.w, + ), + ], + ), + ], + ), + ], + ), + ); + } +} diff --git a/lib/src/mobile_ui/76/page_76.dart b/lib/src/mobile_ui/76/page_76.dart new file mode 100644 index 0000000..6452ef4 --- /dev/null +++ b/lib/src/mobile_ui/76/page_76.dart @@ -0,0 +1,324 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; +import 'package:flutter_ui_kit_obkm/gen/assets.gen.dart'; + +class Page76 extends StatelessWidget { + const Page76({super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + foregroundColor: Colors.black, + backgroundColor: Colors.white, + title: Text("Podcast"), + actions: [ + IconButton( + onPressed: () {}, + icon: Icon(Icons.notifications_none), + ), + IconButton( + onPressed: () {}, + icon: Icon(Icons.search), + ), + ], + ), + body: SingleChildScrollView( + padding: EdgeInsets.symmetric(vertical: 8), + child: Column( + children: [ + SettingsCard( + leading: Icon( + Icons.facebook, + size: 24.w, + ), + title: 'Facebook', + trailingText: 'Connected', + ), + SettingsCard( + leading: Assets.svg.m76.google.svg(height: 24, width: 24), + title: 'Google', + trailingText: 'Connected', + ), + SettingsCard( + leading: Assets.svg.m76.twitter.svg(height: 24, width: 24), + title: 'Twitter', + trailingText: 'Connect', + ), + SettingsCard( + title: 'Dark Mode', + trailingText: 'Dark Mode', + ), + SettingsCard( + title: 'Toggle Beta Version', + trailing: Icon( + Icons.keyboard_arrow_right_rounded, + size: 24.w, + ), + ), + SettingsCard( + title: 'Disable image loading', + trailing: Checkbox( + value: false, + onChanged: (value) {}, + ), + ), + SettingsCard( + title: 'Limit background data usage to wifi only', + trailing: Checkbox( + value: false, + onChanged: (value) {}, + ), + ), + SettingsCard( + title: 'Push Notification', + ), + SettingsCard( + title: 'Account', + ), + SettingsCard( + title: 'Email notification', + ), + SettingsCard( + title: 'Join our community', + ), + SettingsCard( + title: 'Sign out', + ), + ], + ), + ), + drawerScrimColor: Colors.transparent, + drawer: Drawer( + backgroundColor: Color(0xFF262626), + width: 316.w, + child: SafeArea( + bottom: false, + child: Column( + children: [ + Container( + padding: EdgeInsets.only(left: 27.w, bottom: 14.h, top: 27.h), + width: double.infinity, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + width: 80, + height: 80, + decoration: ShapeDecoration( + color: Color(0xFFC4C4C4), + shape: OvalBorder( + side: BorderSide( + width: 1, + strokeAlign: BorderSide.strokeAlignOutside, + color: Colors.white, + ), + ), + ), + ), + SizedBox( + height: 32.h, + ), + Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Your name', + style: TextStyle( + color: Colors.white, + fontSize: 18.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + const SizedBox(height: 12), + Text( + 'View profile', + style: TextStyle( + color: Color(0xFFA8A8A8), + fontSize: 12.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w300, + ), + ), + ], + ), + ], + ), + ), + Expanded( + child: Container( + width: double.infinity, + padding: EdgeInsets.symmetric(horizontal: 27, vertical: 22), + color: Color(0xff525252), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Tab #1', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + Text( + 'Tab #2', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + Text( + 'Tab #3', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + Text( + 'Tab #4', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 48.h, + ), + Text( + 'Tab #5', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + Text( + 'Tab #6', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + Text( + 'Tab #7', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + ], + ), + )) + ], + ), + ), + ), + ); + } +} + +class SettingsCard extends StatelessWidget { + const SettingsCard({ + super.key, + this.leading, + required this.title, + this.trailingText, + this.trailing, + }) : assert((trailing == null) || (trailingText == null)); + + final Widget? leading; + final String title; + final String? trailingText; + final Widget? trailing; + + @override + Widget build(BuildContext context) { + return Container( + padding: EdgeInsets.symmetric( + vertical: 18.h, + ), + margin: EdgeInsets.symmetric( + horizontal: 24.w, + ), + decoration: BoxDecoration( + border: Border( + bottom: BorderSide( + width: 1, + color: Color(0x99D0D0D0), + ), + ), + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Expanded( + child: Row( + children: [ + leading ?? SizedBox.shrink(), + 8.horizontalSpace, + Text( + title, + style: TextStyle( + color: Colors.black, + fontSize: 14, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + ], + ), + ), + if (trailingText != null) + Text( + trailingText!, + style: TextStyle( + color: Color(0xFF0F62FE), + fontSize: 14, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + if (trailing != null) + SizedBox.square( + dimension: 24.w, + child: trailing!, + ) + ], + ), + ); + } +} diff --git a/lib/src/mobile_ui/77/page_77.dart b/lib/src/mobile_ui/77/page_77.dart new file mode 100644 index 0000000..a9e55b1 --- /dev/null +++ b/lib/src/mobile_ui/77/page_77.dart @@ -0,0 +1,289 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; + +class Page77 extends StatelessWidget { + const Page77({super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + foregroundColor: Colors.black, + backgroundColor: Colors.white, + title: Text("Interests"), + actions: [ + IconButton( + onPressed: () {}, + icon: Icon(Icons.notifications_none), + ), + IconButton( + onPressed: () {}, + icon: Icon(Icons.search), + ), + ], + ), + body: SingleChildScrollView( + padding: EdgeInsets.symmetric(vertical: 26.h, horizontal: 24.w), + child: Column( + children: [ + Row( + children: [ + Text( + 'Design & technology', + style: TextStyle( + color: Colors.black, + fontSize: 18, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w500, + ), + ), + ], + ), + 20.verticalSpace, + ...List.generate( + 8, + (index) => SettingsCard( + title: 'Topic #${index + 1}', + isFollowing: index % 2 == 1, + ), + ) + ], + ), + ), + drawerScrimColor: Colors.transparent, + drawer: Drawer( + backgroundColor: Color(0xFF262626), + width: 316.w, + child: SafeArea( + bottom: false, + child: Column( + children: [ + Container( + padding: EdgeInsets.only(left: 27.w, bottom: 14.h, top: 27.h), + width: double.infinity, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + width: 80, + height: 80, + decoration: ShapeDecoration( + color: Color(0xFFC4C4C4), + shape: OvalBorder( + side: BorderSide( + width: 1, + strokeAlign: BorderSide.strokeAlignOutside, + color: Colors.white, + ), + ), + ), + ), + SizedBox( + height: 32.h, + ), + Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Your name', + style: TextStyle( + color: Colors.white, + fontSize: 18.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + const SizedBox(height: 12), + Text( + 'View profile', + style: TextStyle( + color: Color(0xFFA8A8A8), + fontSize: 12.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w300, + ), + ), + ], + ), + ], + ), + ), + Expanded( + child: Container( + width: double.infinity, + padding: EdgeInsets.symmetric(horizontal: 27, vertical: 22), + color: Color(0xff525252), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Tab #1', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + Text( + 'Tab #2', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + Text( + 'Tab #3', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + Text( + 'Tab #4', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 48.h, + ), + Text( + 'Tab #5', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + Text( + 'Tab #6', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + Text( + 'Tab #7', + style: TextStyle( + color: Colors.white, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox( + height: 24.h, + ), + ], + ), + )) + ], + ), + ), + ), + ); + } +} + +class SettingsCard extends StatelessWidget { + const SettingsCard({ + super.key, + required this.title, + this.isFollowing = false, + }); + + final String title; + final bool isFollowing; + + @override + Widget build(BuildContext context) { + return Container( + padding: EdgeInsets.symmetric( + vertical: 18.h, + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Expanded( + child: Row( + children: [ + Container( + width: 51, + height: 51, + decoration: ShapeDecoration( + color: Color(0xFFC4C4C4), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(8)), + ), + ), + 12.horizontalSpace, + Text( + title, + style: TextStyle( + color: Colors.black, + fontSize: 14, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w500, + ), + ), + ], + ), + ), + Container( + width: 98.w, + height: 34.h, + padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), + decoration: ShapeDecoration( + color: !isFollowing ? Color(0xFF0043CE) : null, + shape: RoundedRectangleBorder( + side: BorderSide( + width: 1, + color: + !isFollowing ? Color(0xFF0043CE) : Color(0xFF262626)), + borderRadius: BorderRadius.circular(50), + ), + ), + alignment: Alignment.center, + child: Text( + !isFollowing ? 'Follow' : 'Following', + style: TextStyle( + color: !isFollowing ? Colors.white : Colors.black, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w500, + ), + ), + ) + ], + ), + ); + } +} diff --git a/lib/src/mobile_ui/78/page_78.dart b/lib/src/mobile_ui/78/page_78.dart new file mode 100644 index 0000000..066b6c1 --- /dev/null +++ b/lib/src/mobile_ui/78/page_78.dart @@ -0,0 +1,252 @@ +import 'package:flutter/material.dart'; +import 'package:flutter/src/widgets/framework.dart'; +import 'package:flutter/src/widgets/placeholder.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; +import 'package:google_fonts/google_fonts.dart'; + +final options = ['Self', 'Mental Health', 'Accessibility', 'Film']; + +class Page78 extends StatelessWidget { + const Page78({super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + foregroundColor: Colors.black, + backgroundColor: Colors.white, + title: Text("Following"), + titleTextStyle: TextStyle( + color: Colors.black, + fontSize: 24, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w600, + ), + centerTitle: false, + automaticallyImplyLeading: false, + actions: [ + IconButton( + onPressed: () {}, + icon: Icon(Icons.notifications_none), + ), + ], + ), + body: SingleChildScrollView( + padding: EdgeInsets.symmetric( + vertical: 13, + ), + child: Column( + children: [ + SizedBox( + height: 48.h, + child: ListView.separated( + scrollDirection: Axis.horizontal, + itemCount: options.length + 1, + separatorBuilder: (context, index) => SizedBox( + width: 8.h, + ), + itemBuilder: (context, index) => index == 0 + ? SizedBox.shrink() + : FilterChip( + label: Text( + options[index - 1], + style: GoogleFonts.workSans( + color: Color(0xFF262626), + fontSize: 14.sp, + fontWeight: FontWeight.w500, + letterSpacing: -0.41, + ), + ), + selected: false, + onSelected: (value) {}, + backgroundColor: Colors.transparent, + shape: RoundedRectangleBorder( + side: BorderSide( + color: Colors.black, + ), + borderRadius: BorderRadius.circular(50)), + showCheckmark: false, + selectedColor: Colors.white, + selectedShadowColor: Color(0xff333333), + padding: EdgeInsets.symmetric( + horizontal: 16.w, vertical: 8.h), + // elevation: 2, + ), + ), + ), + 23.verticalSpace, + SizedBox( + height: 120.h, + child: ListView.separated( + scrollDirection: Axis.horizontal, + itemBuilder: (context, index) => index == 0 + ? SizedBox.shrink() + : SizedBox( + width: 81.w, + child: Column( + children: [ + Stack( + children: [ + Container( + width: 75.w, + height: 75.h, + margin: EdgeInsets.only(right: 6.w, top: 6.h), + decoration: BoxDecoration( + color: Color(0xFFC4C4C4), + borderRadius: BorderRadius.circular(8), + ), + ), + Positioned( + right: 0, + child: Container( + padding: EdgeInsets.all(4.w), + alignment: Alignment.center, + decoration: BoxDecoration( + shape: BoxShape.circle, + color: Colors.black, + border: + Border.all(color: Colors.white)), + child: Text( + '9+', + style: TextStyle( + color: Colors.white, + fontSize: 10.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w500, + ), + ), + ), + ), + ], + ), + SizedBox( + height: 6.h, + ), + SizedBox( + width: 60.w, + child: Text( + 'UX Collective', + textAlign: TextAlign.center, + style: TextStyle( + color: Colors.black, + fontSize: 12.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + ) + ], + ), + ), + separatorBuilder: (context, index) => SizedBox( + width: 16.w, + ), + itemCount: 6, + ), + ), + 26.verticalSpace, + Container( + width: double.infinity, + padding: EdgeInsets.symmetric(horizontal: 8.w), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + DropdownButton( + items: [DropdownMenuItem(child: Text("TOP STORIES"))], + onChanged: (value) {}, + elevation: 0, + underline: SizedBox.shrink(), + iconEnabledColor: Color(0xff161616), + iconSize: 24.w, + style: TextStyle( + color: Colors.black, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w600, + ), + ), + Row( + children: [ + Container( + width: 36.w, + height: 36.w, + decoration: ShapeDecoration( + color: Color(0xFFC4C4C4), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(4)), + ), + ), + 8.horizontalSpace, + Text.rich( + TextSpan( + text: 'Oscar Sun', + children: [ + TextSpan( + text: ' in ', + style: TextStyle( + color: Color(0xFFA8A8A8), + fontSize: 12.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + TextSpan( + text: "UX collective · Aug 28", + ) + ], + style: TextStyle( + color: Colors.black, + fontSize: 12.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + ), + ], + ), + 22.verticalSpace, + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Living in a lockdown night ...', + style: TextStyle( + color: Colors.black, + fontSize: 24.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w600, + letterSpacing: -1, + ), + ), + 8.verticalSpace, + Text( + 'Maria is one of the large number of asylum seekers who live their lives - in many cases for years. ', + style: TextStyle( + color: Color(0xFFA8A8A8), + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ) + ], + ), + 22.verticalSpace, + SizedBox( + child: Text( + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sapien erat bibendum orci nisl, phasellus sed. Aliquet in viverra id quis facilisis pellentesque scelerisque suspendisse. At amet, elit magna at magnis at porta. In mi ac sed tincidunt vitae diam. Lacinia enim posuere id nunc, odio lacinia. Ante vitae faucibus lectus tincidunt aliquam nunc, ut turpis. Faucibus eget risus interdum bibendum enim est. Lacus, aliquam enim etiam sit. Volutpat nibh in bibendum ut elit mollis.', + style: GoogleFonts.lora( + color: Color(0xFF262626), + fontSize: 15.sp, + fontWeight: FontWeight.w400, + ), + ), + ), + ], + ), + ), + ], + ), + ), + ); + } +} diff --git a/lib/src/mobile_ui/79/page_79.dart b/lib/src/mobile_ui/79/page_79.dart new file mode 100644 index 0000000..7543cd8 --- /dev/null +++ b/lib/src/mobile_ui/79/page_79.dart @@ -0,0 +1,217 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; + +class Page79 extends StatelessWidget { + const Page79({super.key}); + + @override + Widget build(BuildContext context) { + return DefaultTabController( + length: 4, + child: Scaffold( + appBar: AppBar( + foregroundColor: Colors.black, + backgroundColor: Colors.white, + title: Text("Reading List"), + titleTextStyle: TextStyle( + color: Colors.black, + fontSize: 24, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w600, + ), + centerTitle: false, + automaticallyImplyLeading: false, + actions: [ + IconButton( + onPressed: () {}, + icon: Icon(Icons.notifications_none), + ), + ], + bottom: TabBar( + labelColor: Colors.black, + isScrollable: true, + labelStyle: TextStyle( + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w500, + ), + unselectedLabelColor: Color(0xFFA8A8A8), + unselectedLabelStyle: TextStyle( + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w500, + ), + labelPadding: EdgeInsets.symmetric(horizontal: 14.sp), + indicatorColor: Colors.black, + indicatorWeight: 3, + tabs: [ + Tab( + text: 'Saved (14)', + ), + Tab( + text: 'Archived', + ), + Tab( + text: 'Recently Viewed', + ), + Tab( + text: 'Highlights', + ), + ], + ), + ), + body: TabBarView(children: [ + Post(), + Post(), + Post(), + Post(), + ]), + ), + ); + } +} + +class Post extends StatelessWidget { + const Post({super.key}); + + @override + Widget build(BuildContext context) { + return SingleChildScrollView( + padding: EdgeInsets.only(top: 19), + child: Column( + children: List.generate( + 6, + (index) => PostCard(), + ), + ), + ); + } +} + +class PostCard extends StatelessWidget { + const PostCard({ + super.key, + }); + + @override + Widget build(BuildContext context) { + return Container( + margin: EdgeInsets.only(bottom: 20, left: 8, right: 8), + padding: EdgeInsets.only(bottom: 24), + decoration: BoxDecoration( + border: Border( + bottom: BorderSide(color: Color(0xffD0D0D0)), + ), + ), + child: Column( + children: [ + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'How to use design thinking in your projects', + style: TextStyle( + color: Colors.black, + fontSize: 18.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w500, + ), + ), + SizedBox( + height: 8.h, + ), + Text( + 'At some point, you would want to ..', + style: TextStyle( + color: Color(0xFFA8A8A8), + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w500, + ), + ) + ], + ), + ), + SizedBox(width: 10.w), + Stack( + children: [ + Container( + margin: EdgeInsets.only(left: 4, bottom: 6), + width: 80.w, + height: 80.w, + decoration: BoxDecoration(color: Color(0xFF525252)), + ), + Positioned( + bottom: 0, + left: 0, + child: Container( + width: 24.w, + height: 24.w, + decoration: ShapeDecoration( + color: Color(0xFFA8A8A8), + shape: RoundedRectangleBorder( + side: BorderSide(width: 2, color: Color(0xFF525252)), + ), + ), + ), + ), + ], + ) + ], + ), + SizedBox( + height: 24.h, + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Author Name', + style: TextStyle( + color: Colors.black, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + SizedBox(height: 2.sp), + Text( + 'May 20 · 5 min read', + style: TextStyle( + color: Color(0xFFA8A8A8), + fontSize: 12.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + ], + ), + Row( + mainAxisSize: MainAxisSize.min, + children: [ + Icon( + Icons.bookmark_border, + size: 24.w, + ), + SizedBox(width: 24.sp), + Icon( + Icons.more_vert, + size: 24.w, + ), + ], + ), + ], + ), + ], + ), + ); + } +} diff --git a/lib/src/mobile_ui/80/page_80.dart b/lib/src/mobile_ui/80/page_80.dart new file mode 100644 index 0000000..22b1d3f --- /dev/null +++ b/lib/src/mobile_ui/80/page_80.dart @@ -0,0 +1,204 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; +import 'package:google_fonts/google_fonts.dart'; + +class Page80 extends StatelessWidget { + Page80({super.key}); + + final options = [ + 'Psychology', + 'Productivity', + 'Design', + 'Film', + ]; + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + foregroundColor: Colors.black, + backgroundColor: Colors.white, + automaticallyImplyLeading: false, + centerTitle: false, + title: Text("Explore"), + titleTextStyle: GoogleFonts.workSans( + fontSize: 24, + fontWeight: FontWeight.w600, + color: Colors.black, + ), + actions: [ + IconButton( + onPressed: () {}, icon: Icon(Icons.notifications_none_outlined)) + ], + ), + body: SingleChildScrollView( + child: Column( + children: [ + Padding( + padding: const EdgeInsets.all(12.0), + child: TextField( + decoration: InputDecoration( + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + borderSide: BorderSide.none, + gapPadding: 7, + ), + prefixIcon: Icon(Icons.search), + suffixIcon: Icon(Icons.mic), + fillColor: Color(0x1E767680), + filled: true, + hintText: "Search", + hintStyle: TextStyle( + color: Color(0x993C3C43), + fontSize: 17, + fontFamily: 'SF Pro Text', + fontWeight: FontWeight.w400, + letterSpacing: -0.41, + ), + contentPadding: EdgeInsets.symmetric( + vertical: 7.0, + ), + ), + ), + ), + SizedBox( + height: 48, + child: ListView.separated( + padding: EdgeInsets.symmetric(horizontal: 12.w), + scrollDirection: Axis.horizontal, + itemBuilder: (context, index) => FilterChip( + label: Text( + options[index], + style: GoogleFonts.workSans( + color: Color(0xFF262626), + fontSize: 14.sp, + fontWeight: FontWeight.w400, + letterSpacing: -0.41, + ), + ), + selected: false, + onSelected: (value) {}, + backgroundColor: Colors.transparent, + shape: RoundedRectangleBorder( + side: BorderSide( + color: Colors.black, + ), + borderRadius: BorderRadius.circular(50.r)), + showCheckmark: false, + selectedColor: Colors.white, + selectedShadowColor: Color(0xff333333), + padding: + EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h), + // elevation: 2, + ), + itemCount: 4, + separatorBuilder: (BuildContext context, int index) => SizedBox( + width: 8.w, + ), + ), + ), + Padding( + padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 24), + child: Divider( + color: Color(0xFFD0D0D0), + ), + ), + Padding( + padding: EdgeInsets.symmetric(horizontal: 12.w), + child: Row( + children: [ + Icon(Icons.find_in_page), + Text( + 'RECOMMENDED FOR YOU', + style: TextStyle( + color: Colors.black, + fontSize: 14, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w600, + ), + ) + ], + ), + ), + ...List.generate( + 4, + (index) => Container( + padding: EdgeInsets.symmetric(vertical: 24.h, horizontal: 12.w), + decoration: BoxDecoration( + border: Border( + bottom: BorderSide( + width: 1.w, + color: Color(0xFFD0D0D0), + ), + )), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + children: [ + Container( + width: 24.w, + height: 24.w, + decoration: ShapeDecoration( + color: Color(0xFFA8A8A8), + shape: RoundedRectangleBorder( + side: BorderSide( + width: 2.w, color: Color(0xFF525252)), + ), + ), + ), + 8.horizontalSpace, + Text( + 'Author Name', + style: TextStyle( + color: Colors.black, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + ], + ), + 4.verticalSpace, + Text( + 'How to use design thinking in your projects', + style: TextStyle( + color: Colors.black, + fontSize: 18.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w500, + ), + ), + 8.verticalSpace, + Text( + 'May 20 · 5 min read', + style: TextStyle( + color: Color(0xFFA8A8A8), + fontSize: 12.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ) + ], + ), + ), + 8.horizontalSpace, + Container( + width: 80.w, + height: 80.w, + decoration: BoxDecoration(color: Color(0xFF525252)), + ), + ], + ), + ), + ) + ], + ), + ), + ); + } +} diff --git a/lib/src/mobile_ui/81/page_81.dart b/lib/src/mobile_ui/81/page_81.dart new file mode 100644 index 0000000..ecf64ca --- /dev/null +++ b/lib/src/mobile_ui/81/page_81.dart @@ -0,0 +1,220 @@ +import 'dart:collection'; + +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; + +class Page81 extends StatefulWidget { + const Page81({super.key}); + + @override + State createState() => _Page81State(); +} + +class _Page81State extends State with SingleTickerProviderStateMixin { + late final PageController pageController; + late final TabController tabController; + double value = 0; + + @override + void initState() { + super.initState(); + pageController = PageController( + initialPage: 1, + ); + tabController = TabController(length: 3, vsync: this); + } + + @override + void dispose() { + tabController.dispose(); + pageController.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + backgroundColor: Colors.white, + foregroundColor: Colors.black, + centerTitle: false, + automaticallyImplyLeading: false, + title: Text( + 'Message.me', + style: TextStyle( + color: Colors.black, + fontSize: 24, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w600, + ), + ), + actions: [ + IconButton( + onPressed: () {}, + icon: Icon(Icons.search), + ), + IconButton( + onPressed: () {}, + icon: Icon(Icons.more_vert), + ), + ], + bottom: PreferredSize( + preferredSize: Size(double.infinity, 50), + child: Row( + children: [ + IconButton( + onPressed: () { + pageController.animateToPage(0, + duration: Duration(milliseconds: 200), + curve: Curves.decelerate); + tabController.animateTo(0); + }, + icon: Icon(Icons.camera_alt), + ), + 14.horizontalSpace, + Expanded( + child: TabBar( + controller: tabController, + labelColor: Colors.black, + indicatorColor: Colors.black, + indicatorWeight: 3, + onTap: (value) { + if (pageController.page != 1.0) { + pageController.animateToPage(1, + duration: Duration(milliseconds: 200), + curve: Curves.decelerate); + } + }, + tabs: [ + Tab( + text: 'CHATS', + ), + Tab( + text: 'STATUS', + ), + Tab( + text: 'CALLS', + ), + ], + ), + ), + ], + ), + ), + ), + body: PageView( + controller: pageController, + children: [ + Container( + color: Colors.black, + ), + NotificationListener( + onNotification: (notification) { + if (notification.overscroll < 0) { + debugPrint("Overscrolled to the left"); + + pageController.animateTo(notification.dragDetails!.delta.dx, + duration: Duration(milliseconds: 200), + curve: Curves.decelerate); + } + return true; + }, + child: TabBarView( + controller: tabController, + children: [ + ChatList(), + Center(child: Text('Status')), + Center(child: Text('Calls')), + ], + ), + ), + ], + ), + ); + } +} + +class ChatList extends StatelessWidget { + const ChatList({super.key}); + + @override + Widget build(BuildContext context) { + final width = MediaQuery.of(context).size.width; + return ListView.separated( + padding: EdgeInsets.all(14), + itemCount: 7, + itemBuilder: (context, index) => SizedBox( + // height: 60.h, + child: Row( + children: [ + Container( + width: 60.w, + height: 60.w, + decoration: ShapeDecoration( + color: Color(0xFFC4C4C4), + shape: OvalBorder(), + ), + ), + 12.horizontalSpace, + Expanded( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + 'Alison Kim', + style: TextStyle( + color: Colors.black, + fontSize: 17, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w600, + ), + ), + Text( + 'Yesterday', + style: TextStyle( + color: Colors.black, + fontSize: 12, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ) + ], + ), + 6.verticalSpace, + Row( + children: [ + Icon(Icons.done_all), + 4.horizontalSpace, + Text( + 'Thank you. ', + style: TextStyle( + color: Colors.black, + fontSize: 14, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + ], + ) + ], + ), + ), + ], + ), + ), + separatorBuilder: (context, index) => Container( + margin: EdgeInsets.only( + left: width * 0.16, + ), + child: Divider( + height: 28, + color: Color(0xFFD0D0D0), + ), + ), + ); + } +} diff --git a/lib/src/mobile_ui/82/page_82.dart b/lib/src/mobile_ui/82/page_82.dart new file mode 100644 index 0000000..db5ccbd --- /dev/null +++ b/lib/src/mobile_ui/82/page_82.dart @@ -0,0 +1,317 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; + +class Page82 extends StatefulWidget { + const Page82({super.key}); + + @override + State createState() => _Page82State(); +} + +class _Page82State extends State with SingleTickerProviderStateMixin { + late final PageController pageController; + late final TabController tabController; + double value = 0; + + @override + void initState() { + super.initState(); + pageController = PageController( + initialPage: 1, + ); + tabController = TabController(initialIndex: 1, length: 3, vsync: this); + } + + @override + void dispose() { + tabController.dispose(); + pageController.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + backgroundColor: Colors.white, + foregroundColor: Colors.black, + centerTitle: false, + automaticallyImplyLeading: false, + title: Text( + 'Message.me', + style: TextStyle( + color: Colors.black, + fontSize: 24, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w600, + ), + ), + actions: [ + IconButton( + onPressed: () {}, + icon: Icon(Icons.search), + ), + IconButton( + onPressed: () {}, + icon: Icon(Icons.more_vert), + ), + ], + bottom: PreferredSize( + preferredSize: Size(double.infinity, 50), + child: Row( + children: [ + IconButton( + onPressed: () { + pageController.animateToPage(0, + duration: Duration(milliseconds: 200), + curve: Curves.decelerate); + tabController.animateTo(0); + }, + icon: Icon(Icons.camera_alt), + ), + 14.horizontalSpace, + Expanded( + child: TabBar( + controller: tabController, + labelColor: Colors.black, + indicatorColor: Colors.black, + indicatorWeight: 3, + onTap: (value) { + if (pageController.page != 1.0) { + pageController.animateToPage(1, + duration: Duration(milliseconds: 200), + curve: Curves.decelerate); + } + }, + tabs: [ + Tab( + text: 'CHATS', + ), + Tab( + text: 'STATUS', + ), + Tab( + text: 'CALLS', + ), + ], + ), + ), + ], + ), + ), + ), + body: PageView( + controller: pageController, + children: [ + Container( + color: Colors.black, + ), + NotificationListener( + onNotification: (notification) { + if (notification.overscroll < 0) { + debugPrint("Overscrolled to the left"); + + pageController.animateTo(notification.dragDetails!.delta.dx, + duration: Duration(milliseconds: 200), + curve: Curves.decelerate); + } + return true; + }, + child: TabBarView( + controller: tabController, + children: [ + Center(child: Text('Chats')), + StatusList(), + Center(child: Text('Calls')), + ], + ), + ), + ], + ), + floatingActionButton: SizedBox( + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + FloatingActionButton( + onPressed: () {}, + backgroundColor: Colors.white, + foregroundColor: Colors.black, + shape: OvalBorder( + side: BorderSide(width: 2, color: Color(0xFF51AB9F)), + ), + child: Icon(Icons.edit), + ), + 16.verticalSpace, + FloatingActionButton( + onPressed: () {}, + backgroundColor: Color(0xFF51AB9F), + foregroundColor: Colors.white, + child: Icon(Icons.camera_alt), + ), + ], + ), + ), + ); + } +} + +class StatusList extends StatelessWidget { + const StatusList({super.key}); + + @override + Widget build(BuildContext context) { + final width = MediaQuery.of(context).size.width; + return ListView( + padding: EdgeInsets.all(14), + children: [ + MyStatusCard(), + Container( + margin: EdgeInsets.only( + left: width * 0.16, + ), + child: Divider( + height: 28, + color: Color(0xFFD0D0D0), + ), + ), + 14.verticalSpace, + Row( + children: [ + Text( + 'Recent updates', + style: TextStyle( + color: Colors.black, + fontSize: 14, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w500, + ), + ), + ], + ), + 9.verticalSpace, + ...List.generate(4, (index) => StatusCard()), + ], + ); + } +} + +class StatusCard extends StatelessWidget { + const StatusCard({super.key}); + + @override + Widget build(BuildContext context) { + return Container( + margin: EdgeInsets.only(bottom: 24.h), + child: Row( + children: [ + Container( + width: 60.w, + height: 60.h, + decoration: ShapeDecoration( + color: Color(0xFFC4C4C4), + shape: OvalBorder( + side: BorderSide(width: 2, color: Color(0xFF262626)), + ), + ), + ), + 12.horizontalSpace, + Expanded( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Alison Kim', + style: TextStyle( + color: Colors.black, + fontSize: 17, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w600, + ), + ), + 6.verticalSpace, + Text( + 'Today, 3:23 PM', + style: TextStyle( + color: Colors.black, + fontSize: 14, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ) + ], + ), + ), + ], + ), + ); + } +} + +class MyStatusCard extends StatelessWidget { + const MyStatusCard({ + super.key, + }); + + @override + Widget build(BuildContext context) { + return SizedBox( + // height: 60.h, + child: Row( + children: [ + Stack( + children: [ + Container( + width: 60.w, + height: 60.h, + decoration: ShapeDecoration( + color: Color(0xFFC4C4C4), + shape: OvalBorder(), + ), + ), + Positioned( + bottom: 0, + right: 0, + child: Container( + decoration: BoxDecoration( + color: Colors.white, + shape: BoxShape.circle, + ), + child: Icon(Icons.add_circle), + ), + ), + ], + ), + 12.horizontalSpace, + Expanded( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Alison Kim', + style: TextStyle( + color: Colors.black, + fontSize: 17, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w600, + ), + ), + 6.verticalSpace, + Text( + 'Today, 3:23 PM', + style: TextStyle( + color: Colors.black, + fontSize: 14, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ) + ], + ), + ), + ], + ), + ); + } +} diff --git a/lib/src/mobile_ui/83/page_83.dart b/lib/src/mobile_ui/83/page_83.dart new file mode 100644 index 0000000..b43a4cc --- /dev/null +++ b/lib/src/mobile_ui/83/page_83.dart @@ -0,0 +1,234 @@ +import 'package:flutter/material.dart'; +import 'dart:math' as math; +import 'package:flutter_screenutil/flutter_screenutil.dart'; + +class Page83 extends StatefulWidget { + const Page83({super.key}); + + @override + State createState() => _Page83State(); +} + +class _Page83State extends State with SingleTickerProviderStateMixin { + late final PageController pageController; + late final TabController tabController; + double value = 0; + + @override + void initState() { + super.initState(); + pageController = PageController( + initialPage: 1, + ); + tabController = TabController(initialIndex: 2, length: 3, vsync: this); + } + + @override + void dispose() { + tabController.dispose(); + pageController.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + backgroundColor: Colors.white, + foregroundColor: Colors.black, + centerTitle: false, + automaticallyImplyLeading: false, + title: Text( + 'Message.me', + style: TextStyle( + color: Colors.black, + fontSize: 24, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w600, + ), + ), + actions: [ + IconButton( + onPressed: () {}, + icon: Icon(Icons.search), + ), + IconButton( + onPressed: () {}, + icon: Icon(Icons.more_vert), + ), + ], + bottom: PreferredSize( + preferredSize: Size(double.infinity, 50), + child: Row( + children: [ + IconButton( + onPressed: () { + pageController.animateToPage(0, + duration: Duration(milliseconds: 200), + curve: Curves.decelerate); + tabController.animateTo(0); + }, + icon: Icon(Icons.camera_alt), + ), + 14.horizontalSpace, + Expanded( + child: TabBar( + controller: tabController, + labelColor: Colors.black, + indicatorColor: Colors.black, + indicatorWeight: 3, + onTap: (value) { + if (pageController.page != 1.0) { + pageController.animateToPage(1, + duration: Duration(milliseconds: 200), + curve: Curves.decelerate); + } + }, + tabs: [ + Tab( + text: 'CHATS', + ), + Tab( + text: 'STATUS', + ), + Tab( + text: 'CALLS', + ), + ], + ), + ), + ], + ), + ), + ), + body: PageView( + controller: pageController, + children: [ + Container( + color: Colors.black, + ), + NotificationListener( + onNotification: (notification) { + if (notification.overscroll < 0) { + debugPrint("Overscrolled to the left"); + + pageController.animateTo(notification.dragDetails!.delta.dx, + duration: Duration(milliseconds: 200), + curve: Curves.decelerate); + } + return true; + }, + child: TabBarView( + controller: tabController, + children: [ + Center(child: Text('Chats')), + Center(child: Text('Status')), + CallList(), + ], + ), + ), + ], + ), + floatingActionButton: SizedBox( + child: FloatingActionButton( + onPressed: () {}, + backgroundColor: Color(0xFF51AB9F), + foregroundColor: Colors.white, + child: Icon(Icons.phone_forwarded), + ), + ), + ); + } +} + +class CallList extends StatelessWidget { + const CallList({super.key}); + + @override + Widget build(BuildContext context) { + final width = MediaQuery.of(context).size.width; + return ListView.separated( + padding: EdgeInsets.all(14), + itemBuilder: (context, index) => CallCard( + index: index, + ), + itemCount: 6, + separatorBuilder: (context, index) => Container( + margin: EdgeInsets.only( + left: width * 0.16, + ), + child: Divider( + height: 28, + color: Color(0xFFD0D0D0), + ), + ), + ); + } +} + +class CallCard extends StatelessWidget { + const CallCard({ + super.key, + required this.index, + }); + + final int index; + + @override + Widget build(BuildContext context) { + return SizedBox( + // height: 60.h, + child: Row( + children: [ + Container( + width: 60.w, + height: 60.h, + decoration: ShapeDecoration( + color: Color(0xFFC4C4C4), + shape: OvalBorder(), + ), + ), + 12.horizontalSpace, + Expanded( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Alison Kim', + style: TextStyle( + color: Colors.black, + fontSize: 17, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w600, + ), + ), + 6.verticalSpace, + Row( + children: [ + Transform.rotate( + angle: index >= 2 ? (-math.pi / 4) : (math.pi / 1.3), + child: Icon(Icons.arrow_right_alt)), + 4.horizontalSpace, + Text( + 'Today, 3:23 PM', + style: TextStyle( + color: Colors.black, + fontSize: 14, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + ], + ) + ], + ), + ), + IconButton( + onPressed: () {}, + icon: Icon(index == 0 ? Icons.videocam : Icons.phone)) + ], + ), + ); + } +} diff --git a/lib/src/mobile_ui/84/page_84.dart b/lib/src/mobile_ui/84/page_84.dart new file mode 100644 index 0000000..6ecf0bc --- /dev/null +++ b/lib/src/mobile_ui/84/page_84.dart @@ -0,0 +1,134 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; +import 'package:flutter_ui_kit_obkm/src/mobile_ui/84/widgets/bubble.dart'; + +class Page84 extends StatelessWidget { + const Page84({super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + backgroundColor: Colors.white, + foregroundColor: Colors.black, + centerTitle: false, + titleSpacing: 0, + title: Row( + children: [ + Container( + width: 36.w, + height: 36.w, + decoration: ShapeDecoration( + color: Color(0xffC4C4C4), + shape: OvalBorder(), + ), + ), + 8.horizontalSpace, + Text("Alison Kim"), + ], + ), + actions: [ + IconButton( + onPressed: () {}, + icon: Icon(Icons.videocam), + ), + IconButton( + onPressed: () {}, + icon: Icon(Icons.phone), + ), + ], + ), + body: Column( + children: [ + Expanded( + child: ListView( + children: [ + SentMessage( + message: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh integer massa risus est feugiat fames viverra. Sed molestie risus, odio a mi scelerisque. Tincidunt nullam arcu cursus lobortis enim amet. Quis amet a, in aliquam pellentesque.", + time: "1:31 PM", + ), + ReceivedMessage( + message: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh integer massa risus est feugiat fames viverra. ", + time: "1:32 PM", + ), + SentMessage( + message: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh integer massa risus est feugiat fames viverra. Sed molestie risus, odio a mi scelerisque. Tincidunt nullam arcu cursus lobortis enim amet. Quis amet a, in aliquam pellentesque.", + time: "1:35 PM", + ), + ], + ), + ), + Container( + // height: 70.h, + padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 7.h), + color: Colors.grey.shade300, + child: SafeArea( + child: Row( + children: [ + GestureDetector( + onTap: () {}, + child: Icon( + Icons.camera_alt, + size: 24.w, + ), + ), + 16.horizontalSpace, + GestureDetector( + onTap: () {}, + child: Icon( + Icons.photo, + size: 24.w, + ), + ), + 4.horizontalSpace, + Expanded( + child: Center( + child: TextField( + decoration: InputDecoration( + border: OutlineInputBorder( + borderSide: BorderSide.none, + borderRadius: BorderRadius.circular(50), + ), + hintText: "Type a message...", + fillColor: Colors.white, + filled: true, + ), + ), + ), + ), + 4.horizontalSpace, + GestureDetector( + onTap: () {}, + child: Icon( + Icons.insert_emoticon, + size: 24.w, + ), + ), + 11.horizontalSpace, + GestureDetector( + onTap: () {}, + child: Container( + width: 40.w, + height: 40.w, + alignment: Alignment.center, + decoration: ShapeDecoration( + shape: OvalBorder(), color: Color(0xff007AFF)), + child: Icon( + Icons.send, + color: Colors.white, + size: 24.w, + ), + ), + ), + ], + ), + ), + ), + ], + ), + ); + } +} diff --git a/lib/src/mobile_ui/84/widgets/bubble.dart b/lib/src/mobile_ui/84/widgets/bubble.dart new file mode 100644 index 0000000..fc11f19 --- /dev/null +++ b/lib/src/mobile_ui/84/widgets/bubble.dart @@ -0,0 +1,165 @@ +import 'dart:math' as math; + +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; + +final Color sentColor = Color(0xff007AFF); +final Color receiveColor = Color(0xff262626); + +class Triangle extends CustomPainter { + final Color bgColor; + + Triangle(this.bgColor); + + @override + void paint(Canvas canvas, Size size) { + var paint = Paint()..color = bgColor; + + var path = Path(); + path.lineTo(0, -15); + path.lineTo(15, 0); + path.lineTo(0, -2); + + canvas.drawPath(path, paint); + } + + @override + bool shouldRepaint(CustomPainter oldDelegate) { + return true; + } +} + +class SentMessage extends StatelessWidget { + const SentMessage({ + Key? key, + required this.message, + required this.time, + }) : super(key: key); + + final String message; + final String time; + + @override + Widget build(BuildContext context) { + final messageTextGroup = Flexible( + child: Row( + mainAxisAlignment: MainAxisAlignment.end, + crossAxisAlignment: CrossAxisAlignment.end, + children: [ + Flexible( + child: Container( + padding: EdgeInsets.all(14), + decoration: BoxDecoration( + color: sentColor, + borderRadius: BorderRadius.only( + topLeft: Radius.circular(18), + topRight: Radius.circular(18), + bottomLeft: Radius.circular(18), + bottomRight: Radius.circular(4), + ), + ), + child: Text( + message, + style: TextStyle( + color: Colors.white, + fontFamily: 'Work Sans', + fontSize: 14, + ), + ), + ), + ), + CustomPaint(painter: Triangle(sentColor)), + ], + )); + + return Padding( + padding: + EdgeInsets.only(right: 18.0.w, left: 20.w, top: 5.h, bottom: 5.h), + child: Row( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + SizedBox(height: 40.h), + Text( + time, + style: TextStyle( + fontFamily: "Work Sans", + fontSize: 12, + ), + ), + 17.horizontalSpace, + messageTextGroup, + ], + ), + ); + } +} + +class ReceivedMessage extends StatelessWidget { + const ReceivedMessage({ + Key? key, + required this.message, + required this.time, + }) : super(key: key); + + final String message; + final String time; + + @override + Widget build(BuildContext context) { + final messageTextGroup = Flexible( + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.end, + children: [ + Transform( + alignment: Alignment.center, + transform: Matrix4.rotationY(math.pi), + child: CustomPaint( + painter: Triangle(receiveColor), + ), + ), + Flexible( + child: Container( + padding: EdgeInsets.all(14), + decoration: BoxDecoration( + color: receiveColor, + borderRadius: BorderRadius.only( + topRight: Radius.circular(18), + topLeft: Radius.circular(18), + bottomLeft: Radius.circular(4), + bottomRight: Radius.circular(18), + ), + ), + child: Text( + message, + style: TextStyle( + color: Colors.white, + fontFamily: 'Work Sans', + fontSize: 14, + ), + ), + ), + ), + ], + )); + + return Padding( + padding: EdgeInsets.only(right: 50.0, left: 18, top: 5, bottom: 5), + child: Row( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + SizedBox(height: 30), + messageTextGroup, + 17.horizontalSpace, + Text( + time, + style: TextStyle( + fontFamily: "Work Sans", + fontSize: 12, + ), + ), + ], + ), + ); + } +} diff --git a/lib/src/mobile_ui/85/page_85.dart b/lib/src/mobile_ui/85/page_85.dart new file mode 100644 index 0000000..a082866 --- /dev/null +++ b/lib/src/mobile_ui/85/page_85.dart @@ -0,0 +1,154 @@ +import 'package:flutter/material.dart'; +import 'package:flutter/src/widgets/framework.dart'; +import 'package:flutter/src/widgets/placeholder.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; + +class Page85 extends StatelessWidget { + const Page85({super.key}); + + @override + Widget build(BuildContext context) { + return DefaultTabController( + length: 3, + child: Scaffold( + appBar: AppBar( + backgroundColor: Colors.white, + foregroundColor: Colors.black, + centerTitle: false, + automaticallyImplyLeading: false, + title: Text.rich( + TextSpan( + children: [ + TextSpan( + text: 'Ramdom ', + style: TextStyle( + color: Colors.black, + fontSize: 20, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w600, + ), + ), + TextSpan( + text: 'Talk', + style: TextStyle( + color: Colors.black, + fontSize: 20, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + ], + ), + ), + bottom: TabBar( + labelColor: Colors.black, + indicatorColor: Color(0xFFDA1E28), + tabs: [ + Tab( + text: "Newest", + ), + Tab( + text: "Trending", + ), + Tab( + text: "Most Viewed", + ), + ], + ), + ), + body: ListView.separated( + padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 11.h), + itemBuilder: (BuildContext context, int index) => Container( + width: 366, + height: 200, + decoration: ShapeDecoration( + color: Color(0x7FC4C4C4), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(2)), + ), + alignment: Alignment.bottomLeft, + padding: EdgeInsets.symmetric(horizontal: 9.w, vertical: 7.h), + child: Row( + children: [ + Expanded( + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Author name', + style: TextStyle( + color: Colors.black, + fontSize: 14, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + const SizedBox(height: 4), + SizedBox( + width: 281, + child: Text( + 'Biden Ends Infrastructure Talks With Senate GOP Group, Saying Its Plan Fell Short', + style: TextStyle( + color: Colors.black, + fontSize: 15, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w600, + ), + ), + ), + ], + ), + ), + Column( + mainAxisSize: MainAxisSize.min, + children: [ + Icon(Icons.more_vert), + 24.verticalSpace, + Text( + '12:10', + style: TextStyle( + color: Colors.black, + fontSize: 12, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ) + ], + ) + ], + ), + ), + itemCount: 4, + separatorBuilder: (BuildContext context, int index) => + 16.verticalSpace, + ), + bottomNavigationBar: BottomNavigationBar( + currentIndex: 0, + selectedItemColor: Colors.red, + unselectedItemColor: Color(0xffA8A8A8), + showSelectedLabels: false, + // type: BottomNavigationBarType.fixed, + items: [ + BottomNavigationBarItem( + icon: Icon(Icons.control_point_duplicate), + label: "", + ), + BottomNavigationBarItem( + icon: Icon(Icons.cast_connected), + label: "", + ), + BottomNavigationBarItem( + icon: Icon(Icons.horizontal_split), + label: "", + ), + BottomNavigationBarItem( + icon: Icon(Icons.perm_contact_cal), + label: "", + ), + ]), + ), + ); + } +} diff --git a/lib/src/mobile_ui/86/page_86.dart b/lib/src/mobile_ui/86/page_86.dart new file mode 100644 index 0000000..6300996 --- /dev/null +++ b/lib/src/mobile_ui/86/page_86.dart @@ -0,0 +1,218 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; + +class Page86 extends StatelessWidget { + const Page86({super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SafeArea( + child: Column( + children: [ + Container( + height: 215.h, + decoration: ShapeDecoration( + color: Color(0x7FC4C4C4), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(2.r)), + ), + ), + Expanded( + child: ListView( + padding: EdgeInsets.symmetric(vertical: 8.h, horizontal: 12.w), + children: [ + Text( + 'Talks to remind you that politics all over the world are as boring as peeling a mango. ', + style: TextStyle( + color: Colors.black, + fontSize: 18.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w600, + ), + ), + 16.verticalSpace, + Row( + children: [ + Text( + '11 talks', + style: TextStyle( + color: Color(0xFFA8A8A8), + fontSize: 12.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + 16.horizontalSpace, + Container( + height: 15.h, + decoration: BoxDecoration( + border: Border( + left: BorderSide( + width: 1, + color: Color(0xFFA8A8A8), + ), + )), + ), + 16.horizontalSpace, + Text( + '3:36:45', + style: TextStyle( + color: Color(0xFFA8A8A8), + fontSize: 12.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + 16.horizontalSpace, + Container( + height: 15.h, + decoration: BoxDecoration( + border: Border( + left: BorderSide( + width: 1, + color: Color(0xFFA8A8A8), + ), + )), + ), + 16.horizontalSpace, + Row( + mainAxisSize: MainAxisSize.min, + children: [ + Icon( + Icons.volume_up, + color: Color(0xffA8A8A8), + ), + 4.horizontalSpace, + Text( + 'Listen', + style: TextStyle( + color: Color(0xFFA8A8A8), + fontSize: 12.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + ], + ), + ], + ), + 15.verticalSpace, + Row( + children: [ + Icon( + Icons.playlist_add, + ), + 20.horizontalSpace, + Icon( + Icons.favorite_outline, + ), + 20.horizontalSpace, + Icon( + Icons.download, + ), + 20.horizontalSpace, + Icon( + Icons.share, + ), + ], + ), + 16.verticalSpace, + Text( + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Est eu tempor nec nulla pulvinar felis nunc. ', + style: TextStyle( + color: Colors.black, + fontSize: 14.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + 16.verticalSpace, + VideoCard(), + 16.verticalSpace, + VideoCard(), + 16.verticalSpace, + VideoCard(), + 16.verticalSpace, + VideoCard(), + 16.verticalSpace, + ], + ), + ), + ], + ), + ), + ); + } +} + +class VideoCard extends StatelessWidget { + const VideoCard({ + super.key, + }); + + @override + Widget build(BuildContext context) { + return Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + width: 151.w, + height: 83.h, + decoration: ShapeDecoration( + color: Color(0x7FC4C4C4), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(2.r)), + ), + padding: EdgeInsets.symmetric(vertical: 10.h, horizontal: 11.w), + alignment: Alignment.bottomRight, + child: Container( + padding: EdgeInsets.all(2.w), + decoration: BoxDecoration(color: Color(0xFF262626)), + child: Text( + '20:20', + style: TextStyle( + color: Colors.white, + fontSize: 12.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + ), + ), + 8.horizontalSpace, + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Author name', + style: TextStyle( + color: Colors.black, + fontSize: 12.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + 2.verticalSpace, + Text( + 'Biden Ends Infrastructure Talks With Senate GOP Group.', + style: TextStyle( + color: Colors.black, + fontSize: 13.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w600, + ), + ) + ], + ), + ), + 4.horizontalSpace, + Icon( + Icons.more_vert, + color: Color(0xffA8A8A8), + ) + ], + ); + } +} diff --git a/lib/src/mobile_ui/87/page_87.dart b/lib/src/mobile_ui/87/page_87.dart new file mode 100644 index 0000000..15cde69 --- /dev/null +++ b/lib/src/mobile_ui/87/page_87.dart @@ -0,0 +1,217 @@ +import 'package:flutter/material.dart'; + +import 'package:flutter_screenutil/flutter_screenutil.dart'; + +class Page87 extends StatelessWidget { + const Page87({super.key}); + + @override + Widget build(BuildContext context) { + return DefaultTabController( + length: 3, + child: Scaffold( + appBar: AppBar( + backgroundColor: Colors.white, + foregroundColor: Colors.black, + centerTitle: false, + automaticallyImplyLeading: false, + title: Text.rich( + TextSpan( + children: [ + TextSpan( + text: 'My Ramdom ', + style: TextStyle( + color: Colors.black, + fontSize: 20, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w600, + ), + ), + TextSpan( + text: 'Talk', + style: TextStyle( + color: Colors.black, + fontSize: 20, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + ], + ), + ), + ), + body: Column( + children: [ + Container( + height: 150.h, + decoration: BoxDecoration(color: Color(0x7FD0D0D0)), + padding: EdgeInsets.only( + left: 24.w, right: 24.w, top: 17.h, bottom: 9.h), + child: Column( + children: [ + Row( + children: [ + CircleAvatar( + radius: 30.r, + backgroundColor: Color(0xFFC4C4C4), + foregroundColor: Colors.black, + child: Icon( + Icons.person, + size: 36.w, + ), + ), + 24.horizontalSpace, + Column( + children: [ + Text( + 'Log in to your account', + style: TextStyle( + color: Colors.black, + fontSize: 16, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w600, + ), + ), + 4.verticalSpace, + Text( + 'Sync my list, likes, and history', + style: TextStyle( + color: Colors.black, + fontSize: 12, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + ], + ) + ], + ), + 26.verticalSpace, + Row( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + Container( + // width: 71.w, + height: 38.h, + padding: EdgeInsets.all(8.w), + decoration: BoxDecoration(color: Color(0xFFDA1E28)), + alignment: Alignment.center, + child: Text( + 'LOG IN', + style: TextStyle( + color: Colors.white, + fontSize: 16.sp, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w700, + ), + ), + ) + ], + ), + ], + ), + ), + Expanded( + child: ListView( + padding: EdgeInsets.symmetric(vertical: 21.h, horizontal: 26.w), + children: [ + Cards( + icon: Icons.playlist_add, + title: "My List", + ), + 24.verticalSpace, + Cards( + icon: Icons.favorite_border, + title: "Likes", + ), + 24.verticalSpace, + Cards( + icon: Icons.download, + title: "Downloads", + ), + 24.verticalSpace, + Cards( + icon: Icons.share, + title: "Share", + ), + ], + ), + ), + ], + ), + bottomNavigationBar: BottomNavigationBar( + currentIndex: 3, + selectedItemColor: Colors.red, + unselectedItemColor: Color(0xffA8A8A8), + showSelectedLabels: false, + type: BottomNavigationBarType.fixed, + items: [ + BottomNavigationBarItem( + icon: Icon(Icons.control_point_duplicate), + label: "", + ), + BottomNavigationBarItem( + icon: Icon(Icons.cast_connected), + label: "", + ), + BottomNavigationBarItem( + icon: Icon(Icons.horizontal_split), + label: "", + ), + BottomNavigationBarItem( + icon: Icon(Icons.perm_contact_cal), + label: "", + ), + ]), + ), + ); + } +} + +class Cards extends StatelessWidget { + const Cards({ + super.key, + required this.icon, + required this.title, + }); + + final IconData icon; + final String title; + + @override + Widget build(BuildContext context) { + return Row( + children: [ + Icon( + icon, + size: 26.w, + ), + 60.horizontalSpace, + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + title, + style: TextStyle( + color: Colors.black, + fontSize: 16, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + 4.verticalSpace, + Text( + 'No talks', + style: TextStyle( + color: Color(0xFFA8A8A8), + fontSize: 12, + fontFamily: 'Work Sans', + fontWeight: FontWeight.w400, + ), + ), + ], + ) + ], + ); + } +} diff --git a/lib/src/mobile_ui/root/root.dart b/lib/src/mobile_ui/root/root.dart index 2d81b11..080ff07 100644 --- a/lib/src/mobile_ui/root/root.dart +++ b/lib/src/mobile_ui/root/root.dart @@ -459,6 +459,88 @@ class RootWidget extends StatelessWidget { context.push("/${MobileRoutes.pg70}"); }), + PageButtonWidget( + page: 72, + onPressed: () { + context.push("/${MobileRoutes.pg72}"); + }), + PageButtonWidget( + page: 73, + onPressed: () { + context.push("/${MobileRoutes.pg73}"); + }), + PageButtonWidget( + page: 74, + onPressed: () { + context.push("/${MobileRoutes.pg74}"); + }), + PageButtonWidget( + page: 75, + onPressed: () { + context.push("/${MobileRoutes.pg75}"); + }), + PageButtonWidget( + page: 76, + onPressed: () { + context.push("/${MobileRoutes.pg76}"); + }), + PageButtonWidget( + page: 77, + onPressed: () { + context.push("/${MobileRoutes.pg77}"); + }), + PageButtonWidget( + page: 78, + onPressed: () { + context.push("/${MobileRoutes.pg78}"); + }), + PageButtonWidget( + page: 79, + onPressed: () { + context.push("/${MobileRoutes.pg79}"); + }), + PageButtonWidget( + page: 80, + onPressed: () { + context.push("/${MobileRoutes.pg80}"); + }), + PageButtonWidget( + page: 81, + onPressed: () { + context.push("/${MobileRoutes.pg81}"); + }), + PageButtonWidget( + page: 82, + onPressed: () { + context.push("/${MobileRoutes.pg82}"); + }), + PageButtonWidget( + page: 83, + onPressed: () { + context.push("/${MobileRoutes.pg83}"); + }), + PageButtonWidget( + page: 84, + onPressed: () { + context.push("/${MobileRoutes.pg84}"); + }), + PageButtonWidget( + page: 85, + onPressed: () { + context.push("/${MobileRoutes.pg85}"); + }), + PageButtonWidget( + page: 86, + onPressed: () { + context.push("/${MobileRoutes.pg86}"); + }), + PageButtonWidget( + page: 86, + onPressed: () { + context.push("/${MobileRoutes.pg87}"); + }), + + _RangeHeader(text: "101 -150"), _RangeHeader(text: "151 -160"), diff --git a/lib/src/mobile_ui/routes/routes.dart b/lib/src/mobile_ui/routes/routes.dart index cfd88f7..779b379 100644 --- a/lib/src/mobile_ui/routes/routes.dart +++ b/lib/src/mobile_ui/routes/routes.dart @@ -79,6 +79,22 @@ class MobileRoutes { static const pg68 = "pg68"; static const pg69 = "pg69"; static const pg70 = "pg70"; + static const pg72 = "pg72"; + static const pg73 = "pg73"; + static const pg74 = "pg74"; + static const pg75 = "pg75"; + static const pg76 = "pg76"; + static const pg77 = "pg77"; + static const pg78 = "pg78"; + static const pg79 = 'pg79'; + static const pg80 = 'pg80'; + static const pg81 = 'pg81'; + static const pg82 = 'pg82'; + static const pg83 = 'pg83'; + static const pg84 = 'pg84'; + static const pg85 = 'pg85'; + static const pg86 = 'pg86'; + static const pg87 = 'pg87'; /// 81 - 100 diff --git a/lib/src/navigation/new_routes.dart b/lib/src/navigation/new_routes.dart index 3dde3c8..a6bd3fe 100644 --- a/lib/src/navigation/new_routes.dart +++ b/lib/src/navigation/new_routes.dart @@ -52,7 +52,24 @@ import 'package:flutter_ui_kit_obkm/src/mobile_ui/68/page_68.dart'; import 'package:flutter_ui_kit_obkm/src/mobile_ui/69/page_69.dart'; import 'package:flutter_ui_kit_obkm/src/mobile_ui/7/page7.dart'; import 'package:flutter_ui_kit_obkm/src/mobile_ui/70/page_70.dart'; +import 'package:flutter_ui_kit_obkm/src/mobile_ui/72/page_72.dart'; +import 'package:flutter_ui_kit_obkm/src/mobile_ui/73/page_73.dart'; +import 'package:flutter_ui_kit_obkm/src/mobile_ui/74/page_74.dart'; +import 'package:flutter_ui_kit_obkm/src/mobile_ui/75/page_75.dart'; +import 'package:flutter_ui_kit_obkm/src/mobile_ui/76/page_76.dart'; +import 'package:flutter_ui_kit_obkm/src/mobile_ui/77/page_77.dart'; +import 'package:flutter_ui_kit_obkm/src/mobile_ui/78/page_78.dart'; +import 'package:flutter_ui_kit_obkm/src/mobile_ui/79/page_79.dart'; + import 'package:flutter_ui_kit_obkm/src/mobile_ui/8/page8.dart'; +import 'package:flutter_ui_kit_obkm/src/mobile_ui/80/page_80.dart'; +import 'package:flutter_ui_kit_obkm/src/mobile_ui/81/page_81.dart'; +import 'package:flutter_ui_kit_obkm/src/mobile_ui/82/page_82.dart'; +import 'package:flutter_ui_kit_obkm/src/mobile_ui/83/page_83.dart'; +import 'package:flutter_ui_kit_obkm/src/mobile_ui/84/page_84.dart'; +import 'package:flutter_ui_kit_obkm/src/mobile_ui/85/page_85.dart'; +import 'package:flutter_ui_kit_obkm/src/mobile_ui/86/page_86.dart'; +import 'package:flutter_ui_kit_obkm/src/mobile_ui/87/page_87.dart'; import 'package:flutter_ui_kit_obkm/src/mobile_ui/9/page9.dart'; import 'package:flutter_ui_kit_obkm/src/mobile_ui/root/root.dart'; import 'package:flutter_ui_kit_obkm/src/mobile_ui/routes/routes.dart'; @@ -450,6 +467,79 @@ var newRoutesConfig = GoRouter( const Page70(), ), + GoRoute( + path: MobileRoutes.pg72, + builder: (BuildContext context, GoRouterState state) => + const Page72(), + ), + GoRoute( + path: MobileRoutes.pg73, + builder: (BuildContext context, GoRouterState state) => + const Page73(), + ), + GoRoute( + path: MobileRoutes.pg74, + builder: (BuildContext context, GoRouterState state) => + const Page74(), + ), + GoRoute( + path: MobileRoutes.pg75, + builder: (BuildContext context, GoRouterState state) => + const Page75(), + ), + GoRoute( + path: MobileRoutes.pg76, + builder: (BuildContext context, GoRouterState state) => + const Page76(), + ), + GoRoute( + path: MobileRoutes.pg77, + builder: (BuildContext context, GoRouterState state) => + const Page77(), + ), + GoRoute( + path: MobileRoutes.pg78, + builder: (BuildContext context, GoRouterState state) => + const Page78(), + ), + GoRoute( + path: MobileRoutes.pg79, + builder: (BuildContext context, GoRouterState state) => + const Page79(), + ), + GoRoute( + path: MobileRoutes.pg80, + builder: (BuildContext context, GoRouterState state) => Page80(), + ), + GoRoute( + path: MobileRoutes.pg81, + builder: (BuildContext context, GoRouterState state) => Page81(), + ), + GoRoute( + path: MobileRoutes.pg82, + builder: (BuildContext context, GoRouterState state) => Page82(), + ), + GoRoute( + path: MobileRoutes.pg83, + builder: (BuildContext context, GoRouterState state) => Page83(), + ), + GoRoute( + path: MobileRoutes.pg84, + builder: (BuildContext context, GoRouterState state) => Page84(), + ), + GoRoute( + path: MobileRoutes.pg85, + builder: (BuildContext context, GoRouterState state) => Page85(), + ), + GoRoute( + path: MobileRoutes.pg86, + builder: (BuildContext context, GoRouterState state) => Page86(), + ), + GoRoute( + path: MobileRoutes.pg87, + builder: (BuildContext context, GoRouterState state) => Page87(), + ), + /// 141 - 160 GoRoute( path: MobileRoutes.pg156, diff --git a/pubspec.yaml b/pubspec.yaml index f4c22d3..ceaba4c 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -136,6 +136,7 @@ flutter: - assets/png/m30/ - assets/svg/m52/ - assets/svg/m53/ + - assets/svg/m76/ - assets/png/m175/ - assets/svg/m175/