diff --git a/README.md b/README.md index 3180a194..670205e4 100644 --- a/README.md +++ b/README.md @@ -17,6 +17,7 @@ My effort on replicating various apps UI on flutter. - **[My flutter plugins](#my-flutter-plugins)** - **[Complete App Examples](#complete-app-examples)** - **[Code Examples](#code-examples)** +- **[Contributors](#contributors)** - **[Animation Examples UI](#animations)** - **[Ecommerce UIs](#ecommerce)** - **[Login/signup UIs](#user-flow-screens)** @@ -37,6 +38,7 @@ My effort on replicating various apps UI on flutter. - **[Travel App UIs](#travel-app)** - **[Grocery App UI Kit](#grocery-app-ui-kit)** - **[Bank App Clone](#bank-app-clone)** +- **[Furniture App UI](#furniture-app-ui)** ## Speed codes [Youtube](https://youtube.com/c/reactbits) @@ -121,8 +123,10 @@ These are some of my flutter plugins, that might help you in your flutter develo ## Contributors 1. [Damodar Lohani](https://github.com/lohanidamodar) -2. [Siddhartha Joshi](https://github.com/cimplesid) -3. [Sudip Thapa](https://github.com/sudeepthapa) +2. [Sudip Thapa](https://github.com/sudeepthapa) +3. [Shyam Adhikari (UI/UX Designer)](http://uilearner.com) +4. [Mausam Rayamajhi](https://github.com/mausamRayamajhi) +5. [Siddhartha Joshi](https://github.com/cimplesid) ## Packages Used @@ -219,3 +223,7 @@ The code for Springy Widget is taken and refactored from (https://github.com/mat ## Bank App Clone Bank app clone by [Mausam Rayamajhi](https://github.com/mausamRayamajhi) + +## Furniture App UI +Furniture App by [Mausam Rayamajhi](https://github.com/mausamRayamajhi) + \ No newline at end of file diff --git a/assets/fonts/MyFlutterApp.ttf b/assets/fonts/MyFlutterApp.ttf new file mode 100644 index 00000000..1b1746a4 Binary files /dev/null and b/assets/fonts/MyFlutterApp.ttf differ diff --git a/assets/fonts/icomoon.ttf b/assets/fonts/icomoon.ttf new file mode 100644 index 00000000..22f2302f Binary files /dev/null and b/assets/fonts/icomoon.ttf differ diff --git a/lib/core/presentation/routes.dart b/lib/core/presentation/routes.dart index fef59d36..861102da 100644 --- a/lib/core/presentation/routes.dart +++ b/lib/core/presentation/routes.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_ui_challenges/core/data/models/menu.dart'; +import 'package:flutter_ui_challenges/src/furniture_app/furniture_app.dart'; import 'package:flutter_ui_challenges/src/nic_asia_clone/nic_asia_app.dart'; import 'package:flutter_ui_challenges/src/pages/animations/anim4.dart'; import 'package:flutter_ui_challenges/src/pages/animations/anim5.dart'; @@ -307,6 +308,7 @@ final List pages = [ ]), SubMenuItem("Grocery UI Kit", GroceryHomePage(), path: GroceryHomePage.path), SubMenuItem("Bank App Clone", NicAsiaApp(), path: NicAsiaApp.path), + SubMenuItem("Furniture App", FurnitureApp(), path: FurnitureApp.path), ]; SubMenuItem getItemForKey(String key) { diff --git a/lib/src/furniture_app/furniture_app.dart b/lib/src/furniture_app/furniture_app.dart new file mode 100644 index 00000000..a4dbbe91 --- /dev/null +++ b/lib/src/furniture_app/furniture_app.dart @@ -0,0 +1,32 @@ +/** + * Author: Mausam Rayamajhi + * profile: https://github.com/mausamRayamajhi + */ + import 'package:flutter/material.dart'; + +import 'pages/furniture.dart'; +import 'pages/profile.dart'; + +class FurnitureApp extends StatelessWidget { + static final String path = "lib/src/furniture_app/furniture_app.dart"; + @override + Widget build(BuildContext context) { + return MaterialApp( + debugShowCheckedModeBanner: false, + title: 'Flutter Demo', + initialRoute: '/', + routes: { + '/': (BuildContext context) => SafeArea( + child: SafeArea( + child: Profile(), + ), + ), + '/furniture': (BuildContext context) => SafeArea( + child: SafeArea( + child: Furniture(), + ), + ), + }, + ); + } +} diff --git a/lib/src/furniture_app/icon/custome_icon.dart b/lib/src/furniture_app/icon/custome_icon.dart new file mode 100644 index 00000000..1a52b536 --- /dev/null +++ b/lib/src/furniture_app/icon/custome_icon.dart @@ -0,0 +1,19 @@ +import 'package:flutter/widgets.dart'; + +class CustomIcon { + CustomIcon._(); + + static const _icomoon = 'icomoon'; + static const _kFontFam = 'MyFlutterApp'; + + static const IconData truck = const IconData(0xe800, fontFamily: _kFontFam); + static const IconData chat = const IconData(0xe801, fontFamily: _kFontFam); + static const IconData money = const IconData(0xe802, fontFamily: _kFontFam); + static const IconData account_balance_wallet = + const IconData(0xf008, fontFamily: _kFontFam); + + static const IconData wallet = const IconData(0xe910, fontFamily: _icomoon); + static const IconData delivery = const IconData(0xe904, fontFamily: _icomoon); + static const IconData message = const IconData(0xe900, fontFamily: _icomoon); + static const IconData service = const IconData(0xe90f, fontFamily: _icomoon); +} diff --git a/lib/src/furniture_app/pages/furniture.dart b/lib/src/furniture_app/pages/furniture.dart new file mode 100644 index 00000000..c608ea94 --- /dev/null +++ b/lib/src/furniture_app/pages/furniture.dart @@ -0,0 +1,102 @@ +import '../utils/constant.dart'; +import '../widgets/furniture/bottomItem.dart'; +import '../widgets/furniture/furniture_category.dart'; +import '../widgets/furniture/item_navigation.dart'; +import '../widgets/furniture/lamp.dart'; +import '../widgets/title_large.dart'; +import '../widgets/title_small.dart'; +import 'package:flutter/material.dart'; + +class Furniture extends StatelessWidget { + @override + Widget build(BuildContext context) { + Size deviceSize = MediaQuery.of(context).size; + return Material( + color: Colors.white, + child: SingleChildScrollView( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Padding( + padding: const EdgeInsets.only( + left: 20.0, + right: 20.0, + top: 20.0, + ), + child: TitleLarge( + title: 'Furniture', + icon: Icons.add_shopping_cart, + ), + ), + buildFurnitureCategories, + Padding( + padding: const EdgeInsets.only( + left: 20.0, + right: 20.0, + ), + child: TitleSmall( + subTitle: 'Good quality item', + title: 'Modern', + ), + ), + SizedBox( + height: 20.0, + ), + buildLampsWithSlider(), + Padding( + padding: const EdgeInsets.only(left: 20.0, right: 20.0, top: 10.0), + child: TitleSmall( + subTitle: 'In recent month', + title: 'Popular', + ), + ), + SizedBox( + height: 15.0, + ), + BottomItem(), + const SizedBox(height: 10.0), + ], + ), + ), + ); + } + + Container buildLampsWithSlider() { + return Container( + //color: Colors.yellow, + height: 350, + child: Stack( + children: [ + buildLamps, + Positioned( + bottom: 40.0, + right: 50.0, + child: ItemNavigation(), + ) + ], + ), + ); + } + + final buildLamps = ListView.builder( + scrollDirection: Axis.horizontal, + physics: BouncingScrollPhysics(), + shrinkWrap: true, + itemCount: lampList.length, + itemBuilder: (context, int index) => Lamp( + item: lampList[index], + index: index, + ), + ); + final buildFurnitureCategories = Container( + height: 100.0, + //color: Colors.red, + child: ListView.builder( + scrollDirection: Axis.horizontal, + itemCount: furnitureCategoriesList.length, + itemBuilder: (context, int index) => FurnitureCategory( + item: furnitureCategoriesList[index], + ), + ), + ); +} diff --git a/lib/src/furniture_app/pages/profile.dart b/lib/src/furniture_app/pages/profile.dart new file mode 100644 index 00000000..5667d4b4 --- /dev/null +++ b/lib/src/furniture_app/pages/profile.dart @@ -0,0 +1,42 @@ +import '../widgets/profile/profile_categories.dart'; +import '../widgets/profile/profile_detail.dart'; +import '../widgets/profile/profile_menu.dart'; +import '../widgets/title_large.dart'; +import 'package:flutter/material.dart'; + +class Profile extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Material( + color: Colors.white, + child: Padding( + padding: const EdgeInsets.only( + left: 20.0, + right: 20.0, + top: 30.0, + ), + child: Column( + //mainAxisSize: MainAxisSize.max, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + TitleLarge( + title: 'Center', + ), + SizedBox( + height: 20.0, + ), + ProfileDetail(), + SizedBox( + height: 30.0, + ), + ProfileCategories(), + SizedBox( + height: 30.0, + ), + Flexible(child: ProfileMenu()), + ], + ), + ), + ); + } +} diff --git a/lib/src/furniture_app/utils/constant.dart b/lib/src/furniture_app/utils/constant.dart new file mode 100644 index 00000000..e989c5c4 --- /dev/null +++ b/lib/src/furniture_app/utils/constant.dart @@ -0,0 +1,101 @@ +import '../icon/custome_icon.dart'; +import 'package:flutter/material.dart'; + +//COLORS +const Color profile_info_background = Color(0xFF3775FD); +const Color profile_info_categories_background = Color(0xFFF6F5F8); +const Color profile_info_address = Color(0xFF8D7AEE); +const Color profile_info_privacy = Color(0xFFF369B7); +const Color profile_info_general = Color(0xFFFFC85B); +const Color profile_info_notification = Color(0xFF5DD1D3); +const Color profile_item_color = Color(0xFFC4C5C9); +const String imagePath = 'assets/image'; + +const String devMausam = 'https://firebasestorage.googleapis.com/v0/b/dl-flutter-ui-challenges.appspot.com/o/mausam%2Fprofile.jpg?alt=media&token=83fa8b83-f53b-489c-a799-ca5d5aceae7b'; + +const Color furnitureCateDisableColor = Color(0xFF939BA9); +const List lampsImage = [ + {'image': 'https://firebasestorage.googleapis.com/v0/b/dl-flutter-ui-challenges.appspot.com/o/mausam%2Fa.jpg?alt=media&token=6af6cfed-84a6-4cf3-a5ce-875fe47f8c5b'}, + {'image': 'https://firebasestorage.googleapis.com/v0/b/dl-flutter-ui-challenges.appspot.com/o/mausam%2Fb.jpg?alt=media&token=801b2f22-94fd-419b-8b84-c9b4fbd45d4d'}, + {'image': 'https://firebasestorage.googleapis.com/v0/b/dl-flutter-ui-challenges.appspot.com/o/mausam%2Fc.jpg?alt=media&token=b4470e0b-411f-4925-acaf-d6cb9292a44e'}, + {'image': 'https://firebasestorage.googleapis.com/v0/b/dl-flutter-ui-challenges.appspot.com/o/mausam%2Fd.jpg?alt=media&token=01ed6f8d-8e1d-403a-a5a0-423b7aa958be'}, + {'image': 'https://firebasestorage.googleapis.com/v0/b/dl-flutter-ui-challenges.appspot.com/o/mausam%2Fe.jpg?alt=media&token=a9342ee6-9dc6-452d-ade7-4a1d7783e7fe'}, + {'image': 'https://firebasestorage.googleapis.com/v0/b/dl-flutter-ui-challenges.appspot.com/o/mausam%2Ff.jpg?alt=media&token=c65c13ad-5b2f-494e-82eb-13d730d823ce'}, +]; +List lampList = [ + ProfileMenu(title: 'Landscape', subTitle: '384'), + ProfileMenu(title: 'Discus Pendant', subTitle: '274'), + ProfileMenu(title: 'Mushroom Lamp', subTitle: '374'), + ProfileMenu(title: 'Titanic Pendant', subTitle: '562'), + ProfileMenu(title: 'Torn Lighting', subTitle: '105'), + ProfileMenu(title: 'Abduction Pendant', subTitle: '365'), +]; +const List profileItems = [ + {'count': '846', 'name': 'Collect'}, + {'count': '51', 'name': 'Attention'}, + {'count': '267', 'name': 'Track'}, + {'count': '39', 'name': 'Coupons'}, +]; + +List listProfileCategories = [ + Catg(name: 'Wallet', icon: CustomIcon.account_balance_wallet, number: 0), + Catg(name: 'Delivery', icon: CustomIcon.truck, number: 0), + Catg(name: 'Message', icon: CustomIcon.chat, number: 2), + Catg(name: 'Service', icon: CustomIcon.money, number: 0), +]; + +List furnitureCategoriesList = [ + FurnitureCatg(icon: Icons.desktop_windows, elivation: true), + FurnitureCatg(icon: CustomIcon.account_balance_wallet, elivation: false), + FurnitureCatg(icon: Icons.security, elivation: false), + FurnitureCatg(icon: CustomIcon.chat, elivation: false), + FurnitureCatg(icon: CustomIcon.money, elivation: false), +]; + +List profileMenuList = [ + ProfileMenu( + title: 'Address', + subTitle: 'Ensure your harvesting address', + iconColor: profile_info_address, + icon: Icons.location_on, + ), + ProfileMenu( + title: 'Privacy', + subTitle: 'System permission change', + iconColor: profile_info_privacy, + icon: Icons.lock, + ), + ProfileMenu( + title: 'General', + subTitle: 'Basic functional settings', + iconColor: profile_info_general, + icon: Icons.layers, + ), + ProfileMenu( + title: 'Notification', + subTitle: 'Take over the news in time', + iconColor: profile_info_notification, + icon: Icons.notifications, + ), +]; + +class ProfileMenu { + String title; + String subTitle; + IconData icon; + Color iconColor; + ProfileMenu({this.icon, this.title, this.iconColor, this.subTitle}); +} + +class Catg { + String name; + IconData icon; + int number; + Catg({this.icon, this.name, this.number}); +} + +class FurnitureCatg { + IconData icon; + bool elivation; + FurnitureCatg({this.icon, this.elivation}); +} diff --git a/lib/src/furniture_app/widgets/furniture/bottomItem.dart b/lib/src/furniture_app/widgets/furniture/bottomItem.dart new file mode 100644 index 00000000..08ebe999 --- /dev/null +++ b/lib/src/furniture_app/widgets/furniture/bottomItem.dart @@ -0,0 +1,125 @@ +import 'package:flutter_ui_challenges/src/widgets/network_image.dart'; + +import '../../utils/constant.dart'; +import '../../widgets/furniture/custom_side_button.dart'; +import 'package:flutter/material.dart'; + +class BottomItem extends StatelessWidget { + @override + Widget build(BuildContext context) { + Size deviceSize = MediaQuery.of(context).size; + return Stack( + children: [ + Container( + //color: Colors.red, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(30.0), + ), + height: 120.0, + child: Center( + child: Material( + elevation: 10.0, + borderRadius: BorderRadius.circular(30.0), + child: Container( + width: deviceSize.width * 0.9, + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(30.0), + ), + padding: EdgeInsets.symmetric( + vertical: 10.0, + ), + child: Row( + children: [ + SizedBox( + width: 15.0, + ), + Container( + height: 110.0, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(20.0), + ), + child: ClipRRect( + borderRadius: BorderRadius.circular(20.0), + child: PNetworkImage( + lampsImage[2]['image'], + fit: BoxFit.cover, + ), + ), + ), + Container( + //color: Colors.red, + margin: EdgeInsets.only(left: 20.0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Aerial Pendant', + style: TextStyle( + color: Colors.black, + fontSize: 18.0, + fontWeight: FontWeight.bold, + ), + ), + SizedBox( + height: 8.0, + ), + Container( + width: 200.0, + child: Text( + 'Our Lighting colle tion is sure to add the desired style to', + style: TextStyle( + color: furnitureCateDisableColor, + fontSize: 13.0, + fontWeight: FontWeight.bold, + ), + ), + ), + Row( + //crossAxisAlignment: CrossAxisAlignment.end, + children: [ + Text( + '196', + style: TextStyle( + color: Colors.blue[700], + fontSize: 20.0, + fontWeight: FontWeight.bold, + ), + ), + SizedBox( + width: 5.0, + ), + Padding( + padding: const EdgeInsets.only(top: 5.0), + child: Text( + 'USD', + style: TextStyle( + color: Colors.blue, + fontSize: 12.0, + fontWeight: FontWeight.bold, + ), + ), + ), + ], + ) + ], + ), + ) + ], + ), + ), + ), + ), + ), + Positioned( + bottom: 20.0, + right: 10.0, + child: CustomSideButton( + icon: Icons.arrow_forward, + fxn: () {}, + ), + ), + ], + ); + } +} diff --git a/lib/src/furniture_app/widgets/furniture/custom_side_button.dart b/lib/src/furniture_app/widgets/furniture/custom_side_button.dart new file mode 100644 index 00000000..97a42192 --- /dev/null +++ b/lib/src/furniture_app/widgets/furniture/custom_side_button.dart @@ -0,0 +1,26 @@ +import '../../utils/constant.dart'; +import 'package:flutter/material.dart'; + +class CustomSideButton extends StatelessWidget { + final IconData icon; + final Function fxn; + CustomSideButton({@required this.icon, this.fxn}); + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: (){}, + child: Container( + padding: EdgeInsets.all(8.0), + decoration: BoxDecoration( + color: profile_info_background, + borderRadius: BorderRadius.circular(10.0)), + child: Icon( + icon, + size: 20.0, + color: Colors.white, + ), + ), + ); + } +} diff --git a/lib/src/furniture_app/widgets/furniture/furniture_category.dart b/lib/src/furniture_app/widgets/furniture/furniture_category.dart new file mode 100644 index 00000000..051c4c36 --- /dev/null +++ b/lib/src/furniture_app/widgets/furniture/furniture_category.dart @@ -0,0 +1,49 @@ +import 'dart:math'; + +import '../../utils/constant.dart'; +import 'package:flutter/material.dart'; + +class FurnitureCategory extends StatelessWidget { + final FurnitureCatg item; + FurnitureCategory({@required this.item}); + @override + Widget build(BuildContext context) { + return Align( + alignment: Alignment.center, + child: Container( + margin: EdgeInsets.symmetric(horizontal: 25.0), + child: Transform.rotate( + angle: pi / 4, + child: Container( + padding: EdgeInsets.all(10.0), + decoration: BoxDecoration( + boxShadow: [ + if (item.elivation) + BoxShadow( + color: Color(0xFFD1DCFF), + blurRadius: 5.0, // has the effect of softening the shadow + spreadRadius: + -1.0, // has the effect of extending the shadow + offset: Offset(10.0, 10.0), + ) + ], + color: item.elivation + ? profile_info_background + : profile_info_categories_background, + borderRadius: BorderRadius.all(Radius.circular(10.0)), + ), + child: Transform.rotate( + angle: -pi / 4, + child: Icon( + item.icon, + size: 30.0, + color: + item.elivation ? Colors.white : furnitureCateDisableColor, + ), + ), + ), + ), + ), + ); + } +} diff --git a/lib/src/furniture_app/widgets/furniture/item_navigation.dart b/lib/src/furniture_app/widgets/furniture/item_navigation.dart new file mode 100644 index 00000000..48ba046a --- /dev/null +++ b/lib/src/furniture_app/widgets/furniture/item_navigation.dart @@ -0,0 +1,52 @@ +import '../../utils/constant.dart'; +import 'package:flutter/material.dart'; + +class ItemNavigation extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Row( + children: [ + Container( + height: 6.0, + width: 6.0, + decoration: BoxDecoration( + color: furnitureCateDisableColor, + shape: BoxShape.circle, + ), + ), + SizedBox( + width: 5.0, + ), + Container( + height: 5.0, + width: 20.0, + decoration: BoxDecoration( + color: Colors.blue[700], + borderRadius: BorderRadius.circular(10.0)), + ), + SizedBox( + width: 5.0, + ), + Container( + height: 6.0, + width: 6.0, + decoration: BoxDecoration( + color: furnitureCateDisableColor, + shape: BoxShape.circle, + ), + ), + SizedBox( + width: 5.0, + ), + Container( + height: 6.0, + width: 6.0, + decoration: BoxDecoration( + color: furnitureCateDisableColor, + shape: BoxShape.circle, + ), + ), + ], + ); + } +} diff --git a/lib/src/furniture_app/widgets/furniture/lamp.dart b/lib/src/furniture_app/widgets/furniture/lamp.dart new file mode 100644 index 00000000..bfead3af --- /dev/null +++ b/lib/src/furniture_app/widgets/furniture/lamp.dart @@ -0,0 +1,174 @@ +import 'package:flutter_ui_challenges/src/widgets/network_image.dart'; + +import '../../utils/constant.dart'; +import '../../widgets/furniture/custom_side_button.dart'; +import 'package:flutter/material.dart'; + +class Lamp extends StatelessWidget { + final ProfileMenu item; + final int index; + Lamp({this.item, this.index}); + @override + Widget build(BuildContext context) { + Size deviceSize = MediaQuery.of(context).size; + return Align( + alignment: Alignment.topCenter, + child: Container( + height: index == 0 ? 350 : 300, + //color: Colors.red, + child: Container( + margin: EdgeInsets.only(left: 25.0), + //color: Colors.yellow, + child: Stack( + overflow: Overflow.visible, + //fit: StackFit.passthrough, + children: [ + Container( + height: index == 0 ? 250.0 : 200.0, + width: index == 0 + ? deviceSize.width * 0.5 + : deviceSize.width * 0.4, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(20.0), + ), + child: ClipRRect( + borderRadius: BorderRadius.circular(20.0), + child: PNetworkImage( + lampsImage[index]['image'], + fit: BoxFit.cover, + ), + ), + ), + Container( + height: index == 0 ? 250.0 : 200.0, + width: index == 0 + ? deviceSize.width * 0.5 + : deviceSize.width * 0.4, + decoration: BoxDecoration( + gradient: LinearGradient( + colors: [ + Color(0xFFE7E9EF).withOpacity(0.0), + Color(0xFFE7E9EF) + ], + begin: FractionalOffset.topCenter, + end: FractionalOffset.bottomCenter, + stops: [0.5, 1.0], + ), + borderRadius: BorderRadius.circular(20.0), + ), + ), + Positioned( + bottom: index == 0 ? 20.0 : 40.0, + child: Stack( + overflow: Overflow.visible, + children: [ + Material( + elevation: 10.0, + borderRadius: BorderRadius.circular(20.0), + child: Container( + // height: 110.0, + width: index == 0 + ? deviceSize.width * 0.4 + : deviceSize.width * 0.3, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(20.0), + // color: Colors.white, + gradient: LinearGradient( + colors: [ + Color(0xFFE7E9EF), + Colors.white30, + ], + begin: Alignment.centerLeft, + end: Alignment.centerRight, + ), + ), + child: Padding( + padding: const EdgeInsets.symmetric( + horizontal: 25.0, vertical: 10.0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + item.title, + style: TextStyle( + color: Colors.black, + fontSize: index == 0 ? 17.0 : 14, + fontWeight: FontWeight.bold, + ), + ), + SizedBox( + height: 5.0, + ), + Text( + 'Matter made', + style: TextStyle( + color: furnitureCateDisableColor, + fontSize: index == 0 ? 12.0 : 9, + fontWeight: FontWeight.bold, + ), + ), + ], + ), + SizedBox( + height: 10.0, + ), + Row( + // crossAxisAlignment: CrossAxisAlignment.end, + children: [ + Text( + item.subTitle, + style: TextStyle( + color: profile_info_background, + fontSize: index == 0 ? 30.0 : 20.0, + fontWeight: FontWeight.bold, + ), + ), + SizedBox( + width: 8.0, + ), + Padding( + padding: const EdgeInsets.only(top: 8.0), + child: Text( + 'USD', + style: TextStyle( + color: profile_info_background, + fontSize: index == 0 ? 15.0 : 10.0, + fontWeight: FontWeight.normal, + ), + ), + ), + ], + ) + ], + ), + ), + ), + ), + Positioned( + bottom: 20.0, + right: -20.0, + child: CustomSideButton( + icon: Icons.arrow_forward, + fxn: () { + Navigator.pushNamed( + context, + '/selectedItem', + arguments: lampsImage[index]['image'], + ); + }, + ), + ), + ], + ), + ), + ], + ), + ), + ), + ); + } +} diff --git a/lib/src/furniture_app/widgets/profile/category.dart b/lib/src/furniture_app/widgets/profile/category.dart new file mode 100644 index 00000000..e427e982 --- /dev/null +++ b/lib/src/furniture_app/widgets/profile/category.dart @@ -0,0 +1,65 @@ +import '../../utils/constant.dart'; +import 'package:flutter/material.dart'; + +class Category extends StatelessWidget { + final Catg catg; + Category({this.catg}); + @override + Widget build(BuildContext context) { + return Column( + mainAxisSize: MainAxisSize.min, + children: [ + Stack( + overflow: Overflow.visible, + children: [ + GestureDetector( + onTap: () { + if (catg.name == listProfileCategories[0].name) + Navigator.pushNamed(context, '/furniture'); + }, + child: Container( + padding: EdgeInsets.all(10.0), + decoration: BoxDecoration( + shape: BoxShape.circle, + color: profile_info_categories_background, + ), + child: Icon( + catg.icon, + // size: 20.0, + ), + ), + ), + catg.number > 0 + ? Positioned( + right: -5.0, + child: Container( + padding: EdgeInsets.all(5.0), + decoration: BoxDecoration( + color: profile_info_background, + shape: BoxShape.circle, + ), + child: Text( + catg.number.toString(), + style: TextStyle( + color: Colors.white, + fontSize: 10.0, + ), + ), + ), + ) + : SizedBox(), + ], + ), + SizedBox( + height: 10.0, + ), + Text( + catg.name, + style: TextStyle( + fontSize: 13.0, + ), + ) + ], + ); + } +} diff --git a/lib/src/furniture_app/widgets/profile/menu_item.dart b/lib/src/furniture_app/widgets/profile/menu_item.dart new file mode 100644 index 00000000..d645eb19 --- /dev/null +++ b/lib/src/furniture_app/widgets/profile/menu_item.dart @@ -0,0 +1,82 @@ +import '../../utils/constant.dart'; +import 'package:flutter/material.dart'; + +class MenuItem extends StatelessWidget { + final ProfileMenu menu; + MenuItem({this.menu}); + @override + Widget build(BuildContext context) { + Size deviceSize = MediaQuery.of(context).size; + return Container( + height: deviceSize.height * 0.09, + decoration: BoxDecoration( + boxShadow: [ + BoxShadow( + color: Color(0xFFD1DCFF), + blurRadius: 20.0, // has the effect of softening the shadow + spreadRadius: 5.0, // has the effect of extending the shadow + ), + ], + color: Colors.white, + borderRadius: BorderRadius.circular( + 20.0, + ), + ), + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 10.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Row( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Container( + padding: EdgeInsets.all(8.0), + decoration: BoxDecoration( + shape: BoxShape.circle, + color: menu.iconColor, + ), + child: Icon( + menu.icon, + color: Colors.white, + ), + ), + Container( + margin: EdgeInsets.only(left: 15.0), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + menu.title, + style: TextStyle( + fontSize: 18.0, + color: Colors.black, + fontWeight: FontWeight.bold, + ), + ), + Text( + menu.subTitle, + style: TextStyle( + fontSize: 14.0, + color: profile_item_color, + fontWeight: FontWeight.bold, + ), + ), + ], + ), + ) + ], + ), + Icon( + Icons.chevron_right, + color: profile_item_color, + ) + ], + ), + ), + ); + } +} diff --git a/lib/src/furniture_app/widgets/profile/profile_categories.dart b/lib/src/furniture_app/widgets/profile/profile_categories.dart new file mode 100644 index 00000000..18b79572 --- /dev/null +++ b/lib/src/furniture_app/widgets/profile/profile_categories.dart @@ -0,0 +1,22 @@ +import '../../utils/constant.dart'; +import '../../widgets/profile/category.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter/widgets.dart'; + +class ProfileCategories extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.symmetric(horizontal: 5.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + for (Catg catg in listProfileCategories) + Category( + catg: catg, + ) + ], + ), + ); + } +} diff --git a/lib/src/furniture_app/widgets/profile/profile_detail.dart b/lib/src/furniture_app/widgets/profile/profile_detail.dart new file mode 100644 index 00000000..c3f37531 --- /dev/null +++ b/lib/src/furniture_app/widgets/profile/profile_detail.dart @@ -0,0 +1,110 @@ +import '../../utils/constant.dart'; +import '../../widgets/profile_image.dart'; +import 'package:flutter/material.dart'; + +class ProfileDetail extends StatelessWidget { + @override + Widget build(BuildContext context) { + Size deviceSize = MediaQuery.of(context).size; + return Material( + borderRadius: BorderRadius.all( + Radius.circular(20.0), + ), + elevation: 10.0, + child: Container( + height: deviceSize.height * 0.2, + padding: EdgeInsets.symmetric(horizontal: 20.0), + decoration: BoxDecoration( + color: profile_info_background, + borderRadius: BorderRadius.all( + Radius.circular(20.0), + ), + ), + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Row( + children: [ + ProfileImage( + height: 60.0, + width: 60.0, + ), + SizedBox( + width: 15.0, + ), + Column( + mainAxisSize: MainAxisSize.max, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + children: [ + Text( + 'Mausam Rayamajhi', + style: TextStyle( + color: Colors.white, + fontSize: 20.0, + fontWeight: FontWeight.bold, + ), + ), + SizedBox( + width: 15.0, + ), + Icon( + Icons.border_color, + color: Colors.white, + size: 15.0, + ) + ], + ), + Text( + 'A trendsetter', + style: TextStyle( + color: Colors.white70, + fontSize: 13.0, + fontWeight: FontWeight.bold, + ), + ), + ], + ), + ], + ), + SizedBox( + height: 15.0, + ), + Row( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + for (var item in profileItems) + Column( + children: [ + Text( + item['count'], + style: TextStyle( + color: Colors.white, + fontSize: 20.0, + fontWeight: FontWeight.bold, + ), + ), + SizedBox( + height: 5.0, + ), + Text( + item['name'], + style: TextStyle( + color: Colors.white70, + fontSize: 13.0, + fontWeight: FontWeight.bold, + ), + ), + ], + ), + ], + ) + ], + ), + ), + ); + } +} diff --git a/lib/src/furniture_app/widgets/profile/profile_menu.dart b/lib/src/furniture_app/widgets/profile/profile_menu.dart new file mode 100644 index 00000000..280020a5 --- /dev/null +++ b/lib/src/furniture_app/widgets/profile/profile_menu.dart @@ -0,0 +1,19 @@ +import '../../utils/constant.dart'; +import '../../widgets/profile/menu_item.dart'; +import 'package:flutter/material.dart'; + +class ProfileMenu extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Column( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.spaceAround, + children: [ + for (var menu in profileMenuList) + MenuItem( + menu: menu, + ), + ], + ); + } +} diff --git a/lib/src/furniture_app/widgets/profile_image.dart b/lib/src/furniture_app/widgets/profile_image.dart new file mode 100644 index 00000000..adbe9615 --- /dev/null +++ b/lib/src/furniture_app/widgets/profile_image.dart @@ -0,0 +1,29 @@ +import 'package:cached_network_image/cached_network_image.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_ui_challenges/src/furniture_app/utils/constant.dart'; + +class ProfileImage extends StatelessWidget { + final double height, width; + final Color color; + ProfileImage( + {this.height = 100.0, this.width = 100.0, this.color = Colors.white}); + @override + Widget build(BuildContext context) { + return Container( + width: width, + height: height, + decoration: BoxDecoration( + shape: BoxShape.circle, + color: Colors.red, + image: DecorationImage( + image: CachedNetworkImageProvider(devMausam), + fit: BoxFit.contain, + ), + border: Border.all( + color: color, + width: 3.0, + ), + ), + ); + } +} diff --git a/lib/src/furniture_app/widgets/title_large.dart b/lib/src/furniture_app/widgets/title_large.dart new file mode 100644 index 00000000..2f5cf9a1 --- /dev/null +++ b/lib/src/furniture_app/widgets/title_large.dart @@ -0,0 +1,53 @@ +import '../utils/constant.dart'; +import 'package:flutter/material.dart'; + +class TitleLarge extends StatelessWidget { + final String title; + final IconData icon; + + TitleLarge({@required this.title, this.icon}); + @override + Widget build(BuildContext context) { + return Row( + mainAxisAlignment: icon != null + ? MainAxisAlignment.spaceBetween + : MainAxisAlignment.start, + children: [ + Text( + title, + style: TextStyle( + color: Colors.black, + fontSize: 40.0, + letterSpacing: 2.0, + fontWeight: FontWeight.bold, + ), + ), + if (icon != null) + Stack( + overflow: Overflow.visible, + children: [ + Icon(icon), + Positioned( + right: -7.0, + top: -7.0, + child: Container( + padding: EdgeInsets.all(4.0), + decoration: BoxDecoration( + color: profile_info_background, + shape: BoxShape.circle, + ), + child: Text( + '2', + style: TextStyle( + color: Colors.white, + fontSize: 10.0, + ), + ), + ), + ), + ], + ), + ], + ); + } +} diff --git a/lib/src/furniture_app/widgets/title_small.dart b/lib/src/furniture_app/widgets/title_small.dart new file mode 100644 index 00000000..dab16235 --- /dev/null +++ b/lib/src/furniture_app/widgets/title_small.dart @@ -0,0 +1,39 @@ +/** + * Author: Mausam Rayamajhi + * profile: https://github.com/mausamRayamajhi + */ +import 'package:flutter/material.dart'; +import 'package:flutter_ui_challenges/src/furniture_app/utils/constant.dart'; + +class TitleSmall extends StatelessWidget { + final String title, subTitle; + TitleSmall({@required this.title, @required this.subTitle}); + @override + Widget build(BuildContext context) { + return Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Text( + title, + style: TextStyle( + color: Colors.black, + fontSize: 25.0, + fontWeight: FontWeight.bold, + ), + ), + SizedBox( + width: 10.0, + ), + Text( + '. $subTitle', + style: TextStyle( + color: furnitureCateDisableColor, + fontSize: 12.0, + letterSpacing: 0.2, + fontWeight: FontWeight.bold, + ), + ) + ], + ); + } +} diff --git a/pubspec.yaml b/pubspec.yaml index c79909a4..68a1d089 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -94,29 +94,14 @@ flutter: - lib/src/pages/travel/ - lib/src/pages/invitation/ - lib/src/nic_asia_clone/ + - lib/src/furniture_app/ - assets/nicasiaassets/ - # - images/a_dot_burr.jpeg - # - images/a_dot_ham.jpeg - # An image asset can refer to one or more resolution-specific "variants", see - # https://flutter.io/assets-and-images/#resolution-aware. - # For details regarding adding assets from package dependencies, see - # https://flutter.io/assets-and-images/#from-packages - # To add custom fonts to your application, add a fonts section here, - # in this "flutter" section. Each entry in this list should have a - # "family" key with the font family name, and a "fonts" key with a - # list giving the asset and other descriptors for the font. For - # example: - # fonts: - # - family: Schyler - # fonts: - # - asset: fonts/Schyler-Regular.ttf - # - asset: fonts/Schyler-Italic.ttf - # style: italic - # - family: Trajan Pro - # fonts: - # - asset: fonts/TrajanPro.ttf - # - asset: fonts/TrajanPro_Bold.ttf - # weight: 700 - # - # For details regarding fonts from package dependencies, - # see https://flutter.io/custom-fonts/#from-packages + fonts: + - family: icomoon + fonts: + - asset: assets/fonts/icomoon.ttf + + + - family: MyFlutterApp + fonts: + - asset: assets/fonts/MyFlutterApp.ttf diff --git a/screenshots/f1.png b/screenshots/f1.png new file mode 100644 index 00000000..6f6e3661 Binary files /dev/null and b/screenshots/f1.png differ diff --git a/screenshots/f2.gif b/screenshots/f2.gif new file mode 100644 index 00000000..58ebb6c1 Binary files /dev/null and b/screenshots/f2.gif differ