From b79894a65210587af20eed4a7f31df4d8ab42db0 Mon Sep 17 00:00:00 2001 From: DGoiana Date: Thu, 8 Aug 2024 00:51:26 +0100 Subject: [PATCH 1/4] initial design --- packages/uni_ui/lib/card_timeline.dart | 37 ++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 packages/uni_ui/lib/card_timeline.dart diff --git a/packages/uni_ui/lib/card_timeline.dart b/packages/uni_ui/lib/card_timeline.dart new file mode 100644 index 000000000..0f4358fad --- /dev/null +++ b/packages/uni_ui/lib/card_timeline.dart @@ -0,0 +1,37 @@ +import 'package:flutter/material.dart'; +import 'package:uni_ui/generic_card.dart'; + +class CardTimeline extends StatelessWidget { + const CardTimeline({super.key}); + + @override + Widget build(BuildContext context) { + return Row(crossAxisAlignment: CrossAxisAlignment.start, children: [ + Column( + children: [Text('10h30'), Text('12h30')], + ), + Column(children: [ + Container( + margin: EdgeInsets.only(bottom: 5, left: 10, right: 10), + width: 20, + height: 20, + decoration: BoxDecoration( + shape: BoxShape.circle, + border: Border.all( + color: + Theme.of(context).primaryColor, // Set the color of the border + width: 4.0, // Set the width of the border + ), + ), + ), + Container( + margin: EdgeInsets.only(bottom: 5, left: 10, right: 10), + height: 50, + width: 3, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(10)), + color: Theme.of(context).primaryColor)) + ]), + ]); + } +} From d5833d5f2e86ded07217a91d9f8dc4b78802f7a7 Mon Sep 17 00:00:00 2001 From: DGoiana Date: Wed, 14 Aug 2024 20:12:01 +0100 Subject: [PATCH 2/4] adding the card component --- packages/uni_ui/lib/card_timeline.dart | 70 ++++++++++++++++++++++++-- 1 file changed, 67 insertions(+), 3 deletions(-) diff --git a/packages/uni_ui/lib/card_timeline.dart b/packages/uni_ui/lib/card_timeline.dart index 0f4358fad..15bec5442 100644 --- a/packages/uni_ui/lib/card_timeline.dart +++ b/packages/uni_ui/lib/card_timeline.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:uni_ui/generic_card.dart'; +import 'package:phosphor_flutter/phosphor_flutter.dart'; class CardTimeline extends StatelessWidget { const CardTimeline({super.key}); @@ -18,9 +19,8 @@ class CardTimeline extends StatelessWidget { decoration: BoxDecoration( shape: BoxShape.circle, border: Border.all( - color: - Theme.of(context).primaryColor, // Set the color of the border - width: 4.0, // Set the width of the border + color: Theme.of(context).primaryColor, + width: 4.0, ), ), ), @@ -32,6 +32,70 @@ class CardTimeline extends StatelessWidget { borderRadius: BorderRadius.all(Radius.circular(10)), color: Theme.of(context).primaryColor)) ]), + Expanded( + child: GenericCard( + key: key, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + children: [ + Text( + 'LCOM', + overflow: TextOverflow.ellipsis, + style: TextStyle( + fontSize: Theme.of(context) + .textTheme + .headlineMedium! + .fontSize, + fontWeight: Theme.of(context) + .textTheme + .headlineMedium! + .fontWeight, + color: Theme.of(context).colorScheme.primary), + ), + const SizedBox(width: 8), //TODO: Create a custom Gap()? + Badge( + label: Text('MT'), + backgroundColor: Colors.greenAccent, + textColor: Theme.of(context).colorScheme.surface, + ), + ], + ), + Text( + 'Laboratório de Computadores', + overflow: TextOverflow.ellipsis, + style: TextStyle( + fontSize: + Theme.of(context).textTheme.titleLarge!.fontSize, + fontWeight: + Theme.of(context).textTheme.titleLarge!.fontWeight, + color: Theme.of(context).colorScheme.primary), + ), + SizedBox(height: 5), + ], + ), + ), + Column( + children: [ + PhosphorIcon( + PhosphorIcons.mapPin(PhosphorIconsStyle.duotone), + color: Theme.of(context).iconTheme.color, + size: 35, + ), + Text('B315', + overflow: TextOverflow.ellipsis, + style: TextStyle( + color: Theme.of(context).colorScheme.primary)), + ], + ) + ], + ), + )) ]); } } From fbb4fbb7e9b5a43e18dc2721e00b0b503ec53942 Mon Sep 17 00:00:00 2001 From: DGoiana Date: Tue, 20 Aug 2024 12:54:32 +0100 Subject: [PATCH 3/4] finalizing some stuff --- packages/uni_ui/lib/card_timeline.dart | 119 +++++++++---------------- packages/uni_ui/pubspec.lock | 8 ++ packages/uni_ui/pubspec.yaml | 1 + 3 files changed, 50 insertions(+), 78 deletions(-) diff --git a/packages/uni_ui/lib/card_timeline.dart b/packages/uni_ui/lib/card_timeline.dart index 15bec5442..c8aa50aa2 100644 --- a/packages/uni_ui/lib/card_timeline.dart +++ b/packages/uni_ui/lib/card_timeline.dart @@ -1,29 +1,55 @@ import 'package:flutter/material.dart'; import 'package:uni_ui/generic_card.dart'; -import 'package:phosphor_flutter/phosphor_flutter.dart'; class CardTimeline extends StatelessWidget { - const CardTimeline({super.key}); + const CardTimeline( + {required this.startTime, + required this.endTime, + required this.card, + this.isActive = false, + super.key}); + + final String startTime; + final String endTime; + final GenericCard card; + final bool isActive; @override Widget build(BuildContext context) { return Row(crossAxisAlignment: CrossAxisAlignment.start, children: [ - Column( - children: [Text('10h30'), Text('12h30')], + Container( + width: 50, + child: Column( + children: [ + Text(startTime, + style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)), + Text(endTime, style: TextStyle(fontSize: 16)) + ], + ), ), Column(children: [ Container( - margin: EdgeInsets.only(bottom: 5, left: 10, right: 10), - width: 20, - height: 20, - decoration: BoxDecoration( - shape: BoxShape.circle, - border: Border.all( - color: Theme.of(context).primaryColor, - width: 4.0, + margin: EdgeInsets.only(bottom: 5, left: 10, right: 10), + width: 25, + height: 25, + decoration: BoxDecoration( + shape: BoxShape.circle, + color: isActive ? Theme.of(context).primaryColor : Colors.white, + border: Border.all( + color: Theme.of(context).primaryColor, + width: 4.0, + ), ), - ), - ), + child: isActive + ? Center( + child: Container( + width: 20, + height: 20, + decoration: BoxDecoration( + shape: BoxShape.circle, + border: Border.all(color: Colors.white, width: 3), + ))) + : null), Container( margin: EdgeInsets.only(bottom: 5, left: 10, right: 10), height: 50, @@ -32,70 +58,7 @@ class CardTimeline extends StatelessWidget { borderRadius: BorderRadius.all(Radius.circular(10)), color: Theme.of(context).primaryColor)) ]), - Expanded( - child: GenericCard( - key: key, - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Expanded( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Row( - children: [ - Text( - 'LCOM', - overflow: TextOverflow.ellipsis, - style: TextStyle( - fontSize: Theme.of(context) - .textTheme - .headlineMedium! - .fontSize, - fontWeight: Theme.of(context) - .textTheme - .headlineMedium! - .fontWeight, - color: Theme.of(context).colorScheme.primary), - ), - const SizedBox(width: 8), //TODO: Create a custom Gap()? - Badge( - label: Text('MT'), - backgroundColor: Colors.greenAccent, - textColor: Theme.of(context).colorScheme.surface, - ), - ], - ), - Text( - 'Laboratório de Computadores', - overflow: TextOverflow.ellipsis, - style: TextStyle( - fontSize: - Theme.of(context).textTheme.titleLarge!.fontSize, - fontWeight: - Theme.of(context).textTheme.titleLarge!.fontWeight, - color: Theme.of(context).colorScheme.primary), - ), - SizedBox(height: 5), - ], - ), - ), - Column( - children: [ - PhosphorIcon( - PhosphorIcons.mapPin(PhosphorIconsStyle.duotone), - color: Theme.of(context).iconTheme.color, - size: 35, - ), - Text('B315', - overflow: TextOverflow.ellipsis, - style: TextStyle( - color: Theme.of(context).colorScheme.primary)), - ], - ) - ], - ), - )) + Expanded(child: card) ]); } } diff --git a/packages/uni_ui/pubspec.lock b/packages/uni_ui/pubspec.lock index 25a63aad9..1f09ca040 100644 --- a/packages/uni_ui/pubspec.lock +++ b/packages/uni_ui/pubspec.lock @@ -363,6 +363,14 @@ packages: url: "https://pub.dev" source: hosted version: "1.9.0" + phosphor_flutter: + dependency: "direct main" + description: + name: phosphor_flutter + sha256: "8a14f238f28a0b54842c5a4dc20676598dd4811fcba284ed828bd5a262c11fde" + url: "https://pub.dev" + source: hosted + version: "2.1.0" pool: dependency: transitive description: diff --git a/packages/uni_ui/pubspec.yaml b/packages/uni_ui/pubspec.yaml index 9f518255d..de26f4e10 100644 --- a/packages/uni_ui/pubspec.yaml +++ b/packages/uni_ui/pubspec.yaml @@ -9,6 +9,7 @@ environment: dependencies: figma_squircle: ^0.5.3 + phosphor_flutter: ^2.1.0 flutter: sdk: flutter From d003877c821bdd705fcedeec0657e73fe48d019d Mon Sep 17 00:00:00 2001 From: DGoiana Date: Sat, 2 Nov 2024 18:45:39 +0000 Subject: [PATCH 4/4] modulating and cleaning --- packages/uni_ui/lib/card_timeline.dart | 25 +++++++++++++++++++------ packages/uni_ui/pubspec.yaml | 1 - 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/packages/uni_ui/lib/card_timeline.dart b/packages/uni_ui/lib/card_timeline.dart index c8aa50aa2..6bb44958e 100644 --- a/packages/uni_ui/lib/card_timeline.dart +++ b/packages/uni_ui/lib/card_timeline.dart @@ -1,8 +1,7 @@ import 'package:flutter/material.dart'; -import 'package:uni_ui/generic_card.dart'; -class CardTimeline extends StatelessWidget { - const CardTimeline( +class TimelineItem extends StatelessWidget { + const TimelineItem( {required this.startTime, required this.endTime, required this.card, @@ -11,7 +10,7 @@ class CardTimeline extends StatelessWidget { final String startTime; final String endTime; - final GenericCard card; + final Widget card; final bool isActive; @override @@ -23,7 +22,8 @@ class CardTimeline extends StatelessWidget { children: [ Text(startTime, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)), - Text(endTime, style: TextStyle(fontSize: 16)) + Text(endTime, + style: TextStyle(fontSize: 14, fontWeight: FontWeight.w600)) ], ), ), @@ -52,7 +52,7 @@ class CardTimeline extends StatelessWidget { : null), Container( margin: EdgeInsets.only(bottom: 5, left: 10, right: 10), - height: 50, + height: 55, width: 3, decoration: BoxDecoration( borderRadius: BorderRadius.all(Radius.circular(10)), @@ -62,3 +62,16 @@ class CardTimeline extends StatelessWidget { ]); } } + +class CardTimeline extends StatelessWidget { + const CardTimeline({required this.items, super.key}); + + final List items; + @override + Widget build(BuildContext context) { + return ListView.builder( + itemCount: items.length, + itemBuilder: (context, index) => items[index], + ); + } +} diff --git a/packages/uni_ui/pubspec.yaml b/packages/uni_ui/pubspec.yaml index becda7615..de26f4e10 100644 --- a/packages/uni_ui/pubspec.yaml +++ b/packages/uni_ui/pubspec.yaml @@ -12,7 +12,6 @@ dependencies: phosphor_flutter: ^2.1.0 flutter: sdk: flutter - phosphor_flutter: ^2.1.0 dev_dependencies: custom_lint: ^0.6.4