Skip to content

Commit

Permalink
big commit, improved phones page ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikezamayias
mikezamayias committed Jan 23, 2022
1 parent 6291b03 commit ff9a853
Show file tree
Hide file tree
Showing 8 changed files with 113 additions and 211 deletions.
3 changes: 3 additions & 0 deletions lib/flutter_ecommerce_website_demo.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ class _FlutterEcommerceWebsiteDemoState
Widget build(BuildContext context) {
return MaterialApp(
theme: theme,
title: 'Flutter Ecommerce Website Demo',
debugShowCheckedModeBanner: false,
home: ResponsiveBuilder(
builder: (BuildContext context, SizingInformation sizingInformation) {
Expand All @@ -49,7 +50,9 @@ class _FlutterEcommerceWebsiteDemoState
? null
: const MobileDrawer(),
appBar: AppBar(
elevation: 6,
backgroundColor: Colors.white,
shadowColor: Colors.orange,
actions: sizingInformation.isDesktop
? desktopNavigationAppBarActions(context)
: mobileNavigationAppBarActions(context),
Expand Down
2 changes: 1 addition & 1 deletion lib/pages/add_phone/view/add_phone_page_view.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ class AddPhonePageView extends StatelessWidget {
? const EdgeInsets.symmetric(horizontal: 90)
: const EdgeInsets.symmetric(horizontal: 30),
child: Form(
key: locator<FormService>().addPhoneFormKey,
key: locator<FormService>().addPhoneFormKey(),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
Expand Down
2 changes: 1 addition & 1 deletion lib/pages/phones/view/phones_page_view.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ class PhonesPageView extends StatelessWidget {
softWrap: true,
overflow: TextOverflow.visible,
),
if (sizingInformation.isDesktop)
if (!(sizingInformation.isMobile))
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
Expand Down
263 changes: 85 additions & 178 deletions lib/pages/phones/view/widgets/phone_specifications_card.dart
View file
Original file line number Diff line number Diff line change
@@ -1,150 +1,54 @@
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_ecommerce_website_demo/providers/sizing_information_provider.dart';
import 'package:flutter_ecommerce_website_demo/services/authentication_service.dart';
import 'package:flutter_ecommerce_website_demo/widgets/busy_button.dart';
import 'package:provider/provider.dart';

import '../../../../services/authentication_service.dart';
import '../../../../widgets/busy_button.dart';
import '../../../../locator.dart';
import '../../../../models/phone/phone_model.dart';
import 'specification_field.dart';

class PhoneSpecificationsCard extends StatelessWidget {
class PhoneSpecificationsCard extends StatefulWidget {
const PhoneSpecificationsCard({
Key? key,
required this.phone,
}) : super(key: key);

final PhoneModel phone;

@override
State<PhoneSpecificationsCard> createState() =>
_PhoneSpecificationsCardState();
}

class _PhoneSpecificationsCardState extends State<PhoneSpecificationsCard> {
bool _isHovered = false;
@override
Widget build(BuildContext context) {
if (context
.watch<SizingInformationProvider>()
.sizingInformation
.isDesktop) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 6),
child: Card(
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: const EdgeInsets.all(21),
child: Column(
children: [
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
flex: 1,
child: CachedNetworkImage(
imageUrl: phone.imageUrl,
errorWidget: (context, url, error) => Icon(
Icons.error,
color: Colors.red.shade700,
),
progressIndicatorBuilder:
(context, url, downloadProgress) {
return CircularProgressIndicator(
value: downloadProgress.progress,
);
},
fit: BoxFit.contain,
),
),
Expanded(
flex: 3,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// model
SpecificationField(
fieldName: 'Model',
fieldValue: phone.model,
),
// soc
SpecificationField(
fieldName: 'Soc',
fieldValue: phone.soc,
),
// ram
SpecificationField(
fieldName: 'Ram',
fieldValue: '${phone.ram} GB',
),
// storage
SpecificationField(
fieldName: 'Storage',
fieldValue: phone.storage,
),
// screen size
SpecificationField(
fieldName: 'Screen size',
fieldValue: '${phone.screenSize} inch',
),
// camera
SpecificationField(
fieldName: 'Camera',
fieldValue: phone.camera,
),
// sar
SpecificationField(
fieldName: 'SAR',
fieldValue: '${phone.sar} W/kg',
),
// price
SpecificationField(
fieldName: 'Price',
fieldValue: '€${phone.price}',
),
// quantity
SpecificationField(
fieldName: 'Stock',
fieldValue: '${phone.stock}',
),
],
),
),
],
),
BuyPhoneBusyButton(phone: phone),
].map(
(item) {
return Padding(
padding: const EdgeInsets.symmetric(
vertical: 9,
),
child: item,
);
},
).toList(),
),
return MouseRegion(
onEnter: (_) => setState(() => _isHovered = true),
onExit: (_) => setState(() => _isHovered = false),
child: Card(
elevation: _isHovered ? 12 : 0,
shadowColor: _isHovered ? Colors.orange : Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(21),
side: BorderSide(
color: _isHovered ? Colors.orangeAccent : Colors.grey,
width: 3,
),
),
);
} else {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 6),
child: Card(
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: const EdgeInsets.all(21),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 21, horizontal: 42),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 12),
child: Center(
child: CachedNetworkImage(
imageUrl: phone.imageUrl,
imageUrl: widget.phone.imageUrl,
errorWidget: (context, url, error) => Icon(
Icons.error,
color: Colors.red.shade700,
Expand All @@ -157,58 +61,61 @@ class PhoneSpecificationsCard extends StatelessWidget {
fit: BoxFit.contain,
),
),
// model
SpecificationField(
fieldName: 'Model',
fieldValue: phone.model,
),
// soc
SpecificationField(
fieldName: 'Soc',
fieldValue: phone.soc,
),
// ram
SpecificationField(
fieldName: 'Ram',
fieldValue: '${phone.ram} GB',
),
// storage
SpecificationField(
fieldName: 'Storage',
fieldValue: phone.storage,
),
// screen size
SpecificationField(
fieldName: 'Screen size',
fieldValue: '${phone.screenSize} inch',
),
// camera
SpecificationField(
fieldName: 'Camera',
fieldValue: phone.camera,
),
// sar
SpecificationField(
fieldName: 'SAR',
fieldValue: '${phone.sar} W/kg',
),
// price
SpecificationField(
fieldName: 'Price',
fieldValue: '€${phone.price}',
),
// quantity
SpecificationField(
fieldName: 'Stock',
fieldValue: '${phone.stock}',
),
BuyPhoneBusyButton(phone: phone),
],
),
),
// model
SpecificationField(
fieldName: 'Model',
fieldValue: widget.phone.model,
),
// soc
SpecificationField(
fieldName: 'Soc',
fieldValue: widget.phone.soc,
),
// ram
SpecificationField(
fieldName: 'Ram',
fieldValue: '${widget.phone.ram} GB',
),
// storage
SpecificationField(
fieldName: 'Storage',
fieldValue: widget.phone.storage,
),
// screen size
SpecificationField(
fieldName: 'Screen size',
fieldValue: '${widget.phone.screenSize} inch',
),
// camera
SpecificationField(
fieldName: 'Camera',
fieldValue: widget.phone.camera,
),
// sar
SpecificationField(
fieldName: 'SAR',
fieldValue: '${widget.phone.sar} W/kg',
),
// price
SpecificationField(
fieldName: 'Price',
fieldValue: '€${widget.phone.price}',
),
// quantity
SpecificationField(
fieldName: 'Stock',
fieldValue: '${widget.phone.stock}',
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 12),
child: BuyPhoneBusyButton(phone: widget.phone),
),
],
),
),
);
}
),
);
}
}

