Skip to content

Commit

Permalink
feat (ui): new look for most components like challenges and action sh…
Browse files Browse the repository at this point in the history 
…eets
  • Loading branch information
@Turtlepaw
Turtlepaw committed Nov 23, 2024
1 parent 3ab480e commit 0092a56
Show file tree
Hide file tree
Showing 3 changed files with 162 additions and 150 deletions.
138 changes: 76 additions & 62 deletions lib/components/challenge.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,6 @@ class _ChallengeState extends State<Challenge> {
// });
}


@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
Expand All @@ -86,75 +85,89 @@ class _ChallengeState extends State<Challenge> {
builder: (context, constraints) {
double width;
if (constraints.maxWidth < 400) {
width =
constraints.maxWidth - 30; // Fill the width on phones with margin
width = constraints.maxWidth - 30; // Fill the width on phones with margin
} else {
width = 300; // Limit to ~300 on larger devices
}

return Card.outlined(
clipBehavior: Clip.hardEdge,
margin: const EdgeInsets.symmetric(horizontal: 15),
child: InkWell(
splashColor: theme.colorScheme.primary.withAlpha(30),
onTap: () {
openDialog(context);
},
child: SizedBox(
width: width,
child: Padding(
padding:
const EdgeInsets.symmetric(vertical: 15, horizontal: 25),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
if (_challenge.getBoolValue("ended"))
Row(
children: [
Text("Challenge has ended",
style: theme.textTheme.labelLarge)
],
),
if (_challenge.getBoolValue("ended"))
const SizedBox(height: 8),
Row(
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: Container(
// Border container
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
border: Border.all(
color: theme.colorScheme.surfaceContainerHigh,
width: 1.1,
style: BorderStyle.solid,
),
),
child: Material(
color: theme.colorScheme.surfaceContainerLow, // Background color
borderRadius: BorderRadius.circular(15),
clipBehavior: Clip.antiAlias, // Ensures clipping for ripple
child: InkWell(
splashColor: theme.colorScheme.primary.withAlpha(30),
onTap: () {
openDialog(context);
},
child: SizedBox(
width: width,
child: Padding(
padding:
const EdgeInsets.symmetric(vertical: 15, horizontal: 25),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Icon(challenges
.elementAt(_challenge.getIntValue("type"))
.icon),
const SizedBox(width: 10),
Text(
_challenge.getStringValue("name"),
style: theme.textTheme.titleLarge,
if (_challenge.getBoolValue("ended"))
Row(
children: [
Text("Challenge has ended",
style: theme.textTheme.labelLarge)
],
),
if (_challenge.getBoolValue("ended"))
const SizedBox(height: 8),
Row(
children: [
Icon(challenges
.elementAt(_challenge.getIntValue("type"))
.icon),
const SizedBox(width: 10),
Text(
_challenge.getStringValue("name"),
style: theme.textTheme.titleLarge,
),
],
),
const SizedBox(
height: 15,
),
OverlapStack(
align: OverlapStackAlign.start,
minSpacing: 1,
maxSpacing: 2.3,
itemSize: const Size(20, 40),
itemLimit: 5,
children: _challenge.expand["users"]!.map((user) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 3),
child: AdvancedAvatar(
name: user.getStringValue("username"),
style: theme.textTheme.titleMedium?.copyWith(
color: theme.colorScheme.onPrimary),
decoration: BoxDecoration(
color: theme.colorScheme.primary,
borderRadius: BorderRadius.circular(50),
),
),
);
}).toList(),
),
],
),
const SizedBox(
height: 15,
),
OverlapStack(
align: OverlapStackAlign.start,
minSpacing: 1,
maxSpacing: 2.3,
itemSize: const Size(20, 40),
itemLimit: 5,
children: _challenge.expand["users"]!.map((user) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 3),
child: AdvancedAvatar(
name: user.getStringValue("username"),
style: theme.textTheme.titleMedium
?.copyWith(color: theme.colorScheme.onPrimary),
decoration: BoxDecoration(
color: theme.colorScheme.primary,
borderRadius: BorderRadius.circular(50),
),
),
);
}).toList(),
),
],
),
),
),
),
Expand All @@ -163,4 +176,5 @@ class _ChallengeState extends State<Challenge> {
},
);
}

}
65 changes: 37 additions & 28 deletions lib/components/privacy.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,39 +98,48 @@ class _PrivacyControlsState extends State<PrivacyControls> {
});
}

