├── .idea └── vcs.xml ├── README.md ├── analysis_options.yaml ├── lib ├── about_us.dart ├── cart.dart ├── contact_us.dart ├── home.dart ├── login.dart ├── main.dart ├── pages │ ├── drawer_menu.dart │ ├── footer.dart │ ├── header.dart │ └── home_slider.dart ├── profile.dart ├── register_user.dart ├── search.dart ├── utils │ ├── CustomBorder.dart │ ├── CustomColors.dart │ ├── CustomTextStyle.dart │ ├── MenuItem.dart │ ├── ResponsiveLayout.dart │ └── ScreenLayout.dart └── widgets │ ├── LargeHomePage.dart │ └── MobileHomePage.dart ├── pubspec.yaml ├── screenshot ├── mobile │ ├── about_us.png │ ├── cart_mobile.png │ ├── contact_us.png │ └── profile.png └── web │ ├── 1.main_page.png │ ├── 2.cart.png │ ├── 3.about_us.png │ ├── 4.contact_us.png │ ├── 5.profile.png │ ├── 6.login.png │ └── 7.registration.png └── web ├── assets ├── FontManifest.json ├── Montserrat-Bold.ttf ├── Montserrat-Regular.ttf ├── about_section_1.jpg ├── about_section_2.jpg ├── about_section_3.jpg ├── about_us_slider.jpg ├── banner │ ├── banner1.jpg │ ├── banner2.jpg │ ├── banner3.jpg │ └── ic_logo.png ├── banner1.jpg ├── cart_slider.jpg ├── contact_us_slider.jpg ├── fonts │ ├── AbrilFatface-Regular.ttf │ ├── Arvo │ │ ├── Arvo-Bold.ttf │ │ ├── Arvo-BoldItalic.ttf │ │ ├── Arvo-Italic.ttf │ │ └── Arvo-Regular.ttf │ ├── GalleryIcons.ttf │ ├── GoogleSans-Regular.ttf │ ├── HelveticaNeue │ │ ├── Helvetica Neu Bold.ttf │ │ ├── HelveticaNeue BlackCond.ttf │ │ ├── HelveticaNeue Light.ttf │ │ ├── HelveticaNeue Medium.ttf │ │ ├── HelveticaNeue Thin.ttf │ │ ├── HelveticaNeue-Bold.ttf │ │ ├── HelveticaNeue-Regular.ttf │ │ ├── HelveticaNeueHv.ttf │ │ ├── HelveticaNeueIt.ttf │ │ ├── HelveticaNeueLt.ttf │ │ ├── HelveticaNeueMed.ttf │ │ ├── helveticaneue.png │ │ └── www.freefontsdownload.net.url │ ├── LibreFranklin-Regular.ttf │ ├── Merriweather-Regular.ttf │ └── Raleway-Regular.ttf ├── hiraminpro-w3.otf ├── ic_logo.png ├── payment │ ├── footer_payment.png │ ├── ic_payment.png │ └── ic_visa.png └── profile_slider.jpg ├── index.html └── main.dart /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Shopping Cart Web App in flutter 2 | 3 | This is my first endeavor to create a web app in flutter with dart. 4 | In screenshot folder, i have added some image of what i have created. 5 | In this repo, I had created a design template only, no business logic or network calling implemented. Simply create a navbar menu and on tap on it redirect and create a design which response as per the device resolution. 6 | 7 | # Build and deploy: 8 | 9 | For a build web app, use this command: webdev build 10 | This command is used to building a web means it generates a build folder and this folder will be used for the deployment. If you want to test that this will work or not simply follow the below step(Only for windows). 11 | 21 | 22 | You have successfully done the web deployment. 23 | If you want to deploy on web hosting simply you need to upload the build folder on the hosting server. 24 | 25 | Check live demo using https://flutter-web-shopping-car-3f2a6.web.app/#/ this link. 26 | 27 | -------------------------------------------------------------------------------- /analysis_options.yaml: -------------------------------------------------------------------------------- 1 | # Defines a default set of lint rules enforced for 2 | # projects at Google. For details and rationale, 3 | # see https://github.com/dart-lang/pedantic#enabled-lints. 4 | include: package:pedantic/analysis_options.yaml 5 | 6 | # For lint rules and documentation, see http://dart-lang.github.io/linter/lints. 7 | # Uncomment to specify additional rules. 8 | # linter: 9 | # rules: 10 | # - camel_case_types 11 | 12 | analyzer: 13 | exclude: [build/**] 14 | -------------------------------------------------------------------------------- /lib/about_us.dart: -------------------------------------------------------------------------------- 1 | import 'package:ShoppingCart/pages/drawer_menu.dart'; 2 | import 'package:ShoppingCart/pages/footer.dart'; 3 | import 'package:ShoppingCart/pages/header.dart'; 4 | import 'package:ShoppingCart/utils/CustomTextStyle.dart'; 5 | import 'package:ShoppingCart/utils/MenuItem.dart'; 6 | import 'package:ShoppingCart/utils/ResponsiveLayout.dart'; 7 | import 'package:flutter_web/material.dart'; 8 | 9 | class AboutUs extends StatelessWidget { 10 | GlobalKey keyScaffold = GlobalKey(); 11 | double sliderHeight = 500; 12 | double sliderHeaderFontSize = 60; 13 | double childAspectRatio=1.2; 14 | 15 | @override 16 | Widget build(BuildContext context) { 17 | setUp(context); 18 | return createScaffold(context); 19 | } 20 | 21 | createScaffold(context) { 22 | return Scaffold( 23 | key: keyScaffold, 24 | endDrawer: DrawerMenu(MenuItem.MENU_ABOUT), 25 | body: Builder(builder: (context) { 26 | return ListView( 27 | children: [ 28 | Header(context,MenuItem.MENU_ABOUT), 29 | slider(), 30 | GridView.builder( 31 | gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( 32 | crossAxisCount: getGridCount(context), childAspectRatio: childAspectRatio), 33 | itemBuilder: (context, position) { 34 | return createList()[position]; 35 | }, 36 | itemCount: createList().length, 37 | shrinkWrap: true, 38 | primary: false, 39 | ), 40 | shootingCampaign(context), 41 | Footer() 42 | ], 43 | ); 44 | }), 45 | ); 46 | } 47 | 48 | getGridCount(context) { 49 | if (ResponsiveLayout.isSmallScreen(context)) { 50 | return 1; 51 | } else if (ResponsiveLayout.isMediumScreen(context)) { 52 | return 2; 53 | } else { 54 | return 3; 55 | } 56 | } 57 | 58 | setUp(context) { 59 | if (ResponsiveLayout.isLargeScreen(context)) { 60 | sliderHeight = MediaQuery.of(context).size.height / 2; 61 | sliderHeaderFontSize = 60; 62 | childAspectRatio = 1.2; 63 | } else if (ResponsiveLayout.isMediumScreen(context)) { 64 | sliderHeight = MediaQuery.of(context).size.height / 2; 65 | sliderHeaderFontSize = 30; 66 | childAspectRatio = 1.25; 67 | } else { 68 | sliderHeight = MediaQuery.of(context).size.height / 3; 69 | sliderHeaderFontSize = 20; 70 | childAspectRatio = 1.2; 71 | } 72 | } 73 | 74 | slider() { 75 | return Container( 76 | width: double.infinity, 77 | height: sliderHeight, 78 | child: Stack( 79 | children: [ 80 | Container( 81 | width: double.infinity, 82 | child: Image( 83 | image: AssetImage("about_us_slider.jpg"), 84 | fit: BoxFit.cover, 85 | ), 86 | ), 87 | Align( 88 | alignment: Alignment.bottomCenter, 89 | child: Container( 90 | alignment: Alignment.center, 91 | margin: EdgeInsets.symmetric(vertical: 12, horizontal: 12), 92 | child: Text( 93 | "about us", 94 | textAlign: TextAlign.center, 95 | style: CustomTextStyle.boldTextStyle.copyWith( 96 | fontSize: sliderHeaderFontSize, color: Colors.white), 97 | )), 98 | ) 99 | ], 100 | )); 101 | } 102 | 103 | List createList() { 104 | List listContainer = List(); 105 | listContainer.add(createAboutSection( 106 | "about_section_1.jpg", 107 | "strategy and timing", 108 | "Lorem ipsum dolor sit amet, con sectetur adipiscing elit. In ut ullamcor leo eget")); 109 | listContainer.add(createAboutSection( 110 | "about_section_2.jpg", 111 | "social integration", 112 | "Lorem ipsum dolor sit amet, con sectetur adipiscing elit. In ut ullamcor leo eget")); 113 | listContainer.add(createAboutSection( 114 | "about_section_3.jpg", 115 | "shopping expirience", 116 | "Lorem ipsum dolor sit amet, con sectetur adipiscing elit. In ut ullamcor leo eget")); 117 | return listContainer; 118 | } 119 | 120 | createAboutSection(String imgName, String title, String desc) { 121 | return Container( 122 | margin: EdgeInsets.only(left: 24,right: 24,top: 24), 123 | child: Column( 124 | crossAxisAlignment: CrossAxisAlignment.start, 125 | mainAxisAlignment: MainAxisAlignment.start, 126 | children: [ 127 | Image(image: AssetImage(imgName)), 128 | SizedBox( 129 | height: 8, 130 | ), 131 | Text( 132 | title, 133 | style: CustomTextStyle.boldTextStyle.copyWith(fontSize: 20), 134 | ), 135 | SizedBox( 136 | height: 8, 137 | ), 138 | Text( 139 | desc, 140 | style: CustomTextStyle.regularTextStyle 141 | .copyWith(fontSize: 14, color: Colors.grey), 142 | ), 143 | ], 144 | ), 145 | ); 146 | } 147 | 148 | shootingCampaign(context) { 149 | if(ResponsiveLayout.isSmallScreen(context)){ 150 | return Container( 151 | margin: EdgeInsets.only(top: 48,bottom: 48,left: 24,right: 24), 152 | child: Column( 153 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 154 | children: [ 155 | columnCampaign(), 156 | SizedBox(height: 20,), 157 | columnProgress(), 158 | ], 159 | ), 160 | ); 161 | } 162 | else{ 163 | return Container( 164 | margin: EdgeInsets.only(top: 48,bottom: 48), 165 | child: Row( 166 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 167 | children: [ 168 | Expanded( 169 | child: Container( 170 | margin: EdgeInsets.only(left: 24), 171 | child: columnCampaign(), 172 | ), 173 | flex: 40, 174 | ), 175 | Expanded( 176 | child: Container(), 177 | flex: 10, 178 | ), 179 | Expanded( 180 | child: columnProgress(), 181 | flex: 40, 182 | ), 183 | Expanded( 184 | child: Container(), 185 | flex: 10, 186 | ), 187 | ], 188 | ), 189 | ); 190 | } 191 | } 192 | 193 | Column columnProgress() { 194 | return Column( 195 | children: [ 196 | createProgress("Web Design", 76), 197 | createProgress("Development", 45), 198 | createProgress("Strategy", 58), 199 | createProgress("Marketing", 83), 200 | ], 201 | ); 202 | } 203 | 204 | Column columnCampaign() { 205 | return Column( 206 | crossAxisAlignment: CrossAxisAlignment.start, 207 | mainAxisAlignment: MainAxisAlignment.start, 208 | children: [ 209 | Container( 210 | child: Text( 211 | "shooting campaign", 212 | style: 213 | CustomTextStyle.boldTextStyle.copyWith(fontSize: 24), 214 | ), 215 | ), 216 | Container( 217 | width: 40, 218 | height: 2, 219 | color: Colors.black, 220 | margin: EdgeInsets.only(bottom: 16), 221 | ), 222 | Wrap( 223 | children: [ 224 | Text( 225 | "Alierewnum phaedrum torquatos nec eu, dasvis detraxit ertssa periculiser eres frtisi reex,nihdail dexpetendis in mei Meis an lorem tincidunt vix at, vele.adsaasx sensibus id, errdsaeore rwrepicurei mea et. Mea facilisis urbanies tas moderatius id. Vis eires rationibus definiebass, eu qui purto zril laoreet.. Ex error es omnium es interpretaris prout legimus similique vix, te equidem.", 226 | style: CustomTextStyle.regularTextStyle.copyWith( 227 | fontSize: 16, color: Colors.grey, letterSpacing: 2), 228 | softWrap: true, 229 | ), 230 | ], 231 | ), 232 | SizedBox( 233 | height: 16, 234 | ), 235 | ], 236 | ); 237 | } 238 | 239 | createProgress(String title, double value) { 240 | return Container( 241 | padding: EdgeInsets.only(top: 8,bottom: 8), 242 | child: Column( 243 | children: [ 244 | Row( 245 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 246 | children: [ 247 | Text( 248 | title, 249 | style: CustomTextStyle.boldTextStyle, 250 | ), 251 | Text( 252 | value.toString() + "%", 253 | style: 254 | CustomTextStyle.boldTextStyle.copyWith(color: Colors.grey), 255 | ), 256 | ], 257 | ), 258 | SizedBox( 259 | height: 8, 260 | ), 261 | LinearProgressIndicator( 262 | backgroundColor: Colors.grey, 263 | value: value/100, 264 | valueColor: AlwaysStoppedAnimation(Colors.black), 265 | ) 266 | ], 267 | ), 268 | ); 269 | } 270 | } 271 | -------------------------------------------------------------------------------- /lib/cart.dart: -------------------------------------------------------------------------------- 1 | import 'package:ShoppingCart/pages/drawer_menu.dart'; 2 | import 'package:ShoppingCart/pages/footer.dart'; 3 | import 'package:ShoppingCart/pages/header.dart'; 4 | import 'package:ShoppingCart/utils/CustomTextStyle.dart'; 5 | import 'package:ShoppingCart/utils/MenuItem.dart'; 6 | import 'package:ShoppingCart/utils/ResponsiveLayout.dart'; 7 | import 'package:flutter_web/material.dart'; 8 | 9 | class Cart extends StatelessWidget { 10 | GlobalKey keyScaffold = GlobalKey(); 11 | double sliderHeight = 500; 12 | double sliderHeaderFontSize = 60; 13 | double childAspectRatio = 1.2; 14 | 15 | @override 16 | Widget build(BuildContext context) { 17 | setUp(context); 18 | return createScaffold(context); 19 | } 20 | 21 | createScaffold(context) { 22 | return Scaffold( 23 | key: keyScaffold, 24 | endDrawer: DrawerMenu(MenuItem.MENU_CART), 25 | body: Builder(builder: (context) { 26 | return ListView( 27 | children: [ 28 | Header(context, MenuItem.MENU_CART), 29 | slider(), 30 | createCartSection(context), 31 | ResponsiveLayout.isLargeScreen(context) 32 | ? Container() 33 | : createCheckOut(), 34 | Footer() 35 | ], 36 | ); 37 | }), 38 | ); 39 | } 40 | 41 | getGridCount(context) { 42 | if (ResponsiveLayout.isSmallScreen(context)) { 43 | return 1; 44 | } else if (ResponsiveLayout.isMediumScreen(context)) { 45 | return 2; 46 | } else { 47 | return 3; 48 | } 49 | } 50 | 51 | setUp(context) { 52 | if (ResponsiveLayout.isLargeScreen(context)) { 53 | sliderHeight = 500; 54 | sliderHeaderFontSize = 60; 55 | childAspectRatio = 1.2; 56 | } else if (ResponsiveLayout.isMediumScreen(context)) { 57 | sliderHeight = 400; 58 | sliderHeaderFontSize = 30; 59 | childAspectRatio = 1.2; 60 | } else { 61 | sliderHeight = 160; 62 | sliderHeaderFontSize = 20; 63 | childAspectRatio = 1.2; 64 | } 65 | } 66 | 67 | slider() { 68 | return Container( 69 | width: double.infinity, 70 | height: sliderHeight, 71 | child: Stack( 72 | children: [ 73 | Container( 74 | width: double.infinity, 75 | child: Image( 76 | image: AssetImage("cart_slider.jpg"), 77 | fit: BoxFit.fill, 78 | ), 79 | ), 80 | Align( 81 | alignment: Alignment.center, 82 | child: Container( 83 | alignment: Alignment.center, 84 | margin: EdgeInsets.symmetric(vertical: 12, horizontal: 12), 85 | child: Text( 86 | "cart", 87 | textAlign: TextAlign.center, 88 | style: CustomTextStyle.boldTextStyle.copyWith( 89 | fontSize: sliderHeaderFontSize, color: Colors.white), 90 | )), 91 | ) 92 | ], 93 | )); 94 | } 95 | 96 | createCartSection(context) { 97 | return Container( 98 | margin: EdgeInsets.only(top: 24, bottom: 24), 99 | child: Row( 100 | children: [ 101 | Expanded( 102 | child: Container(), 103 | flex: 10, 104 | ), 105 | Expanded( 106 | child: Container( 107 | margin: EdgeInsets.only(right: 10), 108 | child: Column( 109 | crossAxisAlignment: CrossAxisAlignment.start, 110 | children: [ 111 | Container( 112 | child: Text( 113 | "shopping cart", 114 | style: 115 | CustomTextStyle.boldTextStyle.copyWith(fontSize: 20), 116 | ), 117 | ), 118 | SizedBox( 119 | height: 24, 120 | ), 121 | ListView.builder( 122 | itemBuilder: (context, position) { 123 | return createListItem(context); 124 | }, 125 | itemCount: 3, 126 | primary: false, 127 | shrinkWrap: true, 128 | ), 129 | createApplyCoupon(context), 130 | Container( 131 | color: Colors.grey.shade200, 132 | height: 1, 133 | ) 134 | ], 135 | ), 136 | ), 137 | flex: ResponsiveLayout.isLargeScreen(context) 138 | ? 45 139 | : ResponsiveLayout.isSmallScreen(context) ? 80 : 55, 140 | ), 141 | ResponsiveLayout.isLargeScreen(context) 142 | ? Expanded( 143 | child: createCheckOut(), 144 | flex: 25, 145 | ) 146 | : Container(), 147 | ResponsiveLayout.isLargeScreen(context) 148 | ? Expanded( 149 | child: Container(), 150 | flex: 10, 151 | ) 152 | : Container(), 153 | ], 154 | ), 155 | ); 156 | } 157 | 158 | createApplyCoupon(context) { 159 | return Row( 160 | mainAxisAlignment: MainAxisAlignment.end, 161 | children: [ 162 | ResponsiveLayout.isSmallScreen(context) 163 | ? Container() 164 | : Expanded( 165 | child: Container(), 166 | flex: 45, 167 | ), 168 | Expanded( 169 | child: Icon(Icons.card_giftcard), 170 | flex: ResponsiveLayout.isSmallScreen(context) ? 15 : 05, 171 | ), 172 | Expanded( 173 | child: TextField( 174 | decoration: InputDecoration( 175 | hintText: "Enter coupon code", 176 | border: border, 177 | focusedBorder: border, 178 | enabledBorder: border, 179 | hintStyle: 180 | CustomTextStyle.regularTextStyle.copyWith(color: Colors.grey), 181 | ), 182 | ), 183 | flex: ResponsiveLayout.isSmallScreen(context) ? 40 : 30, 184 | ), 185 | Expanded( 186 | child: RaisedButton( 187 | child: Text( 188 | "apply coupon", 189 | style: CustomTextStyle.regularTextStyle 190 | .copyWith(color: Colors.white), 191 | ), 192 | elevation: 0, 193 | textColor: Colors.white, 194 | color: Colors.black, 195 | onPressed: () {}, 196 | ), 197 | flex: ResponsiveLayout.isSmallScreen(context) ? 45 : 20, 198 | ) 199 | ], 200 | ); 201 | } 202 | 203 | var border = OutlineInputBorder( 204 | borderRadius: BorderRadius.circular(0), 205 | borderSide: BorderSide(color: Colors.white, width: 1)); 206 | 207 | createUpdateCart() { 208 | return Container( 209 | child: Row( 210 | mainAxisAlignment: MainAxisAlignment.end, 211 | crossAxisAlignment: CrossAxisAlignment.end, 212 | children: [ 213 | Text( 214 | "update cart", 215 | style: CustomTextStyle.regularTextStyle, 216 | ), 217 | ], 218 | ), 219 | ); 220 | } 221 | 222 | createListItem(context) { 223 | return Container( 224 | child: Column( 225 | children: [ 226 | SizedBox( 227 | height: 16, 228 | ), 229 | Row( 230 | children: [ 231 | IconButton(icon: Icon(Icons.close), onPressed: () {}), 232 | ResponsiveLayout.isLargeScreen(context) 233 | ? Container( 234 | width: 80, 235 | height: 100, 236 | child: Image( 237 | fit: BoxFit.cover, 238 | image: AssetImage("cart_slider.jpg"), 239 | )) 240 | : Container(), 241 | Expanded( 242 | child: Container( 243 | alignment: Alignment.center, 244 | child: Text( 245 | "white blouse", 246 | style: CustomTextStyle.regularTextStyle, 247 | ), 248 | margin: EdgeInsets.only(left: 24), 249 | ), 250 | ), 251 | ResponsiveLayout.isSmallScreen(context) 252 | ? Container() 253 | : Expanded(child: createPrice(50)), 254 | createQuantitySection(context), 255 | Expanded( 256 | child: createPrice(50), 257 | ) 258 | ], 259 | ), 260 | SizedBox( 261 | height: 16, 262 | ), 263 | Container( 264 | height: 1, 265 | width: double.infinity, 266 | color: Colors.grey.shade200, 267 | ), 268 | ], 269 | ), 270 | ); 271 | } 272 | 273 | createQuantitySection(context) { 274 | return Container( 275 | decoration: BoxDecoration( 276 | borderRadius: BorderRadius.all(Radius.circular(2)), 277 | border: Border.all(color: Colors.grey.shade300, width: 1)), 278 | child: Row( 279 | children: [ 280 | ResponsiveLayout.isSmallScreen(context) 281 | ? Container() 282 | : Container( 283 | padding: EdgeInsets.all(8), 284 | margin: EdgeInsets.only(left: 4, right: 8), 285 | child: Text("Quantity"), 286 | ), 287 | IconButton( 288 | icon: Icon(Icons.arrow_left), 289 | onPressed: () {}, 290 | highlightColor: Colors.transparent, 291 | hoverColor: Colors.transparent, 292 | splashColor: Colors.transparent, 293 | ), 294 | Container( 295 | child: Text("1"), 296 | ), 297 | IconButton( 298 | icon: Icon(Icons.arrow_right), 299 | onPressed: () {}, 300 | highlightColor: Colors.transparent, 301 | hoverColor: Colors.transparent, 302 | splashColor: Colors.transparent, 303 | ), 304 | ], 305 | ), 306 | ); 307 | } 308 | 309 | createPrice(double price) { 310 | return Container( 311 | alignment: Alignment.center, 312 | margin: EdgeInsets.only(left: 24), 313 | child: Text( 314 | "\$$price", 315 | style: CustomTextStyle.regularTextStyle.copyWith(color: Colors.black26), 316 | ), 317 | ); 318 | } 319 | 320 | createCheckOut() { 321 | return Container( 322 | color: Colors.grey.shade100, 323 | child: Column( 324 | mainAxisAlignment: MainAxisAlignment.start, 325 | crossAxisAlignment: CrossAxisAlignment.start, 326 | children: [ 327 | Container( 328 | margin: EdgeInsets.all(24), 329 | child: Text( 330 | "cart totals", 331 | style: CustomTextStyle.boldTextStyle.copyWith(fontSize: 28), 332 | ), 333 | ), 334 | Row( 335 | children: [ 336 | Container( 337 | margin: EdgeInsets.only(left: 24, right: 12), 338 | child: Text( 339 | "subtotal", 340 | style: CustomTextStyle.boldTextStyle, 341 | ), 342 | ), 343 | Container( 344 | margin: EdgeInsets.only(left: 24, right: 12), 345 | child: Text( 346 | "\$264", 347 | style: CustomTextStyle.regularTextStyle 348 | .copyWith(color: Colors.grey), 349 | ), 350 | ), 351 | ], 352 | ), 353 | Row( 354 | crossAxisAlignment: CrossAxisAlignment.start, 355 | mainAxisAlignment: MainAxisAlignment.start, 356 | children: [ 357 | Container( 358 | margin: EdgeInsets.only(left: 24, right: 12, top: 16), 359 | child: Text( 360 | "shipping", 361 | style: CustomTextStyle.boldTextStyle, 362 | ), 363 | ), 364 | Expanded( 365 | child: Container( 366 | margin: 367 | EdgeInsets.only(left: 24, right: 12, top: 16, bottom: 16), 368 | child: Text( 369 | "shipping costs will be calculated once you have provided your address.", 370 | style: CustomTextStyle.regularTextStyle 371 | .copyWith(color: Colors.grey), 372 | ), 373 | ), 374 | ), 375 | ], 376 | ), 377 | Container( 378 | height: 1, 379 | margin: EdgeInsets.only(top: 24, bottom: 24), 380 | color: Colors.black.withOpacity(0.1), 381 | ), 382 | Row( 383 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 384 | children: [ 385 | Container( 386 | margin: EdgeInsets.only(left: 24, right: 12), 387 | child: Text( 388 | "total", 389 | style: CustomTextStyle.boldTextStyle, 390 | ), 391 | ), 392 | Container( 393 | margin: EdgeInsets.only(left: 24, right: 12), 394 | child: Text( 395 | "\$264", 396 | style: CustomTextStyle.regularTextStyle 397 | .copyWith(color: Colors.black, fontSize: 20), 398 | ), 399 | ), 400 | ], 401 | ), 402 | SizedBox( 403 | height: 24, 404 | ), 405 | Container( 406 | alignment: Alignment.center, 407 | margin: EdgeInsets.only(left: 16, right: 16, bottom: 24), 408 | child: RaisedButton( 409 | onPressed: () {}, 410 | highlightElevation: 0, 411 | elevation: 0, 412 | color: Colors.black, 413 | child: Text( 414 | "proceed to checkout", 415 | style: CustomTextStyle.regularTextStyle 416 | .copyWith(color: Colors.white), 417 | ), 418 | ), 419 | ) 420 | ], 421 | ), 422 | ); 423 | } 424 | } 425 | -------------------------------------------------------------------------------- /lib/contact_us.dart: -------------------------------------------------------------------------------- 1 | import 'package:ShoppingCart/pages/drawer_menu.dart'; 2 | import 'package:ShoppingCart/pages/footer.dart'; 3 | import 'package:ShoppingCart/pages/header.dart'; 4 | import 'package:ShoppingCart/utils/CustomTextStyle.dart'; 5 | import 'package:ShoppingCart/utils/MenuItem.dart'; 6 | import 'package:ShoppingCart/utils/ResponsiveLayout.dart'; 7 | import 'package:flutter_web/material.dart'; 8 | 9 | class ContactUs extends StatelessWidget { 10 | GlobalKey keyScaffold = GlobalKey(); 11 | double sliderHeight = 500; 12 | double sliderHeaderFontSize = 60; 13 | double childAspectRatio = 1.2; 14 | 15 | @override 16 | Widget build(BuildContext context) { 17 | setUp(context); 18 | return createScaffold(context); 19 | } 20 | 21 | createScaffold(context) { 22 | return Scaffold( 23 | key: keyScaffold, 24 | endDrawer: DrawerMenu(MenuItem.MENU_ABOUT), 25 | body: Builder(builder: (context) { 26 | return ListView( 27 | children: [ 28 | Header(context, MenuItem.MENU_ABOUT), 29 | slider(), 30 | contactUsForm(context), 31 | Footer() 32 | ], 33 | ); 34 | }), 35 | ); 36 | } 37 | 38 | contactUsForm(context) { 39 | if(!ResponsiveLayout.isLargeScreen(context)){ 40 | return Container( 41 | padding: EdgeInsets.only(right: 12,left: 12), 42 | child: Column( 43 | children: [ 44 | createOurContact(), 45 | createForm() 46 | ], 47 | ), 48 | ); 49 | }else{ 50 | return Container( 51 | child: Row( 52 | children: [ 53 | Expanded( 54 | child: Container(), 55 | flex: 10, 56 | ), 57 | Expanded( 58 | child: Container( 59 | alignment: Alignment.topLeft, 60 | child: createOurContact(), 61 | ), 62 | flex: 30, 63 | ), 64 | Expanded( 65 | child: Container( 66 | child: createForm(), 67 | ), 68 | flex: 50, 69 | ), 70 | Expanded( 71 | child: Container(), 72 | flex: 10, 73 | ), 74 | ], 75 | ), 76 | ); 77 | } 78 | } 79 | 80 | createOurContact() { 81 | return Column( 82 | mainAxisSize: MainAxisSize.min, 83 | crossAxisAlignment: CrossAxisAlignment.start, 84 | children: [ 85 | Container( 86 | margin: EdgeInsets.only( 87 | top: 16, 88 | ), 89 | child: Text( 90 | "Our Contact", 91 | style: CustomTextStyle.boldTextStyle.copyWith(fontSize: 24), 92 | ), 93 | ), 94 | Container( 95 | width: 40, 96 | height: 2, 97 | color: Colors.black, 98 | ), 99 | Container( 100 | margin: EdgeInsets.only( 101 | top: 48, 102 | ), 103 | child: Text( 104 | "Alierewnum phaedrum torquatos nec eu, dasvis detraxit ertssa periculiser reex,nihil dexpetendis in mei Meis an lorem tincidunt vixat, vele ax.", 105 | style: CustomTextStyle.regularTextStyle 106 | .copyWith(fontSize: 16, color: Colors.grey), 107 | ), 108 | ), 109 | Container( 110 | margin: EdgeInsets.only( 111 | top: 24, 112 | ), 113 | child: Text( 114 | "Via S. Raffaele, 6, 20121 Milano", 115 | style: CustomTextStyle.regularTextStyle 116 | .copyWith(fontSize: 16, color: Colors.grey), 117 | ), 118 | ), 119 | Container( 120 | margin: EdgeInsets.only( 121 | top: 8, 122 | ), 123 | child: Text( 124 | "Monday to Friday: 9am to 8pm", 125 | style: CustomTextStyle.regularTextStyle 126 | .copyWith(fontSize: 16, color: Colors.grey), 127 | ), 128 | ), 129 | Container( 130 | margin: EdgeInsets.only(top: 8, bottom: 24), 131 | child: Text( 132 | "info@yoursite.com", 133 | style: CustomTextStyle.regularTextStyle 134 | .copyWith(fontSize: 16, color: Colors.grey), 135 | ), 136 | ), 137 | ], 138 | ); 139 | } 140 | 141 | createForm() { 142 | return Container( 143 | child: Form( 144 | child: Column( 145 | children: [ 146 | SizedBox( 147 | height: 24, 148 | ), 149 | TextFormField( 150 | decoration: InputDecoration( 151 | border: border, 152 | hintText: "Full Name", 153 | labelStyle: CustomTextStyle.regularTextStyle 154 | .copyWith(color: Colors.black, fontSize: 20), 155 | hintStyle: 156 | CustomTextStyle.regularTextStyle.copyWith(color: Colors.grey), 157 | enabledBorder: border, 158 | focusedBorder: border, 159 | ), 160 | ), 161 | SizedBox( 162 | height: 12, 163 | ), 164 | TextFormField( 165 | keyboardType: TextInputType.emailAddress, 166 | decoration: InputDecoration( 167 | border: border, 168 | hintText: "Email Address", 169 | labelStyle: CustomTextStyle.regularTextStyle 170 | .copyWith(color: Colors.black, fontSize: 20), 171 | hintStyle: 172 | CustomTextStyle.regularTextStyle.copyWith(color: Colors.grey), 173 | enabledBorder: border, 174 | focusedBorder: border, 175 | ), 176 | ), 177 | SizedBox( 178 | height: 12, 179 | ), 180 | TextFormField( 181 | keyboardType: TextInputType.url, 182 | decoration: InputDecoration( 183 | border: border, 184 | hintText: "Website", 185 | labelStyle: CustomTextStyle.regularTextStyle 186 | .copyWith(color: Colors.black, fontSize: 20), 187 | hintStyle: 188 | CustomTextStyle.regularTextStyle.copyWith(color: Colors.grey), 189 | enabledBorder: border, 190 | focusedBorder: border, 191 | ), 192 | ), 193 | SizedBox( 194 | height: 12, 195 | ), 196 | TextFormField( 197 | maxLines: 5, 198 | keyboardType: TextInputType.multiline, 199 | decoration: InputDecoration( 200 | border: border, 201 | hintText: "Write a comment", 202 | labelStyle: CustomTextStyle.regularTextStyle 203 | .copyWith(color: Colors.black, fontSize: 20), 204 | hintStyle: 205 | CustomTextStyle.regularTextStyle.copyWith(color: Colors.grey), 206 | enabledBorder: border, 207 | focusedBorder: border, 208 | ), 209 | ),SizedBox( 210 | height: 24, 211 | ), 212 | Align( 213 | alignment: Alignment.centerLeft, 214 | child: RaisedButton.icon( 215 | onPressed: () {}, 216 | color: Colors.black, 217 | textColor: Colors.white, 218 | shape: RoundedRectangleBorder( 219 | borderRadius: BorderRadius.all(Radius.circular(2))), 220 | label: Text( 221 | "Subscribe", 222 | style: CustomTextStyle.regularTextStyle 223 | .copyWith(color: Colors.white, fontSize: 14), 224 | ), 225 | icon: Icon( 226 | Icons.arrow_back, 227 | color: Colors.white, 228 | ), 229 | ), 230 | ), 231 | SizedBox( 232 | height: 24, 233 | ), 234 | ], 235 | )), 236 | ); 237 | } 238 | 239 | var border = OutlineInputBorder( 240 | borderRadius: BorderRadius.circular(0), 241 | borderSide: BorderSide(color: Colors.grey.shade300, width: 1)); 242 | 243 | setUp(context) { 244 | if (ResponsiveLayout.isLargeScreen(context)) { 245 | sliderHeight = MediaQuery.of(context).size.height / 2; 246 | sliderHeaderFontSize = 60; 247 | childAspectRatio = 1.2; 248 | } else if (ResponsiveLayout.isMediumScreen(context)) { 249 | sliderHeight = MediaQuery.of(context).size.height / 2; 250 | sliderHeaderFontSize = 30; 251 | childAspectRatio = 1.25; 252 | } else { 253 | sliderHeight = MediaQuery.of(context).size.height / 3; 254 | sliderHeaderFontSize = 20; 255 | childAspectRatio = 1.2; 256 | } 257 | } 258 | 259 | slider() { 260 | return Container( 261 | width: double.infinity, 262 | height: sliderHeight, 263 | child: Stack( 264 | children: [ 265 | Container( 266 | width: double.infinity, 267 | child: Image( 268 | image: AssetImage("contact_us_slider.jpg"), 269 | fit: BoxFit.cover, 270 | ), 271 | ), 272 | Align( 273 | alignment: Alignment.bottomCenter, 274 | child: Container( 275 | alignment: Alignment.center, 276 | margin: EdgeInsets.symmetric(vertical: 12, horizontal: 12), 277 | child: Text( 278 | "contact us", 279 | textAlign: TextAlign.center, 280 | style: CustomTextStyle.boldTextStyle.copyWith( 281 | fontSize: sliderHeaderFontSize, 282 | color: Colors.black.withOpacity(.5)), 283 | )), 284 | ) 285 | ], 286 | )); 287 | } 288 | } 289 | -------------------------------------------------------------------------------- /lib/home.dart: -------------------------------------------------------------------------------- 1 | import 'package:ShoppingCart/widgets/LargeHomePage.dart'; 2 | import 'package:ShoppingCart/widgets/MobileHomePage.dart'; 3 | import 'package:flutter_web/material.dart'; 4 | import './utils/ScreenLayout.dart'; 5 | 6 | class Home extends StatelessWidget { 7 | @override 8 | Widget build(BuildContext context) { 9 | return LargeHomePage(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /lib/login.dart: -------------------------------------------------------------------------------- 1 | import 'package:ShoppingCart/register_user.dart'; 2 | import 'package:ShoppingCart/utils/CustomBorder.dart'; 3 | import 'package:ShoppingCart/utils/CustomTextStyle.dart'; 4 | import 'package:flutter_web/material.dart'; 5 | 6 | import 'home.dart'; 7 | 8 | class Login extends StatefulWidget { 9 | @override 10 | LoginState createState() => LoginState(); 11 | } 12 | 13 | class LoginState extends State { 14 | @override 15 | Widget build(BuildContext context) { 16 | return Scaffold( 17 | body: Builder( 18 | builder: (context) { 19 | return Center( 20 | child: Column( 21 | children: [ 22 | Expanded( 23 | child: Container(), 24 | flex: 10, 25 | ), 26 | Expanded( 27 | child: Container( 28 | width: 700, 29 | child: Column( 30 | children: [ 31 | SizedBox( 32 | height: 40, 33 | width: 20, 34 | ), 35 | Image( 36 | image: AssetImage("ic_logo.png"), 37 | height: 48, 38 | ), 39 | SizedBox( 40 | height: 10, 41 | width: 20, 42 | ), 43 | Text( 44 | "Grocery Fact", 45 | style: CustomTextStyle.regularTextStyle.copyWith( 46 | color: Colors.black, 47 | fontSize: 24, 48 | fontWeight: FontWeight.bold), 49 | ), 50 | SizedBox( 51 | height: 80, 52 | width: 20, 53 | ), 54 | Container( 55 | margin: EdgeInsets.fromLTRB(48, 16, 48, 16), 56 | child: TextFormField( 57 | keyboardType: TextInputType.text, 58 | decoration: InputDecoration( 59 | border: CustomBorder.border, 60 | hasFloatingPlaceholder: true, 61 | labelText: "Mobile No. or Email", 62 | enabledBorder: CustomBorder.border, 63 | focusedBorder: CustomBorder.border.copyWith( 64 | borderSide: 65 | BorderSide(color: Colors.blue)), 66 | errorBorder: CustomBorder.border.copyWith( 67 | borderSide: 68 | BorderSide(color: Colors.red)), 69 | labelStyle: CustomTextStyle.regularTextStyle), 70 | ), 71 | ), 72 | SizedBox( 73 | height: 20, 74 | width: 20, 75 | ), 76 | Container( 77 | margin: EdgeInsets.fromLTRB(48, 16, 48, 16), 78 | child: TextFormField( 79 | keyboardType: TextInputType.text, 80 | obscureText: true, 81 | decoration: InputDecoration( 82 | labelText: "Password", 83 | border: CustomBorder.border, 84 | enabledBorder: CustomBorder.border, 85 | focusedBorder: CustomBorder.border.copyWith( 86 | borderSide: 87 | BorderSide(color: Colors.blue)), 88 | errorBorder: CustomBorder.border.copyWith( 89 | borderSide: 90 | BorderSide(color: Colors.red)), 91 | labelStyle: CustomTextStyle.regularTextStyle), 92 | ), 93 | ), 94 | Container( 95 | margin: EdgeInsets.only(bottom: 24), 96 | child: RaisedButton( 97 | onPressed: () { 98 | Navigator.of(context).push(MaterialPageRoute( 99 | builder: (context) => Home())); 100 | }, 101 | child: Text("Login"), 102 | padding: EdgeInsets.symmetric( 103 | horizontal: 96, vertical: 16), 104 | ), 105 | ), 106 | Row( 107 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 108 | children: [ 109 | GestureDetector( 110 | child: Container( 111 | alignment: Alignment.topRight, 112 | margin: EdgeInsets.only(left: 48), 113 | child: Text( 114 | "New User?", 115 | style: CustomTextStyle.regularTextStyle 116 | .copyWith( 117 | color: Colors.teal, 118 | fontWeight: FontWeight.bold, 119 | fontSize: 16), 120 | ), 121 | ), 122 | onTap: () { 123 | Navigator.of(context).push(MaterialPageRoute( 124 | builder: (context) => RegisterUser())); 125 | }, 126 | ), 127 | Container( 128 | alignment: Alignment.topRight, 129 | margin: EdgeInsets.only(right: 48), 130 | child: Text( 131 | "Forget Password?", 132 | style: CustomTextStyle.regularTextStyle 133 | .copyWith( 134 | color: Colors.teal, 135 | fontWeight: FontWeight.bold, 136 | fontSize: 16), 137 | ), 138 | ), 139 | ], 140 | ) 141 | ], 142 | ), 143 | ), 144 | flex: 80, 145 | ), 146 | Expanded( 147 | child: Container(), 148 | flex: 10, 149 | ), 150 | ], 151 | ), 152 | ); 153 | }, 154 | ), 155 | ); 156 | } 157 | } 158 | -------------------------------------------------------------------------------- /lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter_web/material.dart'; 2 | 3 | import 'home.dart'; 4 | import 'login.dart'; 5 | 6 | void main() => runApp(MaterialApp( 7 | home: Home(), 8 | debugShowCheckedModeBanner: false, 9 | )); 10 | 11 | //void main() => runApp(Home()); 12 | 13 | -------------------------------------------------------------------------------- /lib/pages/drawer_menu.dart: -------------------------------------------------------------------------------- 1 | import 'package:ShoppingCart/utils/CustomColors.dart'; 2 | import 'package:ShoppingCart/utils/CustomTextStyle.dart'; 3 | import 'package:ShoppingCart/utils/MenuItem.dart'; 4 | import 'package:flutter_web/material.dart'; 5 | 6 | import '../about_us.dart'; 7 | import '../cart.dart'; 8 | import '../contact_us.dart'; 9 | import '../home.dart'; 10 | import '../login.dart'; 11 | import '../profile.dart'; 12 | import '../search.dart'; 13 | 14 | class DrawerMenu extends StatelessWidget { 15 | String _keyMenu; 16 | DrawerMenu(String menu_home) { 17 | _keyMenu = menu_home; 18 | } 19 | 20 | @override 21 | Widget build(BuildContext context) { 22 | return createDrawer(context); 23 | } 24 | 25 | createDrawer(context) { 26 | return Drawer( 27 | child: Column( 28 | crossAxisAlignment: CrossAxisAlignment.start, 29 | children: [ 30 | Container( 31 | padding: EdgeInsets.fromLTRB(0, 24, 0, 24), 32 | color: CustomColors.THEME_COLOR, 33 | child: Column( 34 | children: [ 35 | Container( 36 | height: 40, 37 | decoration: BoxDecoration( 38 | color: CustomColors.THEME_COLOR, 39 | image: DecorationImage(image: AssetImage("ic_logo.png"))), 40 | ), 41 | SizedBox( 42 | height: 16, 43 | ), 44 | Text( 45 | "Grocery Fact", 46 | style: CustomTextStyle.boldTextStyle 47 | .copyWith(color: Colors.white, fontSize: 20), 48 | ) 49 | ], 50 | ), 51 | ), 52 | SizedBox( 53 | height: 16, 54 | ), 55 | InkWell( 56 | onTap: () { 57 | if (_keyMenu != MenuItem.MENU_HOME) { 58 | Navigator.of(context).pop(); 59 | Navigator.of(context) 60 | .push(MaterialPageRoute(builder: (context) => Home())); 61 | } 62 | }, 63 | child: Container( 64 | width: double.infinity, 65 | padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12), 66 | child: Text( 67 | "Home", 68 | style: CustomTextStyle.boldTextStyle, 69 | ), 70 | ), 71 | ), 72 | SizedBox( 73 | height: 8, 74 | ), 75 | InkWell( 76 | onTap: () { 77 | if (_keyMenu != MenuItem.MENU_SEARCH) { 78 | Navigator.of(context).pop(); 79 | Navigator.of(context) 80 | .push(MaterialPageRoute(builder: (context) => Search())); 81 | } 82 | }, 83 | child: Container( 84 | width: double.infinity, 85 | padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12), 86 | child: Text( 87 | "Search", 88 | style: CustomTextStyle.boldTextStyle, 89 | ), 90 | ), 91 | ), 92 | SizedBox( 93 | height: 8, 94 | ), 95 | InkWell( 96 | onTap: () { 97 | if (_keyMenu != MenuItem.MENU_CART) { 98 | Navigator.of(context).pop(); 99 | Navigator.of(context) 100 | .push(MaterialPageRoute(builder: (context) => Cart())); 101 | } 102 | }, 103 | child: Container( 104 | width: double.infinity, 105 | padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12), 106 | child: Text( 107 | "Cart", 108 | style: CustomTextStyle.boldTextStyle, 109 | ), 110 | ), 111 | ), 112 | SizedBox( 113 | height: 8, 114 | ), 115 | InkWell( 116 | onTap: (){ 117 | if (_keyMenu != MenuItem.MENU_PROFILE) { 118 | Navigator.of(context).pop(); 119 | Navigator.of(context) 120 | .push(MaterialPageRoute(builder: (context) => Profile())); 121 | } 122 | }, 123 | child: Container( 124 | width: double.infinity, 125 | padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12), 126 | child: Text( 127 | "Profile", 128 | style: CustomTextStyle.boldTextStyle, 129 | ), 130 | ), 131 | ), 132 | SizedBox( 133 | height: 8, 134 | ), 135 | InkWell( 136 | onTap: () { 137 | if (_keyMenu != MenuItem.MENU_ABOUT) { 138 | Navigator.of(context).pop(); 139 | Navigator.of(context) 140 | .push(MaterialPageRoute(builder: (context) => AboutUs())); 141 | } 142 | }, 143 | child: Container( 144 | width: double.infinity, 145 | padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12), 146 | child: Text( 147 | "About Us", 148 | style: CustomTextStyle.boldTextStyle, 149 | ), 150 | ), 151 | ), 152 | SizedBox( 153 | height: 8, 154 | ), 155 | InkWell( 156 | onTap: () { 157 | if (_keyMenu != MenuItem.MENU_CONTACT_US) { 158 | Navigator.of(context).pop(); 159 | Navigator.of(context) 160 | .push(MaterialPageRoute(builder: (context) => ContactUs())); 161 | } 162 | }, 163 | child: Container( 164 | width: double.infinity, 165 | padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12), 166 | child: Text( 167 | "Contact Us", 168 | style: CustomTextStyle.boldTextStyle, 169 | ), 170 | ), 171 | ), 172 | SizedBox( 173 | height: 8, 174 | ), 175 | InkWell( 176 | onTap: () { 177 | if (_keyMenu != MenuItem.MENU_LOGIN_SIGNUP) { 178 | Navigator.of(context).pop(); 179 | Navigator.of(context) 180 | .push(MaterialPageRoute(builder: (context) => Login())); 181 | } 182 | }, 183 | child: Container( 184 | width: double.infinity, 185 | padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12), 186 | child: Text( 187 | "Login / SignUp", 188 | style: CustomTextStyle.boldTextStyle, 189 | ), 190 | ), 191 | ), 192 | ], 193 | ), 194 | ); 195 | } 196 | } 197 | -------------------------------------------------------------------------------- /lib/pages/footer.dart: -------------------------------------------------------------------------------- 1 | import 'package:ShoppingCart/utils/CustomColors.dart'; 2 | import 'package:ShoppingCart/utils/CustomTextStyle.dart'; 3 | import 'package:ShoppingCart/utils/ResponsiveLayout.dart'; 4 | import 'package:flutter_web/material.dart'; 5 | 6 | class Footer extends StatelessWidget { 7 | @override 8 | Widget build(BuildContext context) { 9 | return Container( 10 | color: Colors.black, 11 | child: ResponsiveLayout.isSmallScreen(context) 12 | ? createFooterForMobile() 13 | : createFooterForWeb(), 14 | ); 15 | } 16 | 17 | createFooterForWeb() { 18 | return Row( 19 | children: [ 20 | Expanded( 21 | child: Container( 22 | padding: EdgeInsets.only(left: 20), 23 | child: Column( 24 | crossAxisAlignment: CrossAxisAlignment.start, 25 | children: [ 26 | SizedBox( 27 | height: 10, 28 | ), 29 | Row( 30 | children: [ 31 | Image( 32 | image: AssetImage("ic_logo.png"), 33 | width: 40, 34 | height: 40, 35 | ), 36 | SizedBox( 37 | width: 20, 38 | ), 39 | Text( 40 | "Grocery Fact", 41 | style: CustomTextStyle.regularTextStyle 42 | .copyWith(color: Colors.white), 43 | ) 44 | ], 45 | ), 46 | SizedBox( 47 | height: 16, 48 | ), 49 | Container( 50 | margin: EdgeInsets.only(left: 4), 51 | child: InkWell( 52 | child: Text( 53 | "Copyright by Grocery Fact", 54 | style: CustomTextStyle.regularTextStyle 55 | .copyWith(color: Colors.white, fontSize: 14), 56 | ), 57 | ), 58 | ), 59 | SizedBox( 60 | height: 16, 61 | ), 62 | Row( 63 | mainAxisAlignment: MainAxisAlignment.start, 64 | crossAxisAlignment: CrossAxisAlignment.start, 65 | children: [ 66 | Image( 67 | image: AssetImage("payment/footer_payment.png"), 68 | ) 69 | ], 70 | ), 71 | SizedBox( 72 | height: 16, 73 | ), 74 | 75 | ], 76 | ), 77 | ), 78 | flex: 30, 79 | ), 80 | Expanded( 81 | child: Container( 82 | child: Column( 83 | mainAxisAlignment: MainAxisAlignment.start, 84 | crossAxisAlignment: CrossAxisAlignment.start, 85 | children: [ 86 | SizedBox( 87 | height: 24, 88 | ), 89 | Container( 90 | child: Text( 91 | "locate us", 92 | style: CustomTextStyle.boldTextStyle 93 | .copyWith(color: Colors.white), 94 | ), 95 | ), 96 | SizedBox( 97 | height: 12, 98 | ), 99 | Text( 100 | "28 Bartholomeo street, NY, NY", 101 | style: CustomTextStyle.regularTextStyle 102 | .copyWith(color: CustomColors.TEXT_COLOR, fontSize: 14,), 103 | textScaleFactor: 1.2, 104 | ), 105 | SizedBox( 106 | height: 8, 107 | ), 108 | Text( 109 | "phone: 0035 265 244 58", 110 | style: CustomTextStyle.regularTextStyle 111 | .copyWith(color: CustomColors.TEXT_COLOR, fontSize: 14), 112 | ), 113 | 114 | SizedBox( 115 | height: 8, 116 | ), 117 | Text( 118 | "phone: 0035 244 58 265", 119 | style: CustomTextStyle.regularTextStyle 120 | .copyWith(color: CustomColors.TEXT_COLOR, fontSize: 14), 121 | ), 122 | 123 | SizedBox( 124 | height: 8, 125 | ), 126 | Text( 127 | "e-mail: info@bazaar.com", 128 | style: CustomTextStyle.regularTextStyle 129 | .copyWith(color: CustomColors.TEXT_COLOR, fontSize: 14), 130 | ), 131 | 132 | SizedBox( 133 | height:24, 134 | ), 135 | ], 136 | ), 137 | ), 138 | flex: 30, 139 | ), 140 | Expanded( 141 | child: Container(), 142 | flex: 20, 143 | ), 144 | Expanded( 145 | child: Container(), 146 | flex: 20, 147 | ), 148 | ], 149 | ); 150 | } 151 | 152 | createFooterForMobile() { 153 | return Column( 154 | children: [ 155 | Container( 156 | padding: EdgeInsets.only(left: 20), 157 | child: Column( 158 | crossAxisAlignment: CrossAxisAlignment.start, 159 | children: [ 160 | SizedBox( 161 | height: 10, 162 | ), 163 | Row( 164 | children: [ 165 | Image( 166 | image: AssetImage("ic_logo.png"), 167 | width: 40, 168 | height: 40, 169 | ), 170 | SizedBox( 171 | width: 20, 172 | ), 173 | Text( 174 | "Grocery Fact", 175 | style: CustomTextStyle.regularTextStyle 176 | .copyWith(color: Colors.white), 177 | ) 178 | ], 179 | ), 180 | SizedBox( 181 | height: 16, 182 | ), 183 | Container( 184 | margin: EdgeInsets.only(left: 4), 185 | child: InkWell( 186 | child: Text( 187 | "Copyright by Grocery Fact", 188 | style: CustomTextStyle.regularTextStyle 189 | .copyWith(color: Colors.white, fontSize: 14), 190 | ), 191 | ), 192 | ), 193 | SizedBox( 194 | height: 16, 195 | ), 196 | Image( 197 | image: AssetImage("payment/footer_payment.png"), 198 | ), 199 | SizedBox( 200 | height: 20, 201 | ), 202 | Container( 203 | child: Text( 204 | "locate us", 205 | style: CustomTextStyle.boldTextStyle 206 | .copyWith(color: Colors.white), 207 | ), 208 | ), 209 | SizedBox( 210 | height: 12, 211 | ), 212 | Text( 213 | "28 Bartholomeo street, NY, NY", 214 | style: CustomTextStyle.regularTextStyle 215 | .copyWith(color: CustomColors.TEXT_COLOR, fontSize: 12), 216 | ), 217 | SizedBox( 218 | height: 8, 219 | ), 220 | Text( 221 | "phone: 0035 265 244 58", 222 | style: CustomTextStyle.regularTextStyle 223 | .copyWith(color: CustomColors.TEXT_COLOR, fontSize: 12), 224 | ), 225 | 226 | SizedBox( 227 | height: 8, 228 | ), 229 | Text( 230 | "phone: 0035 244 58 265", 231 | style: CustomTextStyle.regularTextStyle 232 | .copyWith(color: CustomColors.TEXT_COLOR, fontSize: 12), 233 | ), 234 | 235 | SizedBox( 236 | height: 8, 237 | ), 238 | Text( 239 | "e-mail: info@bazaar.com", 240 | style: CustomTextStyle.regularTextStyle 241 | .copyWith(color: CustomColors.TEXT_COLOR, fontSize: 12), 242 | ), 243 | 244 | SizedBox( 245 | height: 8, 246 | ), 247 | ], 248 | ), 249 | ), 250 | ], 251 | ); 252 | } 253 | } 254 | -------------------------------------------------------------------------------- /lib/pages/header.dart: -------------------------------------------------------------------------------- 1 | import 'package:ShoppingCart/utils/CustomTextStyle.dart'; 2 | import 'package:ShoppingCart/utils/MenuItem.dart'; 3 | import 'package:ShoppingCart/utils/ResponsiveLayout.dart'; 4 | import 'package:flutter_web/material.dart'; 5 | 6 | import '../about_us.dart'; 7 | import '../cart.dart'; 8 | import '../contact_us.dart'; 9 | import '../login.dart'; 10 | import '../profile.dart'; 11 | import '../search.dart'; 12 | 13 | class Header extends StatelessWidget { 14 | double sliderHeight = 500; 15 | double sliderHeaderFontSize = 60; 16 | List listImage = List(); 17 | String _keyMenu; 18 | List listBannerTitle = List(); 19 | 20 | Header(BuildContext context, String keyMenu) { 21 | setUp(context); 22 | _keyMenu = keyMenu; 23 | } 24 | 25 | setUp(context) { 26 | if (ResponsiveLayout.isLargeScreen(context)) { 27 | sliderHeight = MediaQuery.of(context).size.height / 2; 28 | sliderHeaderFontSize = 60; 29 | } else if (ResponsiveLayout.isMediumScreen(context)) { 30 | sliderHeight = MediaQuery.of(context).size.height / 2; 31 | sliderHeaderFontSize = 30; 32 | } else { 33 | sliderHeight = MediaQuery.of(context).size.height / 2; 34 | sliderHeaderFontSize = 20; 35 | } 36 | } 37 | 38 | @override 39 | Widget build(BuildContext context) { 40 | return Row( 41 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 42 | children: [ 43 | Container( 44 | margin: EdgeInsets.only(top: 8, bottom: 8), 45 | child: Row( 46 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 47 | children: [ 48 | Container( 49 | child: Image( 50 | image: AssetImage("ic_logo.png"), 51 | height: 40, 52 | width: 40, 53 | ), 54 | margin: EdgeInsets.only(left: 24), 55 | ), 56 | ], 57 | ), 58 | ), 59 | createMenu(context) 60 | ], 61 | ); 62 | } 63 | 64 | createMenu(context) { 65 | if (ResponsiveLayout.isMediumScreen(context) || 66 | ResponsiveLayout.isLargeScreen(context)) { 67 | return Row( 68 | crossAxisAlignment: CrossAxisAlignment.end, 69 | mainAxisAlignment: MainAxisAlignment.end, 70 | children: [ 71 | Container( 72 | child: Text( 73 | "Home", 74 | style: CustomTextStyle.boldTextStyle.copyWith( 75 | color: Colors.black, 76 | ), 77 | ), 78 | padding: EdgeInsets.symmetric(vertical: 16, horizontal: 16), 79 | ), 80 | GestureDetector( 81 | onTap: (){ 82 | if (_keyMenu != MenuItem.MENU_SEARCH) { 83 | Navigator.of(context) 84 | .push(MaterialPageRoute(builder: (context) => Search())); 85 | } 86 | }, 87 | child: Container( 88 | child: Text( 89 | "Search", 90 | style: CustomTextStyle.boldTextStyle.copyWith( 91 | color: Colors.black, 92 | ), 93 | ), 94 | padding: EdgeInsets.symmetric(vertical: 16, horizontal: 16), 95 | ), 96 | ), 97 | GestureDetector( 98 | onTap: () { 99 | if (_keyMenu != MenuItem.MENU_CART) { 100 | Navigator.of(context) 101 | .push(MaterialPageRoute(builder: (context) => Cart())); 102 | } 103 | }, 104 | child: Container( 105 | child: Text( 106 | "Cart", 107 | style: CustomTextStyle.boldTextStyle.copyWith( 108 | color: Colors.black, 109 | ), 110 | ), 111 | padding: EdgeInsets.symmetric(vertical: 16, horizontal: 16), 112 | ), 113 | ), 114 | GestureDetector( 115 | onTap: (){ 116 | if (_keyMenu != MenuItem.MENU_PROFILE) { 117 | Navigator.of(context) 118 | .push(MaterialPageRoute(builder: (context) => Profile())); 119 | } 120 | }, 121 | child: Container( 122 | child: Text( 123 | "Profile", 124 | style: CustomTextStyle.boldTextStyle.copyWith( 125 | color: Colors.black, 126 | ), 127 | ), 128 | padding: EdgeInsets.symmetric(vertical: 16, horizontal: 16), 129 | ), 130 | ), 131 | GestureDetector( 132 | onTap: () { 133 | if (_keyMenu != MenuItem.MENU_ABOUT) { 134 | Navigator.of(context) 135 | .push(MaterialPageRoute(builder: (context) => AboutUs())); 136 | } 137 | }, 138 | child: Container( 139 | child: Text( 140 | "About Us", 141 | style: CustomTextStyle.boldTextStyle.copyWith( 142 | color: Colors.black, 143 | ), 144 | ), 145 | padding: EdgeInsets.symmetric(vertical: 16, horizontal: 16), 146 | ), 147 | ), 148 | GestureDetector( 149 | onTap: (){ 150 | if (_keyMenu != MenuItem.MENU_CONTACT_US) { 151 | Navigator.of(context) 152 | .push(MaterialPageRoute(builder: (context) => ContactUs())); 153 | } 154 | }, 155 | child: Container( 156 | child: Text( 157 | "Contact Us", 158 | style: CustomTextStyle.boldTextStyle.copyWith( 159 | color: Colors.black, 160 | ), 161 | ), 162 | padding: EdgeInsets.symmetric(vertical: 16, horizontal: 16), 163 | ), 164 | ), 165 | GestureDetector( 166 | onTap: () { 167 | Navigator.push( 168 | context, MaterialPageRoute(builder: (context) => Login())); 169 | }, 170 | child: Container( 171 | margin: EdgeInsets.only(right: 48), 172 | child: Text( 173 | "Login / SignUp", 174 | style: CustomTextStyle.boldTextStyle.copyWith( 175 | color: Colors.black, 176 | ), 177 | ), 178 | padding: EdgeInsets.symmetric(vertical: 16, horizontal: 16), 179 | ), 180 | ), 181 | ], 182 | ); 183 | } else { 184 | return Row( 185 | children: [ 186 | IconButton( 187 | icon: Icon(Icons.menu), 188 | onPressed: () { 189 | Scaffold.of(context).openEndDrawer(); 190 | }) 191 | ], 192 | ); 193 | } 194 | } 195 | } 196 | -------------------------------------------------------------------------------- /lib/pages/home_slider.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter_web/material.dart'; 2 | import 'package:ShoppingCart/utils/CustomTextStyle.dart'; 3 | import 'package:ShoppingCart/utils/ResponsiveLayout.dart'; 4 | class HomeSlider extends StatelessWidget{ 5 | 6 | double sliderHeight = 500; 7 | double sliderHeaderFontSize=60; 8 | List listImage = List(); 9 | List listBannerTitle = List(); 10 | HomeSlider(BuildContext context){ 11 | bannerList(); 12 | bannerTitle(); 13 | setUp(context); 14 | } 15 | 16 | setUp(context){ 17 | if (ResponsiveLayout.isLargeScreen(context)) { 18 | sliderHeight = MediaQuery.of(context).size.height/2; 19 | sliderHeaderFontSize=60; 20 | } else if (ResponsiveLayout.isMediumScreen(context)) { 21 | sliderHeight = MediaQuery.of(context).size.height/2; 22 | sliderHeaderFontSize=30; 23 | } else { 24 | sliderHeight = MediaQuery.of(context).size.height/2; 25 | sliderHeaderFontSize=20; 26 | } 27 | } 28 | 29 | void bannerTitle() { 30 | listBannerTitle.add("a summer breaze"); 31 | listBannerTitle.add("perfect\ntime to shop"); 32 | listBannerTitle.add("sense of\n sophistication"); 33 | } 34 | 35 | void bannerList() { 36 | listImage.add("banner/banner1.jpg"); 37 | listImage.add("banner/banner2.jpg"); 38 | listImage.add("banner/banner3.jpg"); 39 | } 40 | @override 41 | Widget build(BuildContext context) { 42 | return sliderSection(context); 43 | } 44 | 45 | sliderSection(context) { 46 | return Stack( 47 | children: [ 48 | Container( 49 | height: sliderHeight, 50 | child: PageView.builder( 51 | itemBuilder: (context, position) { 52 | return createSlider(position); 53 | }, 54 | itemCount: listImage.length, 55 | ), 56 | ), 57 | ], 58 | ); 59 | } 60 | 61 | createSlider(position) { 62 | var alignment; 63 | var crossAxisAlignment; 64 | var textAlign; 65 | if (position == 0) { 66 | alignment = Alignment.center; 67 | textAlign = TextAlign.center; 68 | crossAxisAlignment = CrossAxisAlignment.center; 69 | } else if (position == 1) { 70 | alignment = Alignment.topLeft; 71 | textAlign = TextAlign.start; 72 | crossAxisAlignment = CrossAxisAlignment.start; 73 | } else { 74 | alignment = Alignment.topRight; 75 | textAlign = TextAlign.end; 76 | crossAxisAlignment = CrossAxisAlignment.end; 77 | } 78 | return Container( 79 | width: double.infinity, 80 | child: Stack( 81 | children: [ 82 | Container( 83 | width: double.infinity, 84 | child: Image( 85 | image: AssetImage(listImage[position]), 86 | fit: BoxFit.cover, 87 | ), 88 | ), 89 | Container( 90 | alignment: alignment, 91 | margin: EdgeInsets.symmetric(vertical: 12, horizontal: 12), 92 | child: Column( 93 | mainAxisAlignment: MainAxisAlignment.center, 94 | crossAxisAlignment: crossAxisAlignment, 95 | children: [ 96 | Text( 97 | listBannerTitle[position], 98 | textAlign: textAlign, 99 | style: CustomTextStyle.boldTextStyle.copyWith(fontSize: sliderHeaderFontSize), 100 | ), 101 | Container( 102 | width: 100, 103 | height: 4, 104 | color: Colors.black, 105 | margin: EdgeInsets.only(top: 24), 106 | ), 107 | SizedBox( 108 | height: 24, 109 | ), 110 | RaisedButton.icon( 111 | onPressed: () {}, 112 | color: Colors.black, 113 | textColor: Colors.white, 114 | shape: RoundedRectangleBorder( 115 | borderRadius: BorderRadius.all(Radius.circular(2))), 116 | label: Text( 117 | "Subscribe", 118 | style: CustomTextStyle.regularTextStyle 119 | .copyWith(color: Colors.white, fontSize: 14), 120 | ), 121 | icon: Icon( 122 | Icons.arrow_back, 123 | color: Colors.white, 124 | ), 125 | ) 126 | ], 127 | ), 128 | ) 129 | ], 130 | )); 131 | } 132 | 133 | } -------------------------------------------------------------------------------- /lib/profile.dart: -------------------------------------------------------------------------------- 1 | import 'package:ShoppingCart/pages/drawer_menu.dart'; 2 | import 'package:ShoppingCart/pages/footer.dart'; 3 | import 'package:ShoppingCart/pages/header.dart'; 4 | import 'package:ShoppingCart/utils/CustomTextStyle.dart'; 5 | import 'package:ShoppingCart/utils/MenuItem.dart'; 6 | import 'package:ShoppingCart/utils/ResponsiveLayout.dart'; 7 | import 'package:flutter_web/material.dart'; 8 | 9 | class Profile extends StatelessWidget { 10 | GlobalKey keyScaffold = GlobalKey(); 11 | double sliderHeight = 500; 12 | double sliderHeaderFontSize = 60; 13 | double childAspectRatio = 1.2; 14 | double textBoxWidth = 500; 15 | 16 | @override 17 | Widget build(BuildContext context) { 18 | setUp(context); 19 | return createScaffold(context); 20 | } 21 | 22 | createScaffold(context) { 23 | return Scaffold( 24 | backgroundColor: Colors.white, 25 | key: keyScaffold, 26 | endDrawer: DrawerMenu(MenuItem.MENU_PROFILE), 27 | body: Builder(builder: (context) { 28 | return ListView( 29 | children: [ 30 | Header(context, MenuItem.MENU_PROFILE), 31 | slider(), 32 | profileSection(context), 33 | Footer() 34 | ], 35 | ); 36 | }), 37 | ); 38 | } 39 | 40 | profileSection(context) { 41 | if (ResponsiveLayout.isLargeScreen(context)) { 42 | return Container( 43 | child: Row( 44 | children: [ 45 | Expanded( 46 | child: Container(), 47 | flex: 20, 48 | ), 49 | Expanded( 50 | child: Row( 51 | mainAxisAlignment: MainAxisAlignment.start, 52 | crossAxisAlignment: CrossAxisAlignment.start, 53 | children: [createImage(), createForm(context)], 54 | ), 55 | flex: 60, 56 | ), 57 | Expanded( 58 | child: Container(), 59 | flex: 20, 60 | ), 61 | ], 62 | ), 63 | ); 64 | } else { 65 | return Container( 66 | margin: EdgeInsets.all(24), 67 | child: Column( 68 | mainAxisAlignment: MainAxisAlignment.center, 69 | children: [createImage(), createForm(context)], 70 | ), 71 | ); 72 | } 73 | } 74 | 75 | createImage() { 76 | return Container( 77 | child: Column( 78 | mainAxisAlignment: MainAxisAlignment.start, 79 | children: [ 80 | Container( 81 | height: 200, 82 | margin: EdgeInsets.only(left: 8, top: 24, right: 24), 83 | width: 200, 84 | child: Icon( 85 | Icons.person, 86 | size: 72, 87 | ), 88 | decoration: BoxDecoration( 89 | border: Border.all(color: Colors.grey.shade300, width: 1)), 90 | ), 91 | SizedBox( 92 | height: 16, 93 | ), 94 | Container( 95 | child: Text( 96 | "+ UPLOAD IMAGE", 97 | style: CustomTextStyle.boldTextStyle.copyWith(color: Colors.red), 98 | ), 99 | ) 100 | ], 101 | ), 102 | ); 103 | } 104 | 105 | createForm(context) { 106 | return Container( 107 | width: textBoxWidth, 108 | child: Column( 109 | children: [ 110 | SizedBox( 111 | height: 24, 112 | ), 113 | TextFormField( 114 | decoration: InputDecoration( 115 | border: border, 116 | hintText: "First Name", 117 | labelStyle: CustomTextStyle.regularTextStyle 118 | .copyWith(color: Colors.black, fontSize: 20), 119 | hintStyle: 120 | CustomTextStyle.regularTextStyle.copyWith(color: Colors.grey), 121 | enabledBorder: border, 122 | focusedBorder: border, 123 | ), 124 | ), 125 | SizedBox( 126 | height: 12, 127 | ), 128 | TextFormField( 129 | decoration: InputDecoration( 130 | border: border, 131 | hintText: "Last Name", 132 | labelStyle: CustomTextStyle.regularTextStyle 133 | .copyWith(color: Colors.black, fontSize: 20), 134 | hintStyle: 135 | CustomTextStyle.regularTextStyle.copyWith(color: Colors.grey), 136 | enabledBorder: border, 137 | focusedBorder: border, 138 | ), 139 | ), 140 | SizedBox( 141 | height: 12, 142 | ), 143 | TextFormField( 144 | keyboardType: TextInputType.emailAddress, 145 | decoration: InputDecoration( 146 | border: border, 147 | hintText: "Email Address", 148 | labelStyle: CustomTextStyle.regularTextStyle 149 | .copyWith(color: Colors.black, fontSize: 20), 150 | hintStyle: 151 | CustomTextStyle.regularTextStyle.copyWith(color: Colors.grey), 152 | enabledBorder: border, 153 | focusedBorder: border, 154 | ), 155 | ), 156 | SizedBox( 157 | height: 12, 158 | ), 159 | TextFormField( 160 | keyboardType: TextInputType.phone, 161 | decoration: InputDecoration( 162 | border: border, 163 | hintText: "Mobile Number", 164 | labelStyle: CustomTextStyle.regularTextStyle 165 | .copyWith(color: Colors.black, fontSize: 20), 166 | hintStyle: 167 | CustomTextStyle.regularTextStyle.copyWith(color: Colors.grey), 168 | enabledBorder: border, 169 | focusedBorder: border, 170 | ), 171 | ), 172 | SizedBox( 173 | height: 12, 174 | ), 175 | TextFormField( 176 | keyboardType: TextInputType.text, 177 | obscureText: true, 178 | decoration: InputDecoration( 179 | border: border, 180 | hintText: "Old Password", 181 | labelStyle: CustomTextStyle.regularTextStyle 182 | .copyWith(color: Colors.black, fontSize: 20), 183 | hintStyle: 184 | CustomTextStyle.regularTextStyle.copyWith(color: Colors.grey), 185 | enabledBorder: border, 186 | focusedBorder: border, 187 | ), 188 | ), 189 | SizedBox( 190 | height: 12, 191 | ), 192 | TextFormField( 193 | keyboardType: TextInputType.text, 194 | obscureText: true, 195 | decoration: InputDecoration( 196 | border: border, 197 | hintText: "New Password", 198 | labelStyle: CustomTextStyle.regularTextStyle 199 | .copyWith(color: Colors.black, fontSize: 20), 200 | hintStyle: 201 | CustomTextStyle.regularTextStyle.copyWith(color: Colors.grey), 202 | enabledBorder: border, 203 | focusedBorder: border, 204 | ), 205 | ), 206 | SizedBox( 207 | height: 12, 208 | ), 209 | TextFormField( 210 | keyboardType: TextInputType.text, 211 | obscureText: true, 212 | decoration: InputDecoration( 213 | border: border, 214 | hasFloatingPlaceholder: true, 215 | hintText: "Confirm Password", 216 | labelStyle: CustomTextStyle.regularTextStyle 217 | .copyWith(color: Colors.black, fontSize: 20), 218 | hintStyle: 219 | CustomTextStyle.regularTextStyle.copyWith(color: Colors.grey), 220 | enabledBorder: border, 221 | focusedBorder: border, 222 | ), 223 | ), 224 | SizedBox( 225 | height: 12, 226 | ), 227 | Align( 228 | alignment: Alignment.center, 229 | child: RaisedButton( 230 | onPressed: () {}, 231 | color: Colors.black, 232 | textColor: Colors.white, 233 | shape: RoundedRectangleBorder( 234 | borderRadius: BorderRadius.all(Radius.circular(2))), 235 | child: Text( 236 | "Save", 237 | style: CustomTextStyle.regularTextStyle 238 | .copyWith(color: Colors.white, fontSize: 14), 239 | ), 240 | ), 241 | ), 242 | SizedBox( 243 | height: 24, 244 | ), 245 | ], 246 | ), 247 | ); 248 | } 249 | 250 | var border = OutlineInputBorder( 251 | borderRadius: BorderRadius.circular(0), 252 | borderSide: BorderSide(color: Colors.grey.shade300, width: 1)); 253 | 254 | setUp(context) { 255 | if (ResponsiveLayout.isLargeScreen(context)) { 256 | sliderHeight = MediaQuery.of(context).size.height / 2; 257 | sliderHeaderFontSize = 60; 258 | childAspectRatio = 1.2; 259 | textBoxWidth = 500; 260 | } else if (ResponsiveLayout.isMediumScreen(context)) { 261 | sliderHeight = MediaQuery.of(context).size.height / 2; 262 | sliderHeaderFontSize = 30; 263 | childAspectRatio = 1.25; 264 | textBoxWidth = 400; 265 | } else { 266 | sliderHeight = MediaQuery.of(context).size.height / 3; 267 | sliderHeaderFontSize = 20; 268 | childAspectRatio = 1.2; 269 | textBoxWidth = 300; 270 | } 271 | } 272 | 273 | slider() { 274 | return Container( 275 | width: double.infinity, 276 | height: sliderHeight, 277 | child: Stack( 278 | children: [ 279 | Container( 280 | width: double.infinity, 281 | child: Image( 282 | image: AssetImage("profile_slider.jpg"), 283 | fit: BoxFit.cover, 284 | ), 285 | ), 286 | Align( 287 | alignment: Alignment.bottomCenter, 288 | child: Container( 289 | alignment: Alignment.center, 290 | margin: EdgeInsets.symmetric(vertical: 12, horizontal: 12), 291 | child: Text( 292 | "profile", 293 | textAlign: TextAlign.center, 294 | style: CustomTextStyle.boldTextStyle.copyWith( 295 | fontSize: sliderHeaderFontSize, color: Colors.blueGrey), 296 | )), 297 | ) 298 | ], 299 | )); 300 | } 301 | } 302 | -------------------------------------------------------------------------------- /lib/register_user.dart: -------------------------------------------------------------------------------- 1 | import 'package:ShoppingCart/utils/CustomBorder.dart'; 2 | import 'package:ShoppingCart/utils/CustomTextStyle.dart'; 3 | import 'package:flutter_web/material.dart'; 4 | class RegisterUser extends StatefulWidget{ 5 | @override 6 | RegisterUserState createState()=>RegisterUserState(); 7 | 8 | } 9 | 10 | 11 | class RegisterUserState extends State{ 12 | @override 13 | Widget build(BuildContext context) { 14 | return Scaffold( 15 | body: SingleChildScrollView( 16 | child: Center( 17 | child: Container( 18 | width: 500, 19 | alignment: Alignment.center, 20 | child: Column( 21 | mainAxisSize: MainAxisSize.min, 22 | children: [ 23 | SizedBox( 24 | height: 40, 25 | width: 20, 26 | ), 27 | Image( 28 | image: AssetImage("ic_logo.png"), 29 | height: 48, 30 | ), 31 | SizedBox( 32 | height: 10, 33 | width: 20, 34 | ), 35 | Text("Grocery Fact",style: CustomTextStyle.regularTextStyle.copyWith(color: Colors.black,fontSize: 24,fontWeight: FontWeight.bold),), 36 | SizedBox( 37 | height: 60, 38 | width: 20, 39 | ), 40 | Container( 41 | margin: EdgeInsets.fromLTRB(48, 8, 48, 8), 42 | child: TextFormField( 43 | keyboardType: TextInputType.text, 44 | decoration: InputDecoration( 45 | border: CustomBorder.border, 46 | hasFloatingPlaceholder: true, 47 | labelText: "Name", 48 | enabledBorder: CustomBorder.border, 49 | focusedBorder: CustomBorder.border.copyWith( 50 | borderSide: BorderSide(color: Colors.blue)), 51 | errorBorder: CustomBorder.border.copyWith( 52 | borderSide: BorderSide(color: Colors.red)), 53 | labelStyle: CustomTextStyle.regularTextStyle), 54 | ), 55 | ), 56 | Container( 57 | margin: EdgeInsets.fromLTRB(48, 8, 48, 8), 58 | child: TextFormField( 59 | keyboardType: TextInputType.phone, 60 | decoration: InputDecoration( 61 | border: CustomBorder.border, 62 | hasFloatingPlaceholder: true, 63 | labelText: "Mobile No", 64 | enabledBorder: CustomBorder.border, 65 | focusedBorder: CustomBorder.border.copyWith( 66 | borderSide: BorderSide(color: Colors.blue)), 67 | errorBorder: CustomBorder.border.copyWith( 68 | borderSide: BorderSide(color: Colors.red)), 69 | labelStyle: CustomTextStyle.regularTextStyle), 70 | ), 71 | ), 72 | Container( 73 | margin: EdgeInsets.fromLTRB(48, 8, 48, 8), 74 | child: TextFormField( 75 | keyboardType: TextInputType.emailAddress, 76 | decoration: InputDecoration( 77 | border: CustomBorder.border, 78 | hasFloatingPlaceholder: true, 79 | labelText: "Email", 80 | enabledBorder: CustomBorder.border, 81 | focusedBorder: CustomBorder.border.copyWith( 82 | borderSide: BorderSide(color: Colors.blue)), 83 | errorBorder: CustomBorder.border.copyWith( 84 | borderSide: BorderSide(color: Colors.red)), 85 | labelStyle: CustomTextStyle.regularTextStyle), 86 | ), 87 | ), 88 | 89 | Container( 90 | margin: EdgeInsets.fromLTRB(48, 8, 48, 8), 91 | child: TextFormField( 92 | keyboardType: TextInputType.text, 93 | obscureText: true, 94 | decoration: InputDecoration( 95 | labelText: "Password", 96 | border: CustomBorder.border, 97 | enabledBorder: CustomBorder.border, 98 | focusedBorder: CustomBorder.border.copyWith( 99 | borderSide: BorderSide(color: Colors.blue)), 100 | errorBorder: CustomBorder.border.copyWith( 101 | borderSide: BorderSide(color: Colors.red)), 102 | labelStyle: CustomTextStyle.regularTextStyle), 103 | ), 104 | ), 105 | Container( 106 | margin: EdgeInsets.only(bottom: 24,top: 24), 107 | child: RaisedButton(onPressed: (){},child: Text("Register"),padding: EdgeInsets.symmetric(horizontal: 96,vertical: 16),), 108 | ), 109 | 110 | ], 111 | ), 112 | ), 113 | ), 114 | ), 115 | ); 116 | } 117 | 118 | } -------------------------------------------------------------------------------- /lib/search.dart: -------------------------------------------------------------------------------- 1 | import 'package:ShoppingCart/pages/drawer_menu.dart'; 2 | import 'package:ShoppingCart/pages/footer.dart'; 3 | import 'package:ShoppingCart/pages/header.dart'; 4 | import 'package:ShoppingCart/utils/CustomTextStyle.dart'; 5 | import 'package:ShoppingCart/utils/MenuItem.dart'; 6 | import 'package:ShoppingCart/utils/ResponsiveLayout.dart'; 7 | import 'package:flutter_web/material.dart'; 8 | 9 | class Search extends StatelessWidget { 10 | GlobalKey keyScaffold = GlobalKey(); 11 | double sliderHeight = 500; 12 | double sliderHeaderFontSize = 60; 13 | double childAspectRatio=1.2; 14 | 15 | List listName = List(); 16 | @override 17 | Widget build(BuildContext context) { 18 | setUp(context); 19 | listName.add("Custom Font"); 20 | listName.add("Coming soon page"); 21 | listName.add("Contact Us"); 22 | listName.add("Main Home"); 23 | return createScaffold(context); 24 | } 25 | 26 | createScaffold(context) { 27 | 28 | return Scaffold( 29 | key: keyScaffold, 30 | endDrawer: DrawerMenu(MenuItem.MENU_SEARCH), 31 | body: Builder(builder: (context) { 32 | return ListView( 33 | children: [ 34 | Header(context,MenuItem.MENU_SEARCH), 35 | searchSection(), 36 | Footer() 37 | ], 38 | ); 39 | }), 40 | ); 41 | } 42 | 43 | searchSection(){ 44 | return Container( 45 | child: Row( 46 | children: [ 47 | Expanded(child: Container(),flex: 20,), 48 | Expanded(flex: 60, 49 | child: Container( 50 | margin: EdgeInsets.only(top: 48,left: 24,right: 24,bottom: 24), 51 | child: Column( 52 | mainAxisAlignment: MainAxisAlignment.start, 53 | crossAxisAlignment: CrossAxisAlignment.start, 54 | children: [ 55 | Container( 56 | child: Text("New Search : ",style: CustomTextStyle.boldTextStyle.copyWith(fontSize: 24),), 57 | ), 58 | Container( 59 | margin: EdgeInsets.only(top: 24), 60 | child: Stack( 61 | children: [ 62 | TextFormField( 63 | decoration: InputDecoration( 64 | contentPadding: EdgeInsets.only(top: 8,bottom: 8,right: 48), 65 | hintText: "Type here", 66 | hintStyle: CustomTextStyle.regularTextStyle.copyWith(color: Colors.grey), 67 | labelStyle: CustomTextStyle.regularTextStyle, 68 | ), 69 | ), 70 | Align( 71 | child: Icon(Icons.search,color: Colors.grey,), 72 | heightFactor: 02, 73 | alignment: Alignment.centerRight, 74 | ) 75 | ], 76 | ), 77 | ), 78 | Container( 79 | margin: EdgeInsets.only(top: 4), 80 | child: Text("If you are not happy with the results below please do another search",style: CustomTextStyle.regularTextStyle.copyWith(color: Colors.grey,fontSize: 14),), 81 | ), 82 | SizedBox(height: 24,), 83 | ListView.builder(itemBuilder: (context,position){ 84 | return listSearchItem(listName[position]); 85 | },itemCount: listName.length,shrinkWrap: true,) 86 | ], 87 | ), 88 | ), 89 | ), 90 | Expanded(child: Container(),flex: 20,), 91 | ], 92 | ), 93 | ); 94 | } 95 | 96 | listSearchItem(String strTitle){ 97 | return Container( 98 | padding: EdgeInsets.only(top: 16,bottom: 16), 99 | child: Column( 100 | crossAxisAlignment: CrossAxisAlignment.start, 101 | children: [ 102 | Text(strTitle,style: CustomTextStyle.boldTextStyle,), 103 | SizedBox(height: 16,), 104 | Container( 105 | color: Colors.grey.shade300, 106 | height: 1, 107 | ) 108 | ], 109 | ), 110 | ); 111 | } 112 | 113 | 114 | 115 | setUp(context) { 116 | if (ResponsiveLayout.isLargeScreen(context)) { 117 | sliderHeight = MediaQuery 118 | .of(context) 119 | .size 120 | .height / 2; 121 | sliderHeaderFontSize = 60; 122 | childAspectRatio = 1.2; 123 | } else if (ResponsiveLayout.isMediumScreen(context)) { 124 | sliderHeight = MediaQuery 125 | .of(context) 126 | .size 127 | .height / 2; 128 | sliderHeaderFontSize = 30; 129 | childAspectRatio = 1.25; 130 | } else { 131 | sliderHeight = MediaQuery 132 | .of(context) 133 | .size 134 | .height / 3; 135 | sliderHeaderFontSize = 20; 136 | childAspectRatio = 1.2; 137 | } 138 | } 139 | } 140 | -------------------------------------------------------------------------------- /lib/utils/CustomBorder.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter_web/material.dart'; 2 | class CustomBorder{ 3 | static var border = OutlineInputBorder( 4 | borderRadius: BorderRadius.all(Radius.circular(4)), 5 | borderSide: BorderSide(width:2,color: Colors.grey,style: BorderStyle.solid) 6 | ); 7 | } -------------------------------------------------------------------------------- /lib/utils/CustomColors.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter_web_ui/ui.dart'; 2 | 3 | class CustomColors { 4 | static var THEME_COLOR = Color(0xFFCE6756); 5 | static var TEXT_COLOR= Color(0xFF949494); 6 | } 7 | -------------------------------------------------------------------------------- /lib/utils/CustomTextStyle.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter_web/material.dart'; 2 | class CustomTextStyle { 3 | static var regularTextStyle = TextStyle( 4 | color: Colors.black, 5 | fontFamily: "GoogleSans", 6 | fontSize: 18, 7 | ); 8 | 9 | static var boldTextStyle= TextStyle( 10 | color: Colors.black, 11 | fontFamily: "GoogleSans", 12 | fontWeight: FontWeight.w600, 13 | fontSize: 16, 14 | ); 15 | } -------------------------------------------------------------------------------- /lib/utils/MenuItem.dart: -------------------------------------------------------------------------------- 1 | class MenuItem{ 2 | static String MENU_HOME = "Home"; 3 | static String MENU_SEARCH = "Search"; 4 | static String MENU_CART= "Cart"; 5 | static String MENU_PROFILE= "Profile"; 6 | static String MENU_ABOUT= "About Us"; 7 | static String MENU_CONTACT_US= "Contact Us"; 8 | static String MENU_LOGIN_SIGNUP= "Login / SignUp"; 9 | } -------------------------------------------------------------------------------- /lib/utils/ResponsiveLayout.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter_web/material.dart'; 2 | 3 | class ResponsiveLayout { 4 | static bool isSmallScreen(context) { 5 | return MediaQuery.of(context).size.width <= 800; 6 | } 7 | 8 | static bool isMediumScreen(context) { 9 | return MediaQuery.of(context).size.width > 800 && 10 | MediaQuery.of(context).size.width < 1200; 11 | } 12 | 13 | static bool isLargeScreen(context) { 14 | return MediaQuery.of(context).size.width > 1200; 15 | } 16 | } -------------------------------------------------------------------------------- /lib/utils/ScreenLayout.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter_web/material.dart'; 2 | 3 | class ScreenLayout extends StatelessWidget { 4 | final Widget largeScreen; 5 | final Widget mediumScreen; 6 | final Widget smallScreen; 7 | 8 | ScreenLayout( 9 | {Key key, 10 | @required this.largeScreen, 11 | this.mediumScreen, 12 | this.smallScreen}) 13 | : super(key: key); 14 | 15 | static bool isSmallScreen(context) { 16 | return MediaQuery.of(context).size.width < 800; 17 | } 18 | 19 | static bool isMediumScreen(context) { 20 | return MediaQuery.of(context).size.width > 800 && 21 | MediaQuery.of(context).size.width < 1200; 22 | } 23 | 24 | static bool isLargeScreen(context) { 25 | return MediaQuery.of(context).size.width > 800; 26 | } 27 | 28 | @override 29 | Widget build(BuildContext context) { 30 | return LayoutBuilder(builder: (context, constraints) { 31 | if (constraints.maxWidth > 800) { 32 | return largeScreen; 33 | } else if (constraints.maxWidth > 800 && constraints.maxWidth < 1200) { 34 | return mediumScreen; 35 | } else { 36 | return smallScreen; 37 | } 38 | }); 39 | } 40 | 41 | 42 | static getAspectRation(context){ 43 | return MediaQuery.of(context).size.width/MediaQuery.of(context).size.height; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /lib/widgets/LargeHomePage.dart: -------------------------------------------------------------------------------- 1 | import 'package:ShoppingCart/pages/drawer_menu.dart'; 2 | import 'package:ShoppingCart/pages/header.dart'; 3 | import 'package:ShoppingCart/pages/home_slider.dart'; 4 | import 'package:ShoppingCart/utils/CustomColors.dart'; 5 | import 'package:ShoppingCart/utils/CustomTextStyle.dart'; 6 | import 'package:ShoppingCart/utils/MenuItem.dart'; 7 | import 'package:ShoppingCart/utils/ResponsiveLayout.dart'; 8 | import 'package:flutter_web/material.dart'; 9 | 10 | import 'package:ShoppingCart/pages/footer.dart'; 11 | 12 | import '../login.dart'; 13 | 14 | class LargeHomePage extends StatefulWidget { 15 | @override 16 | _LargeHomePageState createState() => _LargeHomePageState(); 17 | } 18 | 19 | class _LargeHomePageState extends State { 20 | GlobalKey keyScaffold = GlobalKey(); 21 | 22 | LargeHomePage() {} 23 | 24 | @override 25 | void initState() { 26 | super.initState(); 27 | } 28 | 29 | @override 30 | Widget build(BuildContext context) { 31 | return createScaffold(context); 32 | } 33 | 34 | createScaffold(context) { 35 | return Scaffold( 36 | key: keyScaffold, 37 | endDrawer: ResponsiveLayout.isSmallScreen(context) 38 | ? DrawerMenu(MenuItem.MENU_HOME) 39 | : null, 40 | body: Builder(builder: (context) { 41 | return ListView( 42 | children: [ 43 | Stack( 44 | children: [ 45 | HomeSlider(context), 46 | Header(context, MenuItem.MENU_HOME), 47 | ], 48 | ), 49 | gridProductSection(context), 50 | Footer() 51 | ], 52 | ); 53 | }), 54 | ); 55 | } 56 | 57 | gridProductSection(BuildContext context) { 58 | return Container( 59 | margin: EdgeInsets.only(top: 16), 60 | child: Column( 61 | children: [ 62 | Text( 63 | "shopping everyday", 64 | style: CustomTextStyle.boldTextStyle 65 | .copyWith(color: Colors.black, fontSize: 34), 66 | ), 67 | Container( 68 | height: 2, 69 | width: 100, 70 | color: Colors.black, 71 | margin: EdgeInsets.only(top: 8), 72 | ), 73 | SizedBox( 74 | height: 16, 75 | ), 76 | Row( 77 | children: [ 78 | Spacer( 79 | flex: 10, 80 | ), 81 | Expanded( 82 | child: GridView.builder( 83 | gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( 84 | crossAxisCount: getGridCount(context), 85 | childAspectRatio: 1.3), 86 | itemBuilder: (context, position) { 87 | return gridProductItem(); 88 | }, 89 | itemCount: 8, 90 | shrinkWrap: true, 91 | primary: false, 92 | ), 93 | flex: 80, 94 | ), 95 | Spacer( 96 | flex: 10, 97 | ), 98 | ], 99 | ), 100 | ], 101 | ), 102 | ); 103 | } 104 | 105 | getGridCount(context) { 106 | if (ResponsiveLayout.isSmallScreen(context)) { 107 | return 1; 108 | } else if (ResponsiveLayout.isMediumScreen(context)) { 109 | return 2; 110 | } else { 111 | return 3; 112 | } 113 | } 114 | 115 | gridProductItem() { 116 | return Container( 117 | margin: EdgeInsets.all(4), 118 | child: Column( 119 | children: [ 120 | Stack( 121 | children: [ 122 | Image( 123 | image: AssetImage("banner1.jpg"), 124 | ), 125 | Align( 126 | alignment: Alignment.topRight, 127 | child: Container( 128 | color: Colors.black, 129 | margin: EdgeInsets.only(top: 8), 130 | padding: EdgeInsets.symmetric(vertical: 4, horizontal: 8), 131 | child: Text( 132 | "Sale", 133 | style: CustomTextStyle.regularTextStyle 134 | .copyWith(color: Colors.white), 135 | ), 136 | ), 137 | ), 138 | ], 139 | ), 140 | SizedBox( 141 | height: 10, 142 | ), 143 | Row( 144 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 145 | crossAxisAlignment: CrossAxisAlignment.start, 146 | children: [ 147 | Container( 148 | child: Text( 149 | "Brown ballerians", 150 | style: CustomTextStyle.boldTextStyle, 151 | ), 152 | margin: EdgeInsets.only(left: 8), 153 | ), 154 | Container( 155 | child: Text("\$ 52", style: CustomTextStyle.regularTextStyle), 156 | margin: EdgeInsets.only(right: 8), 157 | ), 158 | ], 159 | ), 160 | Container( 161 | alignment: Alignment.topLeft, 162 | child: Text( 163 | "Join Life", 164 | style: CustomTextStyle.regularTextStyle 165 | .copyWith(color: Colors.grey, fontSize: 14), 166 | ), 167 | margin: EdgeInsets.only(left: 8), 168 | ), 169 | ], 170 | ), 171 | ); 172 | } 173 | } 174 | -------------------------------------------------------------------------------- /lib/widgets/MobileHomePage.dart: -------------------------------------------------------------------------------- 1 | import 'package:ShoppingCart/utils/CustomColors.dart'; 2 | import 'package:ShoppingCart/utils/CustomTextStyle.dart'; 3 | import 'package:flutter_web/material.dart'; 4 | 5 | class MobileHomePage extends StatelessWidget { 6 | GlobalKey _keyScaffoldState = GlobalKey(); 7 | 8 | @override 9 | Widget build(BuildContext context) { 10 | return MaterialApp( 11 | debugShowCheckedModeBanner: false, 12 | home: Scaffold( 13 | key: _keyScaffoldState, 14 | appBar: AppBar( 15 | elevation: 0, 16 | leading: Container( 17 | height: 20, 18 | width: 20, 19 | margin: EdgeInsets.all(8), 20 | decoration: BoxDecoration( 21 | image: DecorationImage( 22 | image: AssetImage("ic_logo.png"), 23 | )), 24 | ), 25 | actions: [ 26 | IconButton( 27 | icon: Icon(Icons.menu), 28 | onPressed: () { 29 | _keyScaffoldState.currentState.openEndDrawer(); 30 | }) 31 | ], 32 | backgroundColor: CustomColors.THEME_COLOR, 33 | ), 34 | endDrawer: Drawer( 35 | child: Column( 36 | crossAxisAlignment: CrossAxisAlignment.start, 37 | children: [ 38 | Container( 39 | padding: EdgeInsets.fromLTRB(0, 24, 0, 24), 40 | color: CustomColors.THEME_COLOR, 41 | child: Column( 42 | children: [ 43 | Container( 44 | height: 40, 45 | decoration: BoxDecoration( 46 | color: CustomColors.THEME_COLOR, 47 | image: DecorationImage(image: AssetImage("ic_logo.png"))), 48 | ), 49 | SizedBox(height: 16,), 50 | Text("Grocery Fact",style: CustomTextStyle.boldTextStyle.copyWith(color: Colors.white,fontSize: 20),) 51 | ], 52 | ), 53 | ), 54 | SizedBox(height: 16,), 55 | InkWell( 56 | child: Container( 57 | padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12), 58 | child: Text( 59 | "Home", 60 | style: CustomTextStyle.boldTextStyle, 61 | ), 62 | ), 63 | ), 64 | SizedBox( 65 | height: 8, 66 | ), 67 | InkWell( 68 | child: Container( 69 | padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12), 70 | child: Text( 71 | "Search", 72 | style: CustomTextStyle.boldTextStyle, 73 | ), 74 | ), 75 | ), 76 | SizedBox( 77 | height: 8, 78 | ), 79 | InkWell( 80 | child: Container( 81 | padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12), 82 | child: Text( 83 | "Cart", 84 | style: CustomTextStyle.boldTextStyle, 85 | ), 86 | ), 87 | ), 88 | SizedBox( 89 | height: 8, 90 | ), 91 | InkWell( 92 | child: Container( 93 | padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12), 94 | child: Text( 95 | "About", 96 | style: CustomTextStyle.boldTextStyle, 97 | ), 98 | ), 99 | ), 100 | SizedBox( 101 | height: 8, 102 | ), 103 | InkWell( 104 | child: Container( 105 | padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12), 106 | child: Text( 107 | "Login / SignUp", 108 | style: CustomTextStyle.boldTextStyle, 109 | ), 110 | ), 111 | ), 112 | ], 113 | ), 114 | ), 115 | body: SingleChildScrollView( 116 | child: Container( 117 | child: Column( 118 | children: [ 119 | ConstrainedBox( 120 | constraints: BoxConstraints(maxHeight: 200), 121 | child: PageView.builder( 122 | itemBuilder: (context, position) { 123 | return createSlider(); 124 | }, 125 | itemCount: 4, 126 | ), 127 | ) 128 | ], 129 | ), 130 | ), 131 | ), 132 | ), 133 | ); 134 | } 135 | 136 | createSlider() { 137 | return Container( 138 | margin: EdgeInsets.symmetric(horizontal: 2, vertical: 2), 139 | child: Image( 140 | image: AssetImage("banner1.jpg"), 141 | fit: BoxFit.cover, 142 | ), 143 | ); 144 | } 145 | } 146 | -------------------------------------------------------------------------------- /pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: ShoppingCart 2 | description: An app built using Flutter for web 3 | 4 | environment: 5 | # You must be using Flutter >=1.5.0 or Dart >=2.3.0 6 | sdk: '>=2.3.0 <3.0.0' 7 | 8 | dependencies: 9 | flutter_web: any 10 | flutter_web_ui: any 11 | 12 | dev_dependencies: 13 | build_runner: ^1.6.2 14 | build_web_compilers: ^2.1.4 15 | pedantic: ^1.7.0 16 | build_daemon: ^2.0.0 17 | 18 | dependency_overrides: 19 | flutter_web: 20 | git: 21 | url: https://github.com/flutter/flutter_web 22 | path: packages/flutter_web 23 | flutter_web_ui: 24 | git: 25 | url: https://github.com/flutter/flutter_web 26 | path: packages/flutter_web_ui 27 | -------------------------------------------------------------------------------- /screenshot/mobile/about_us.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/screenshot/mobile/about_us.png -------------------------------------------------------------------------------- /screenshot/mobile/cart_mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/screenshot/mobile/cart_mobile.png -------------------------------------------------------------------------------- /screenshot/mobile/contact_us.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/screenshot/mobile/contact_us.png -------------------------------------------------------------------------------- /screenshot/mobile/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/screenshot/mobile/profile.png -------------------------------------------------------------------------------- /screenshot/web/1.main_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/screenshot/web/1.main_page.png -------------------------------------------------------------------------------- /screenshot/web/2.cart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/screenshot/web/2.cart.png -------------------------------------------------------------------------------- /screenshot/web/3.about_us.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/screenshot/web/3.about_us.png -------------------------------------------------------------------------------- /screenshot/web/4.contact_us.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/screenshot/web/4.contact_us.png -------------------------------------------------------------------------------- /screenshot/web/5.profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/screenshot/web/5.profile.png -------------------------------------------------------------------------------- /screenshot/web/6.login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/screenshot/web/6.login.png -------------------------------------------------------------------------------- /screenshot/web/7.registration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/screenshot/web/7.registration.png -------------------------------------------------------------------------------- /web/assets/FontManifest.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "family": "MaterialIcons", 4 | "fonts": [ 5 | { 6 | "asset": "https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2" 7 | } 8 | ] 9 | }, 10 | { 11 | "family": "HelveticaNeue", 12 | "fonts": [ 13 | { 14 | "asset": "fonts/HelveticaNeue/HelveticaNeueLt.ttf" 15 | } 16 | ] 17 | }, 18 | { 19 | "family": "HelveticaNeueRegular", 20 | "fonts": [ 21 | { 22 | "asset": "fonts/HelveticaNeue/HelveticaNeue-Regular.ttf" 23 | } 24 | ] 25 | }, 26 | { 27 | "family": "HelveticaNeueMedium", 28 | "fonts": [ 29 | { 30 | "asset": "fonts/HelveticaNeue/HelveticaNeueMed.ttf" 31 | } 32 | ] 33 | }, 34 | { 35 | "family": "HelveticaNeueBold", 36 | "fonts": [ 37 | { 38 | "asset": "fonts/HelveticaNeue/HelveticaNeue-Bold.ttf" 39 | } 40 | ] 41 | }, 42 | { 43 | "family": "Arvo", 44 | "fonts": [ 45 | { 46 | "asset": "fonts/Arvo/Arvo-Regular.ttf" 47 | }, 48 | { 49 | "asset": "fonts/Arvo/Arvo-Bold.ttf" 50 | } 51 | ] 52 | }, 53 | { 54 | "family": "GoogleSans", 55 | "fonts": [ 56 | { 57 | "asset": "fonts/GoogleSans-Regular.ttf" 58 | } 59 | ] 60 | }, 61 | { 62 | "family": "GalleryIcons", 63 | "fonts": [ 64 | { 65 | "asset": "fonts/GalleryIcons.ttf" 66 | } 67 | ] 68 | }, 69 | { 70 | "family": "AbrilFatface", 71 | "fonts": [ 72 | { 73 | "asset": "fonts/AbrilFatface-Regular.ttf" 74 | } 75 | ] 76 | }, 77 | { 78 | "family": "LibreFranklin", 79 | "fonts": [ 80 | { 81 | "asset": "fonts/LibreFranklin-Regular.ttf" 82 | } 83 | ] 84 | }, 85 | { 86 | "family": "Merriweather", 87 | "fonts": [ 88 | { 89 | "asset": "fonts/Merriweather-Regular.ttf" 90 | } 91 | ] 92 | }, 93 | { 94 | "family": "Raleway", 95 | "fonts": [ 96 | { 97 | "asset": "fonts/Raleway-Regular.ttf" 98 | } 99 | ] 100 | } 101 | ] 102 | -------------------------------------------------------------------------------- /web/assets/Montserrat-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/Montserrat-Bold.ttf -------------------------------------------------------------------------------- /web/assets/Montserrat-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/Montserrat-Regular.ttf -------------------------------------------------------------------------------- /web/assets/about_section_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/about_section_1.jpg -------------------------------------------------------------------------------- /web/assets/about_section_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/about_section_2.jpg -------------------------------------------------------------------------------- /web/assets/about_section_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/about_section_3.jpg -------------------------------------------------------------------------------- /web/assets/about_us_slider.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/about_us_slider.jpg -------------------------------------------------------------------------------- /web/assets/banner/banner1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/banner/banner1.jpg -------------------------------------------------------------------------------- /web/assets/banner/banner2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/banner/banner2.jpg -------------------------------------------------------------------------------- /web/assets/banner/banner3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/banner/banner3.jpg -------------------------------------------------------------------------------- /web/assets/banner/ic_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/banner/ic_logo.png -------------------------------------------------------------------------------- /web/assets/banner1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/banner1.jpg -------------------------------------------------------------------------------- /web/assets/cart_slider.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/cart_slider.jpg -------------------------------------------------------------------------------- /web/assets/contact_us_slider.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/contact_us_slider.jpg -------------------------------------------------------------------------------- /web/assets/fonts/AbrilFatface-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/fonts/AbrilFatface-Regular.ttf -------------------------------------------------------------------------------- /web/assets/fonts/Arvo/Arvo-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/fonts/Arvo/Arvo-Bold.ttf -------------------------------------------------------------------------------- /web/assets/fonts/Arvo/Arvo-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/fonts/Arvo/Arvo-BoldItalic.ttf -------------------------------------------------------------------------------- /web/assets/fonts/Arvo/Arvo-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/fonts/Arvo/Arvo-Italic.ttf -------------------------------------------------------------------------------- /web/assets/fonts/Arvo/Arvo-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/fonts/Arvo/Arvo-Regular.ttf -------------------------------------------------------------------------------- /web/assets/fonts/GalleryIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/fonts/GalleryIcons.ttf -------------------------------------------------------------------------------- /web/assets/fonts/GoogleSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/fonts/GoogleSans-Regular.ttf -------------------------------------------------------------------------------- /web/assets/fonts/HelveticaNeue/Helvetica Neu Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/fonts/HelveticaNeue/Helvetica Neu Bold.ttf -------------------------------------------------------------------------------- /web/assets/fonts/HelveticaNeue/HelveticaNeue BlackCond.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/fonts/HelveticaNeue/HelveticaNeue BlackCond.ttf -------------------------------------------------------------------------------- /web/assets/fonts/HelveticaNeue/HelveticaNeue Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/fonts/HelveticaNeue/HelveticaNeue Light.ttf -------------------------------------------------------------------------------- /web/assets/fonts/HelveticaNeue/HelveticaNeue Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/fonts/HelveticaNeue/HelveticaNeue Medium.ttf -------------------------------------------------------------------------------- /web/assets/fonts/HelveticaNeue/HelveticaNeue Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/fonts/HelveticaNeue/HelveticaNeue Thin.ttf -------------------------------------------------------------------------------- /web/assets/fonts/HelveticaNeue/HelveticaNeue-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/fonts/HelveticaNeue/HelveticaNeue-Bold.ttf -------------------------------------------------------------------------------- /web/assets/fonts/HelveticaNeue/HelveticaNeue-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/fonts/HelveticaNeue/HelveticaNeue-Regular.ttf -------------------------------------------------------------------------------- /web/assets/fonts/HelveticaNeue/HelveticaNeueHv.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/fonts/HelveticaNeue/HelveticaNeueHv.ttf -------------------------------------------------------------------------------- /web/assets/fonts/HelveticaNeue/HelveticaNeueIt.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/fonts/HelveticaNeue/HelveticaNeueIt.ttf -------------------------------------------------------------------------------- /web/assets/fonts/HelveticaNeue/HelveticaNeueLt.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/fonts/HelveticaNeue/HelveticaNeueLt.ttf -------------------------------------------------------------------------------- /web/assets/fonts/HelveticaNeue/HelveticaNeueMed.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/fonts/HelveticaNeue/HelveticaNeueMed.ttf -------------------------------------------------------------------------------- /web/assets/fonts/HelveticaNeue/helveticaneue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/fonts/HelveticaNeue/helveticaneue.png -------------------------------------------------------------------------------- /web/assets/fonts/HelveticaNeue/www.freefontsdownload.net.url: -------------------------------------------------------------------------------- 1 | [InternetShortcut] 2 | URL=HOMESITEfree-helveticaneue-font-74318.htm -------------------------------------------------------------------------------- /web/assets/fonts/LibreFranklin-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/fonts/LibreFranklin-Regular.ttf -------------------------------------------------------------------------------- /web/assets/fonts/Merriweather-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/fonts/Merriweather-Regular.ttf -------------------------------------------------------------------------------- /web/assets/fonts/Raleway-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/fonts/Raleway-Regular.ttf -------------------------------------------------------------------------------- /web/assets/hiraminpro-w3.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/hiraminpro-w3.otf -------------------------------------------------------------------------------- /web/assets/ic_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/ic_logo.png -------------------------------------------------------------------------------- /web/assets/payment/footer_payment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/payment/footer_payment.png -------------------------------------------------------------------------------- /web/assets/payment/ic_payment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/payment/ic_payment.png -------------------------------------------------------------------------------- /web/assets/payment/ic_visa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/payment/ic_visa.png -------------------------------------------------------------------------------- /web/assets/profile_slider.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sky-flutter/Flutter-Web-Shopping-Cart/97f2f0140f4e6cdba75a6a06e155b34be0baa8f4/web/assets/profile_slider.jpg -------------------------------------------------------------------------------- /web/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /web/main.dart: -------------------------------------------------------------------------------- 1 | // Copyright 2019 The Chromium Authors. All rights reserved. 2 | // Use of this source code is governed by a BSD-style license that can be 3 | // found in the LICENSE file. 4 | import 'package:flutter_web_ui/ui.dart' as ui; 5 | import 'package:ShoppingCart/main.dart' as app; 6 | 7 | main() async { 8 | await ui.webOnlyInitializePlatform(); 9 | app.main(); 10 | } 11 | --------------------------------------------------------------------------------