Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added restaurant card implementation #1398

Open
wants to merge 1 commit into
base: ui/redesign
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
232 changes: 232 additions & 0 deletions packages/uni_ui/lib/cards/restaurant_card.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,232 @@
import 'package:flutter/material.dart';
import 'package:phosphor_flutter/phosphor_flutter.dart';
import 'package:uni_ui/cards/generic_card.dart';

class RestaurantCard extends StatelessWidget {
const RestaurantCard({
super.key,
required this.restaurantName,
required this.restaurantType,
required this.menuItems,
required this.isFavorite,
this.onFavoriteToggle,
});

final String restaurantName;
final String restaurantType;
final List<MenuItem> menuItems;
final bool isFavorite;
final VoidCallback? onFavoriteToggle;

@override
Widget build(BuildContext context) {
return GenericCard(
key: key,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
RestaurantCardHeader(
restaurantName: restaurantName,
restaurantType: restaurantType,
isFavorite: isFavorite,
onFavoriteToggle: onFavoriteToggle),
Column(
children: menuItems
.map((menuItem) => RestaurantCardMenuItem(
menuItemName: menuItem.name, menuItemType: menuItem.type))
.toList(),
),
],
));
}
}

class RestaurantCardHeader extends StatefulWidget {
Copy link
Member

@vitormpp vitormpp Dec 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extend StatelessWidget instead. The state should be managed in the uni_app package, and passed as a boolean argument (isFavorite) to the RestaurantCard, along with a void function / VoidCallback (typedef VoidCallback = void Function();) to handle the favorite icon click.
(if a StatefulWidget were to be used, it should be limited to managing only the state of the icon itself)

const RestaurantCardHeader({
super.key,
required this.restaurantName,
required this.restaurantType,
required this.isFavorite,
this.onFavoriteToggle,
});

final String restaurantName;
final String restaurantType;
final bool isFavorite;
final VoidCallback? onFavoriteToggle;

@override
_RestaurantCardHeaderState createState() => _RestaurantCardHeaderState();
}

class _RestaurantCardHeaderState extends State<RestaurantCardHeader> {
late bool isFavorite;

@override
void initState() {
super.initState();
isFavorite = widget.isFavorite;
}

@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.grey.withOpacity(0.5),
width: 1.0,
),
),
),
child: Row(
children: [
Expanded(
flex: 1,
child: RestaurantIcons.getRestaurantIcon(
context, widget.restaurantType)),
Expanded(
flex: 4,
child: Text(
widget.restaurantName,
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
fontWeight: FontWeight.bold,
color: Theme.of(context).primaryColor,
),
overflow: TextOverflow.ellipsis,
),
),
Expanded(
flex: 1,
child: IconButton(
onPressed: () {
setState(() {
isFavorite = !isFavorite;
});
if (widget.onFavoriteToggle != null) {
widget.onFavoriteToggle!();
}
},
icon: isFavorite
? UniIcon(PhosphorIconsFill.heart,
color: Theme.of(context).primaryColor)
: UniIcon(PhosphorIconsRegular.heart,
color: Theme.of(context).primaryColor)),
),
],
),
);
}
}

class RestaurantCardMenuItem extends StatelessWidget {
const RestaurantCardMenuItem(
{super.key, required this.menuItemName, required this.menuItemType});

final String menuItemName;
final String menuItemType;

@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 1,
child: MenuItemIcons.getMenuItemIcon(context, menuItemType)),
Expanded(
flex: 5,
child: Text(
menuItemName,
style: Theme.of(context).textTheme.bodyLarge,
softWrap: true,
),
),
],
),
);
}
}

class RestaurantIcons {
static const cantina = PhosphorIconsDuotone.cookingPot;
static const grill = PhosphorIconsDuotone.cookingPot;
static const restaurant = PhosphorIconsDuotone.chefHat;
static const snackBar = PhosphorIconsDuotone.hamburger;

static UniIcon getRestaurantIcon(
BuildContext context, String restaurantType) {
var iconType;
switch (restaurantType) {
case "cantina":
iconType = cantina;
break;
case "grill":
iconType = grill;
break;
case "restaurant":
iconType = restaurant;
break;
case "snackBar":
iconType = snackBar;
break;
default:
iconType = restaurant;
}
return UniIcon(iconType, color: Theme.of(context).primaryColor);
}
}

class MenuItemIcons {
static const cow = PhosphorIconsDuotone.cow;
static const fish = PhosphorIconsDuotone.fish;
static const vegetarian = PhosphorIconsDuotone.plant;
static const soup = PhosphorIconsDuotone.bowlSteam;

static UniIcon getMenuItemIcon(BuildContext context, String menuItemType) {
var iconType;
switch (menuItemType) {
case "cow":
iconType = cow;
break;
case "fish":
iconType = fish;
break;
case "vegetarian":
iconType = vegetarian;
break;
case "soup":
iconType = soup;
break;
default:
iconType = cow;
}
Copy link
Member

@vitormpp vitormpp Dec 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

According to previous discussions, uni_app should "send" the icons to the RestaurantCard component. Therefore, the icons should be passed as an argument.

return UniIcon(iconType, color: Theme.of(context).primaryColor);
}
}

class UniIcon extends PhosphorIcon {
const UniIcon(
IconData icon, {
super.key,
double size = 24,
Color? color,
String? semanticLabel,
TextDirection? textDirection,
}) : super(
icon,
size: size,
color: color,
semanticLabel: semanticLabel,
textDirection: textDirection,
);
}

class MenuItem {
Copy link
Member

@vitormpp vitormpp Dec 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To avoid introducing models in the uni_ui package, I suggest creating a MenuItem widget in uni_ui instead of defining a MenuItem model (that would take parameters like icon and name) and handle the display logic for each menu item. The RestaurantCard would then receive a list of MenuItem widgets, and uni_app would be responsible for creating and passing this list.
What do you think?

Copy link
Collaborator

@DGoiana DGoiana Dec 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm a bit skeptical and I do not like the idea of having models in the ui, so you got a point there. However, if I understood what you're saying, we'd have to create a model in the ui and follow the following path: create in ui -> instantiate in app -> pass to ui, which is a bit strange.
Either way, or that or passing all the information destructured.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To clarify my point: instead of defining any model in the uni_ui package, we should create a widget that takes attributes like icon and name as parameters. The RestaurantCard would then receive a list of these widgets.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with @vitormpp. MenuItem can be a widget and the restaurant card receives a list of MenuItem widgets

final String name;
final String type;

MenuItem({required this.name, required this.type});
}