Widget buildPrivacyControl(String name, String description, IconData icon,
bool value, void Function(bool) onPressed, ThemeData theme) {
Widget buildPrivacyControl(
String name,
String description,
IconData icon,
bool value,
void Function(bool) onPressed,
ThemeData theme,
) {
return SizedBox(
width: 410,
child: Container(
margin: const EdgeInsets.symmetric(vertical: 5),
decoration: BoxDecoration(
color: theme.colorScheme.surfaceContainer,
borderRadius: BorderRadius.circular(15),
border: Border.all(
color: theme.colorScheme.surfaceContainerHighest,
width: 1.1,
style: BorderStyle.solid,
strokeAlign: BorderSide.strokeAlignCenter,
)),
//elevation: 0,
//color: Theme.of(context).colorScheme.surfaceContainer,
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
border: Border.all(
color: theme.colorScheme.surfaceContainerHighest,
width: 1.1,
style: BorderStyle.solid,
),
),
child: Material(
color: theme.colorScheme.surfaceContainer, // Background color
borderRadius: BorderRadius.circular(15),
clipBehavior: Clip.antiAlias, // Clip the ripple
child: ListTile(
contentPadding:
const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
leading: Icon(icon),
title: Text(name),
subtitle: Text(description),
onTap: () {
onPressed(!value);
}, // Remove ! from !value
trailing: Switch(
value: value,
onChanged: (value) {
onPressed(value);
},
))),
contentPadding:
const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
leading: Icon(icon),
title: Text(name),
subtitle: Text(description),
onTap: () {
onPressed(!value);
},
trailing: Switch(
value: value,
onChanged: (value) {
onPressed(value);
},
),
),
),
),
);
}
}
109 changes: 49 additions & 60 deletions lib/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -660,66 +660,9 @@ class _HomePageState extends State<HomePage> {
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Column(
children: [
Card.filled(
clipBehavior: Clip.hardEdge,
child: InkWell(
onTap: () {
_showCreateModal(context);
},
child: Container(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 10),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 5, horizontal: 10),
child: Row(
children: [
const Icon(
Symbols.draw_rounded,
size: 30,
),
Padding(
padding: const EdgeInsets.only(left: 15),
child: Text(
"Create a challenge",
style: theme.textTheme.titleLarge,
),
)
],
),
)),
)),
Card.filled(
clipBehavior: Clip.hardEdge,
child: InkWell(
onTap: () {
_showJoinModal(context);
},
child: Container(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 10),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 5, horizontal: 10),
child: Row(
children: [
const Icon(
Symbols.group_add_rounded,
size: 30,
),
Padding(
padding: const EdgeInsets.only(left: 15),
child: Text(
"Join a challenge",
style: theme.textTheme.titleLarge,
),
)
],
),
)),
),
),
const SizedBox(height: 20),
buildSheetAction(Symbols.draw_rounded, "Create a challenge", theme),
buildSheetAction(Symbols.group_add_rounded, "Join a challenge", theme),
const SizedBox(height: 10),
TextButton(
onPressed: () async {
await challengeProvider.reloadChallenges(context);
Expand All @@ -744,4 +687,50 @@ class _HomePageState extends State<HomePage> {
))
]);
}

Widget buildSheetAction(IconData icon, String title, ThemeData theme) {
final mediaQuery = MediaQuery.of(context);

return Container(
margin: const EdgeInsets.symmetric(vertical: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
border: Border.all(
color: theme.colorScheme.surfaceContainerHighest,
width: 1.1,
style: BorderStyle.solid,
),
),
child: Material(
color: theme.colorScheme.surfaceContainerHigh, // Background color
borderRadius: BorderRadius.circular(15), // Match border radius
clipBehavior: Clip.antiAlias, // Ensure ripple is clipped
child: InkWell(
onTap: () {
_showJoinModal(context);
},
child: SizedBox(
width: mediaQuery.size.width - 10,
height: 60,
child: Row(
children: [
const SizedBox(width: 30),
Icon(
icon,
size: 30,
),
Padding(
padding: const EdgeInsets.only(left: 15),
child: Text(
title,
style: theme.textTheme.titleLarge,
),
),
],
),
),
),
),
);
}
}

0 comments on commit 0092a56

Please sign in to comment.