Expand Down
34 changes: 15 additions & 19 deletions lib/pages/phones/view/widgets/specification_field.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,27 +12,23 @@ class SpecificationField extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Flexible(
child: SelectableText.rich(
TextSpan(
children: [
TextSpan(
text: '$fieldName ',
style: const TextStyle(
fontWeight: FontWeight.w900,
color: Colors.orange,
),
return SelectableText.rich(
TextSpan(
children: [
TextSpan(
text: '$fieldName ',
style: const TextStyle(
fontWeight: FontWeight.w900,
color: Colors.orange,
),
TextSpan(
text: fieldValue,
style: const TextStyle(
overflow: TextOverflow.ellipsis,
),
),
],
),
textAlign: TextAlign.left,
),
TextSpan(text: fieldValue),
],
),
style: const TextStyle(
overflow: TextOverflow.ellipsis,
),
textAlign: TextAlign.left,
);
}
}
2 changes: 1 addition & 1 deletion lib/pages/sign_in/view/sign_in_page_view.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ class SignInPageView extends StatelessWidget {
? const EdgeInsets.symmetric(horizontal: 90)
: const EdgeInsets.symmetric(horizontal: 30),
child: Form(
key: locator<FormService>().signInFormKey,
key: locator<FormService>().signInFormKey(),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
Expand Down
Loading

0 comments on commit ff9a853

Please sign in to comment.