internal/flutter_availability
5
0
Fork 0
mirror of https://github.com/Iconica-Development/flutter_availability.git synced 2025-05-20 05:33:44 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: use streambuilders and remove asyncsnapshots from widget parameters

Browse source
This commit is contained in:
Freek van de Ven 2024-07-16 15:29:52 +02:00
parent 70f8ac1db0
commit 9edfbef542
6 changed files with 331 additions and 276 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
packages/flutter_availability/lib/src/ui/screens/availability_overview.dart
View file

@ -51,18 +51,16 @@ class _AvailabilityOverviewState extends State<AvailabilityOverview> {
var availabilitySnapshot = useStream(availabilityStream);
// TODO(Joey): Way too complex of a function
var selectedAvailabilities = _selectedRange != null
? availabilitySnapshot.data
?.where(
(a) =>
!a.availabilityModel.startDate
.isBefore(_selectedRange!.start) &&
!a.availabilityModel.endDate.isAfter(_selectedRange!.end),
)
.toList() ??
<AvailabilityWithTemplate>[]
: <AvailabilityWithTemplate>[];
var selectedAvailabilities = [
if (_selectedRange != null) ...[
...?availabilitySnapshot.data?.where(
(item) => item.availabilityModel.isInRange(
_selectedRange!.start,
_selectedRange!.end,
),
),
],
];
var availabilitiesAreSelected = selectedAvailabilities.isNotEmpty;
@ -85,13 +83,13 @@ class _AvailabilityOverviewState extends State<AvailabilityOverview> {
_selectedRange = range;
});
},
availabilities: availabilitySnapshot,
availabilitiesStream: availabilityStream,
selectedRange: _selectedRange,
);
var templateLegend = TemplateLegend(
onViewTemplates: widget.onViewTemplates,
availabilities: availabilitySnapshot,
availabilitiesStream: availabilityStream,
);
// TODO(Joey): too complex of a definition for the function

108
packages/flutter_availability/lib/src/ui/screens/template_overview.dart
View file

@ -38,9 +38,6 @@ class AvailabilityTemplateOverview extends HookWidget {
var dayTemplateStream = useMemoized(() => service.getDayTemplates());
var weekTemplateStream = useMemoized(() => service.getWeekTemplates());
var dayTemplatesSnapshot = useStream(dayTemplateStream);
var weekTemplatesSnapshot = useStream(weekTemplateStream);
var title = Center(
child: Text(
translations.templateScreenTitle,
@ -54,13 +51,13 @@ class AvailabilityTemplateOverview extends HookWidget {
onEditTemplate: onEditTemplate,
onSelectTemplate: onSelectTemplate,
onAddTemplate: () => onAddTemplate(AvailabilityTemplateType.day),
templatesSnapshot: dayTemplatesSnapshot,
templatesStream: dayTemplateStream,
);
var weekTemplateSection = _TemplateListSection(
sectionTitle: translations.weekTemplates,
createButtonText: translations.createWeekTemplate,
templatesSnapshot: weekTemplatesSnapshot,
templatesStream: weekTemplateStream,
onEditTemplate: onEditTemplate,
onSelectTemplate: onSelectTemplate,
onAddTemplate: () => onAddTemplate(AvailabilityTemplateType.week),
@ -92,7 +89,7 @@ class _TemplateListSection extends StatelessWidget {
const _TemplateListSection({
required this.sectionTitle,
required this.createButtonText,
required this.templatesSnapshot,
required this.templatesStream,
required this.onEditTemplate,
required this.onAddTemplate,
required this.onSelectTemplate,
@ -101,7 +98,7 @@ class _TemplateListSection extends StatelessWidget {
final String sectionTitle;
final String createButtonText;
// transform the stream to a snapshot as low as possible to reduce rebuilds
final AsyncSnapshot<List<AvailabilityTemplateModel>> templatesSnapshot;
final Stream<List<AvailabilityTemplateModel>> templatesStream;
final void Function(AvailabilityTemplateModel template) onEditTemplate;
final VoidCallback onAddTemplate;
final void Function(AvailabilityTemplateModel template)? onSelectTemplate;
@ -143,57 +140,60 @@ class _TemplateListSection extends StatelessWidget {
),
);
return Column(
children: [
Text(sectionTitle, style: textTheme.titleMedium),
const SizedBox(height: 8),
const Divider(height: 1),
// TODO(Joey): Do not make this nullable, in the build make sure to
// have the expected value ready.
for (var template
in templatesSnapshot.data ?? <AvailabilityTemplateModel>[]) ...[
// TODO(Joey): Extract this as a widget
// TODO(Joey): Do not simply use gesture detectors, always think of
// semantics, interaction and other UX
GestureDetector(
onTap: () => onClickTemplate(template),
child: Container(
padding: const EdgeInsets.all(12),
margin: const EdgeInsets.only(top: 8),
decoration: BoxDecoration(
border: Border.all(color: theme.dividerColor, width: 1),
borderRadius: BorderRadius.circular(5),
),
child: Row(
children: [
Container(
decoration: BoxDecoration(
color: Color(template.color),
borderRadius: BorderRadius.circular(5),
return StreamBuilder<List<AvailabilityTemplateModel>>(
stream: templatesStream,
builder: (context, snapshot) => Column(
children: [
Text(sectionTitle, style: textTheme.titleMedium),
const SizedBox(height: 8),
const Divider(height: 1),
// TODO(Joey): Do not make this nullable, in the build make sure to
// have the expected value ready.
for (var template
in snapshot.data ?? <AvailabilityTemplateModel>[]) ...[
// TODO(Joey): Extract this as a widget
// TODO(Joey): Do not simply use gesture detectors, always think of
// semantics, interaction and other UX
GestureDetector(
onTap: () => onClickTemplate(template),
child: Container(
padding: const EdgeInsets.all(12),
margin: const EdgeInsets.only(top: 8),
decoration: BoxDecoration(
border: Border.all(color: theme.dividerColor, width: 1),
borderRadius: BorderRadius.circular(5),
),
child: Row(
children: [
Container(
decoration: BoxDecoration(
color: Color(template.color),
borderRadius: BorderRadius.circular(5),
),
height: 20,
width: 20,
),
height: 20,
width: 20,
),
const SizedBox(width: 8),
Text(template.name, style: textTheme.bodyLarge),
const Spacer(),
// TODO(Joey): Do not simply use gesture detectors, always
// think of semantics, interaction and other UX
GestureDetector(
onTap: () => onEditTemplate(template),
child: const Icon(Icons.edit),
),
],
const SizedBox(width: 8),
Text(template.name, style: textTheme.bodyLarge),
const Spacer(),
// TODO(Joey): Do not simply use gesture detectors, always
// think of semantics, interaction and other UX
GestureDetector(
onTap: () => onEditTemplate(template),
child: const Icon(Icons.edit),
),
],
),
),
),
),
],
if (snapshot.connectionState == ConnectionState.waiting) ...[
Center(child: options.loadingIndicatorBuilder(context)),
],
const SizedBox(height: 8),
templateCreationButton,
],
if (templatesSnapshot.connectionState == ConnectionState.waiting) ...[
Center(child: options.loadingIndicatorBuilder(context)),
],
const SizedBox(height: 8),
templateCreationButton,
],
),
);
}
}

42
packages/flutter_availability/lib/src/ui/widgets/calendar.dart
View file

@ -10,7 +10,7 @@ class CalendarView extends StatelessWidget {
///
const CalendarView({
required this.month,
required this.availabilities,
required this.availabilitiesStream,
required this.onMonthChanged,
required this.onEditDateRange,
required this.selectedRange,
@ -21,7 +21,7 @@ class CalendarView extends StatelessWidget {
final DateTime month;
/// The stream of availabilities with templates for the current month
final AsyncSnapshot<List<AvailabilityWithTemplate>> availabilities;
final Stream<List<AvailabilityWithTemplate>> availabilitiesStream;
///
final void Function(DateTime month) onMonthChanged;
@ -68,11 +68,6 @@ class CalendarView extends StatelessWidget {
var options = availabilityScope.options;
var translations = options.translations;
var mappedCalendarDays = _mapAvailabilitiesToCalendarDays(availabilities);
var existsTemplateDeviations = mappedCalendarDays.any(
(element) => element.templateDeviation,
);
var monthDateSelector = Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
@ -109,7 +104,7 @@ class CalendarView extends StatelessWidget {
var calendarGrid = CalendarGrid(
month: month,
days: mappedCalendarDays,
availabilitiesStream: availabilitiesStream,
onDayTap: _onTapDate,
selectedRange: selectedRange,
);
@ -124,16 +119,37 @@ class CalendarView extends StatelessWidget {
],
);
var templeDeviationSection = StreamBuilder<List<AvailabilityWithTemplate>>(
stream: availabilitiesStream,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return options.loadingIndicatorBuilder(context);
}
var mappedCalendarDays = mapAvailabilitiesToCalendarDays(snapshot);
var existsTemplateDeviations = mappedCalendarDays.any(
(element) => element.templateDeviation,
);
if (existsTemplateDeviations) {
return Column(
children: [
const SizedBox(height: 24),
templateDeviationMarking,
],
);
}
return const SizedBox.shrink();
},
);
return Column(
children: [
monthDateSelector,
const Divider(height: 1),
const SizedBox(height: 20),
calendarGrid,
if (existsTemplateDeviations) ...[
const SizedBox(height: 24),
templateDeviationMarking,
],
templeDeviationSection,
],
);
}
@ -166,7 +182,7 @@ double _calculateTextWidthOfLongestMonth(
/// Maps the availabilities to CalendarDays
/// This is a helper function to make the code more readable
/// It also determines if the template is a deviation from the original
List<CalendarDay> _mapAvailabilitiesToCalendarDays(
List<CalendarDay> mapAvailabilitiesToCalendarDays(
AsyncSnapshot<List<AvailabilityWithTemplate>> availabilitySnapshot,
) =>
availabilitySnapshot.data?.map(

124
packages/flutter_availability/lib/src/ui/widgets/calendar_grid.dart
View file

@ -1,5 +1,7 @@
import "package:flutter/material.dart";
import "package:flutter_availability/flutter_availability.dart";
import "package:flutter_availability/src/service/availability_service.dart";
import "package:flutter_availability/src/ui/widgets/calendar.dart";
import "package:flutter_availability/src/util/scope.dart";
///
@ -7,7 +9,7 @@ class CalendarGrid extends StatelessWidget {
///
const CalendarGrid({
required this.month,
required this.days,
required this.availabilitiesStream,
required this.onDayTap,
required this.selectedRange,
super.key,
@ -16,8 +18,8 @@ class CalendarGrid extends StatelessWidget {
/// The current month to display
final DateTime month;
/// A list of days that need to be displayed differently
final List<CalendarDay> days;
/// The stream of availabilities with templates for the current month
final Stream<List<AvailabilityWithTemplate>> availabilitiesStream;
/// A callback that is called when a day is tapped
final void Function(DateTime) onDayTap;
@ -34,8 +36,6 @@ class CalendarGrid extends StatelessWidget {
var options = availabilityScope.options;
var colors = options.colors;
var translations = options.translations;
var calendarDays =
_generateCalendarDays(month, days, selectedRange, colors, colorScheme);
var dayNames = getDaysOfTheWeekAsAbbreviatedStrings(translations, context);
@ -59,57 +59,71 @@ class CalendarGrid extends StatelessWidget {
children: [
calendarDaysRow,
const SizedBox(height: 10),
GridView.builder(
padding: EdgeInsets.zero,
shrinkWrap: true,
itemCount: calendarDays.length,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 7,
crossAxisSpacing: 12,
mainAxisSpacing: 12,
),
itemBuilder: (context, index) {
// TODO(Joey): Extract all this as a widget
var day = calendarDays[index];
var dayColor = day.color ??
colors.customAvailabilityColor ??
colorScheme.secondary;
var textColor = day.outsideMonth && !day.isSelected
? colors.outsideMonthTextColor ?? colorScheme.onSurface
: _getTextColor(
dayColor,
colors.textLightColor ?? Colors.white,
colors.textDarkColor,
);
var textStyle = textTheme.bodyLarge?.copyWith(color: textColor);
// TODO(Joey): Watch out for using gesture detectors
return GestureDetector(
onTap: () => onDayTap(day.date),
child: DecoratedBox(
decoration: BoxDecoration(
color: dayColor,
borderRadius: BorderRadius.circular(5),
border: Border.all(
color: day.isSelected && !day.outsideMonth
? colorScheme.primary
: Colors.transparent,
),
),
child: Stack(
children: [
Center(
child: Text(day.date.day.toString(), style: textStyle),
),
if (day.templateDeviation) ...[
Positioned(
right: 4,
child: Text("*", style: textStyle),
),
],
],
),
StreamBuilder<List<AvailabilityWithTemplate>>(
stream: null,
builder: (context, snapshot) {
var days = mapAvailabilitiesToCalendarDays(snapshot);
var calendarDays = _generateCalendarDays(
month,
days,
selectedRange,
colors,
colorScheme,
);
return GridView.builder(
padding: EdgeInsets.zero,
shrinkWrap: true,
itemCount: calendarDays.length,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 7,
crossAxisSpacing: 12,
mainAxisSpacing: 12,
),
itemBuilder: (context, index) {
// TODO(Joey): Extract all this as a widget
var day = calendarDays[index];
var dayColor = day.color ??
colors.customAvailabilityColor ??
colorScheme.secondary;
var textColor = day.outsideMonth && !day.isSelected
? colors.outsideMonthTextColor ?? colorScheme.onSurface
: _getTextColor(
dayColor,
colors.textLightColor ?? Colors.white,
colors.textDarkColor,
);
var textStyle = textTheme.bodyLarge?.copyWith(color: textColor);
// TODO(Joey): Watch out for using gesture detectors
return GestureDetector(
onTap: () => onDayTap(day.date),
child: DecoratedBox(
decoration: BoxDecoration(
color: dayColor,
borderRadius: BorderRadius.circular(5),
border: Border.all(
color: day.isSelected && !day.outsideMonth
? colorScheme.primary
: Colors.transparent,
),
),
child: Stack(
children: [
Center(
child:
Text(day.date.day.toString(), style: textStyle),
),
if (day.templateDeviation) ...[
Positioned(
right: 4,
child: Text("*", style: textStyle),
),
],
],
),
),
);
},
);
},
),

287
packages/flutter_availability/lib/src/ui/widgets/template_legend.dart
View file

@ -7,13 +7,13 @@ import "package:flutter_availability/src/util/scope.dart";
class TemplateLegend extends StatefulWidget {
///
const TemplateLegend({
required this.availabilities,
required this.availabilitiesStream,
required this.onViewTemplates,
super.key,
});
/// The stream of availabilities with templates for the current month
final AsyncSnapshot<List<AvailabilityWithTemplate>> availabilities;
final Stream<List<AvailabilityWithTemplate>> availabilitiesStream;
/// Callback for when the user wants to navigate to the overview of templates
final VoidCallback onViewTemplates;
@ -36,24 +36,6 @@ class _TemplateLegendState extends State<TemplateLegend> {
var colors = options.colors;
var translations = options.translations;
var templatesLoading =
widget.availabilities.connectionState == ConnectionState.waiting;
var templatesAvailable =
!templatesLoading && (widget.availabilities.data?.isNotEmpty ?? false);
var templates = widget.availabilities.data?.getUniqueTemplates() ?? [];
var existAvailabilitiesWithoutTemplate = widget.availabilities.data
?.any((element) => element.template == null) ??
false;
void onDrawerHeaderClick() {
if (!templatesAvailable && !_templateDrawerOpen) {
return;
}
setState(() {
_templateDrawerOpen = !_templateDrawerOpen;
});
}
var createNewTemplateButton = GestureDetector(
onTap: () => widget.onViewTemplates(),
child: ColoredBox(
@ -71,130 +53,155 @@ class _TemplateLegendState extends State<TemplateLegend> {
),
),
);
return Column(
children: [
// a button to open/close a drawer with all the templates
GestureDetector(
onTap: onDrawerHeaderClick,
child: ColoredBox(
color: Colors.transparent,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
translations.templateLegendTitle,
style: textTheme.titleMedium,
),
if ((templatesAvailable && !templatesLoading) ||
_templateDrawerOpen) ...[
Icon(
_templateDrawerOpen
? Icons.arrow_drop_up
: Icons.arrow_drop_down,
),
],
],
),
),
),
const SizedBox(height: 4),
AnimatedContainer(
duration: const Duration(milliseconds: 500),
// TODO(freek): Animation should be used so it doesn't instantly close
constraints: BoxConstraints(maxHeight: _templateDrawerOpen ? 150 : 0),
decoration: BoxDecoration(
border: _templateDrawerOpen
? Border.all(color: theme.colorScheme.onSurface, width: 1)
: null,
),
padding: const EdgeInsets.only(right: 2),
child: _templateDrawerOpen && !templatesLoading
// TODO(Joey): A listview inside a scrollview inside the
// scrollable that each page has seems like really strange UX
// TODO(Joey): No ternary operators in the layout
? SingleChildScrollView(
child: Column(
children: [
Container(
constraints: const BoxConstraints(
// TODO(Joey): Not divisible by 4
maxHeight: 150,
),
child: Scrollbar(
controller: _scrollController,
thumbVisibility: true,
trackVisibility: true,
thickness: 2,
child: ListView.builder(
controller: _scrollController,
shrinkWrap: true,
// TODO(Joey): This seems like an odd way to
// implement appending items
itemCount: templates.length + 2,
itemBuilder: (context, index) {
if (index == 0) {
// TODO(Joey): Extract this as a widget
return Column(
children: [
_TemplateLegendItem(
name: translations.templateSelectionLabel,
backgroundColor:
colors.selectedDayColor ??
colorScheme.primaryFixedDim,
borderColor: colorScheme.primary,
),
if (existAvailabilitiesWithoutTemplate) ...[
_TemplateLegendItem(
name: translations
.availabilityWithoutTemplateLabel,
backgroundColor:
colors.customAvailabilityColor ??
colorScheme.secondary,
),
],
],
);
}
if (index == templates.length + 1) {
return Padding(
padding: const EdgeInsets.only(
top: 10,
bottom: 8,
),
child: createNewTemplateButton,
);
}
var template = templates[index - 1];
return _TemplateLegendItem(
name: template.name,
backgroundColor: Color(template.color),
);
},
),
),
return StreamBuilder<List<AvailabilityWithTemplate>>(
stream: widget.availabilitiesStream,
builder: (context, snapshot) {
var templatesLoading =
snapshot.connectionState == ConnectionState.waiting;
var templatesAvailable =
!templatesLoading && (snapshot.data?.isNotEmpty ?? false);
var templates = snapshot.data?.getUniqueTemplates() ?? [];
var existAvailabilitiesWithoutTemplate =
snapshot.data?.any((element) => element.template == null) ?? false;
void onDrawerHeaderClick() {
if (!templatesAvailable && !_templateDrawerOpen) {
return;
}
setState(() {
_templateDrawerOpen = !_templateDrawerOpen;
});
}
return Column(
children: [
// a button to open/close a drawer with all the templates
GestureDetector(
onTap: onDrawerHeaderClick,
child: ColoredBox(
color: Colors.transparent,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
translations.templateLegendTitle,
style: textTheme.titleMedium,
),
if ((templatesAvailable && !templatesLoading) ||
_templateDrawerOpen) ...[
Icon(
_templateDrawerOpen
? Icons.arrow_drop_up
: Icons.arrow_drop_down,
),
],
),
)
: const Divider(
height: 1,
thickness: 1,
],
),
),
// TODO(Joey): This is too complex of a check to read the layout
// There are 8 different combinations parameters with 2 different
// outcomes
if (!templatesAvailable &&
(!_templateDrawerOpen || templatesLoading)) ...[
const SizedBox(height: 12),
if (templatesLoading) ...[
options.loadingIndicatorBuilder(context),
] else ...[
createNewTemplateButton,
),
),
const SizedBox(height: 4),
AnimatedContainer(
duration: const Duration(milliseconds: 500),
// TODO(freek): Animation should be used so it doesn't instantly
// close
constraints:
BoxConstraints(maxHeight: _templateDrawerOpen ? 150 : 0),
decoration: BoxDecoration(
border: _templateDrawerOpen
? Border.all(color: theme.colorScheme.onSurface, width: 1)
: null,
),
padding: const EdgeInsets.only(right: 2),
child: _templateDrawerOpen && !templatesLoading
// TODO(Joey): A listview inside a scrollview inside the
// scrollable that each page has seems like really strange UX
// TODO(Joey): No ternary operators in the layout
? SingleChildScrollView(
child: Column(
children: [
Container(
constraints: const BoxConstraints(
// TODO(Joey): Not divisible by 4
maxHeight: 150,
),
child: Scrollbar(
controller: _scrollController,
thumbVisibility: true,
trackVisibility: true,
thickness: 2,
child: ListView.builder(
controller: _scrollController,
shrinkWrap: true,
// TODO(Joey): This seems like an odd way to
// implement appending items
itemCount: templates.length + 2,
itemBuilder: (context, index) {
if (index == 0) {
// TODO(Joey): Extract this as a widget
return Column(
children: [
_TemplateLegendItem(
name: translations
.templateSelectionLabel,
backgroundColor:
colors.selectedDayColor ??
colorScheme.primaryFixedDim,
borderColor: colorScheme.primary,
),
if (existAvailabilitiesWithoutTemplate) ...[
_TemplateLegendItem(
name: translations
.availabilityWithoutTemplateLabel,
backgroundColor: colors
.customAvailabilityColor ??
colorScheme.secondary,
),
],
],
);
}
if (index == templates.length + 1) {
return Padding(
padding: const EdgeInsets.only(
top: 10,
bottom: 8,
),
child: createNewTemplateButton,
);
}
var template = templates[index - 1];
return _TemplateLegendItem(
name: template.name,
backgroundColor: Color(template.color),
);
},
),
),
),
],
),
)
: const Divider(
height: 1,
thickness: 1,
),
),
// TODO(Joey): This is too complex of a check to read the layout
// There are 8 different combinations parameters with 2 different
// outcomes
if (!templatesAvailable &&
(!_templateDrawerOpen || templatesLoading)) ...[
const SizedBox(height: 12),
if (templatesLoading) ...[
options.loadingIndicatorBuilder(context),
] else ...[
createNewTemplateButton,
],
],
],
],
],
);
},
);
}
}

20
packages/flutter_availability_data_interface/lib/src/models/availability.dart
View file

@ -52,6 +52,26 @@ class AvailabilityModel {
endDate: endDate ?? this.endDate,
breaks: breaks ?? this.breaks,
);
/// returns true if the date of the availability overlaps with the given range
/// This disregards the time of the date
bool isInRange(DateTime start, DateTime end) {
var startDate = DateTime(start.year, start.month, start.day);
var endDate = DateTime(end.year, end.month, end.day);
var availabilityStartDate = DateTime(
this.startDate.year,
this.startDate.month,
this.startDate.day,
);
var availabilityEndDate = DateTime(
this.endDate.year,
this.endDate.month,
this.endDate.day,
);
return startDate.isAtSameMomentAs(availabilityStartDate) ||
(startDate.isBefore(availabilityEndDate) &&
endDate.isAfter(availabilityStartDate));
}
}
/// A model defining the structure of a break within an [AvailabilityModel]