Added scrollbar

This commit is contained in:
Juan Gilsanz Polo 2024-01-26 21:38:21 +01:00
parent 91e3ea44f6
commit 74a4f65924

View file

@ -1,3 +1,5 @@
import 'dart:io';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:timezone/timezone.dart' as tz; import 'package:timezone/timezone.dart' as tz;
import 'package:timezone/data/latest.dart' as tz; import 'package:timezone/data/latest.dart' as tz;
@ -20,6 +22,8 @@ class BlockingScheduleModal extends StatefulWidget {
} }
class _BlockingScheduleModalState extends State<BlockingScheduleModal> { class _BlockingScheduleModalState extends State<BlockingScheduleModal> {
final _weekdaysScrollController = ScrollController();
String? _timezone; String? _timezone;
List<String> _weekdays = []; List<String> _weekdays = [];
TimeOfDay? _from; TimeOfDay? _from;
@ -103,192 +107,207 @@ class _BlockingScheduleModalState extends State<BlockingScheduleModal> {
: null; : null;
return Dialog( return Dialog(
child: Padding( child: ConstrainedBox(
padding: const EdgeInsets.all(24), constraints: const BoxConstraints(maxWidth: 500),
child: Column( child: Padding(
mainAxisSize: MainAxisSize.min, padding: const EdgeInsets.all(24),
children: [ child: Column(
Flexible( mainAxisSize: MainAxisSize.min,
child: SingleChildScrollView( children: [
child: Column( Flexible(
mainAxisSize: MainAxisSize.min, child: SingleChildScrollView(
children: [ child: Column(
Icon( mainAxisSize: MainAxisSize.min,
Icons.schedule_rounded, children: [
size: 24, Icon(
color: Theme.of(context).listTileTheme.iconColor Icons.schedule_rounded,
), size: 24,
const SizedBox(height: 16), color: Theme.of(context).listTileTheme.iconColor
Text(
widget.schedule != null
? AppLocalizations.of(context)!.editSchedule
: AppLocalizations.of(context)!.newSchedule,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 24,
), ),
), const SizedBox(height: 16),
const SizedBox(height: 30), Text(
LayoutBuilder( widget.schedule != null
builder: (context, constraints) => DropdownButtonFormField( ? AppLocalizations.of(context)!.editSchedule
items: tz.timeZoneDatabase.locations.keys.map((item) => DropdownMenuItem( : AppLocalizations.of(context)!.newSchedule,
value: item, textAlign: TextAlign.center,
child: SizedBox( style: const TextStyle(
width: constraints.maxWidth-48, fontSize: 24,
child: Text( ),
item, ),
overflow: TextOverflow.ellipsis, const SizedBox(height: 30),
LayoutBuilder(
builder: (context, constraints) => DropdownButtonFormField(
items: tz.timeZoneDatabase.locations.keys.map((item) => DropdownMenuItem(
value: item,
child: SizedBox(
width: constraints.maxWidth-48,
child: Text(
item,
overflow: TextOverflow.ellipsis,
),
),
)).toList(),
value: _timezone,
onChanged: (v) => setState(() => _timezone = v),
decoration: InputDecoration(
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10)
)
),
label: Text(AppLocalizations.of(context)!.timezone)
),
borderRadius: BorderRadius.circular(20),
),
),
const SizedBox(height: 16),
SizedBox(
height: Platform.isMacOS || Platform.isLinux || Platform.isWindows ? 66 : 50,
child: Scrollbar(
controller: _weekdaysScrollController,
thumbVisibility: Platform.isMacOS || Platform.isLinux || Platform.isWindows,
interactive: Platform.isMacOS || Platform.isLinux || Platform.isWindows,
thickness: Platform.isMacOS || Platform.isLinux || Platform.isWindows ? 8 : 0,
child: Padding(
padding: EdgeInsets.only(
bottom: Platform.isMacOS || Platform.isLinux || Platform.isWindows ? 16 : 0
),
child: ListView(
controller: _weekdaysScrollController,
scrollDirection: Axis.horizontal,
children: [
FilterChip(
label: Text(AppLocalizations.of(context)!.monday),
selected: _weekdays.contains("mon"),
onSelected: (value) => onSelectWeekday(value, "mon")
),
const SizedBox(width: 8),
FilterChip(
label: Text(AppLocalizations.of(context)!.tuesday),
selected: _weekdays.contains("tue"),
onSelected: (value) => onSelectWeekday(value, "tue")
),
const SizedBox(width: 8),
FilterChip(
label: Text(AppLocalizations.of(context)!.wednesday),
selected: _weekdays.contains("wed"),
onSelected: (value) => onSelectWeekday(value, "wed")
),
const SizedBox(width: 8),
FilterChip(
label: Text(AppLocalizations.of(context)!.thursday),
selected: _weekdays.contains("thu"),
onSelected: (value) => onSelectWeekday(value, "thu")
),
const SizedBox(width: 8),
FilterChip(
label: Text(AppLocalizations.of(context)!.friday),
selected: _weekdays.contains("fri"),
onSelected: (value) => onSelectWeekday(value, "fri")
),
const SizedBox(width: 8),
FilterChip(
label: Text(AppLocalizations.of(context)!.saturday),
selected: _weekdays.contains("sat"),
onSelected: (value) => onSelectWeekday(value, "sat")
),
const SizedBox(width: 8),
FilterChip(
label: Text(AppLocalizations.of(context)!.sunday),
selected: _weekdays.contains("sun"),
onSelected: (value) => onSelectWeekday(value, "sun")
),
],
), ),
), ),
)).toList(), ),
value: _timezone, ),
onChanged: (v) => setState(() => _timezone = v), const SizedBox(height: 16),
decoration: InputDecoration( Row(
border: const OutlineInputBorder( mainAxisAlignment: MainAxisAlignment.spaceEvenly,
borderRadius: BorderRadius.all( children: [
Radius.circular(10) ElevatedButton(
onPressed: () async {
final selected = await showTimePicker(
context: context,
initialTime: _from ?? const TimeOfDay(hour: 0, minute: 0),
helpText: AppLocalizations.of(context)!.selectStartTime,
confirmText: AppLocalizations.of(context)!.confirm,
);
setState(() => _from = selected);
},
child: Text(
AppLocalizations.of(context)!.from(
_from != null ? "${_from!.hour.toString().padLeft(2, '0')}:${_from!.minute.toString().padLeft(2, '0')}" : "--:--"
)
) )
), ),
label: Text(AppLocalizations.of(context)!.timezone) ElevatedButton(
), onPressed: () async {
borderRadius: BorderRadius.circular(20), final selected = await showTimePicker(
), context: context,
), initialTime: _to ?? const TimeOfDay(hour: 23, minute: 59),
const SizedBox(height: 16), helpText: AppLocalizations.of(context)!.selectEndTime,
SizedBox( confirmText: AppLocalizations.of(context)!.confirm
height: 50, );
child: ListView( setState(() => _to = selected);
scrollDirection: Axis.horizontal, },
children: [ child: Text(
FilterChip( AppLocalizations.of(context)!.to(
label: Text(AppLocalizations.of(context)!.monday), _to != null ? "${_to!.hour.toString().padLeft(2, '0')}:${_to!.minute.toString().padLeft(2, '0')}" : "--:--"
selected: _weekdays.contains("mon"), )
onSelected: (value) => onSelectWeekday(value, "mon") )
),
const SizedBox(width: 8),
FilterChip(
label: Text(AppLocalizations.of(context)!.tuesday),
selected: _weekdays.contains("tue"),
onSelected: (value) => onSelectWeekday(value, "tue")
),
const SizedBox(width: 8),
FilterChip(
label: Text(AppLocalizations.of(context)!.wednesday),
selected: _weekdays.contains("wed"),
onSelected: (value) => onSelectWeekday(value, "wed")
),
const SizedBox(width: 8),
FilterChip(
label: Text(AppLocalizations.of(context)!.thursday),
selected: _weekdays.contains("thu"),
onSelected: (value) => onSelectWeekday(value, "thu")
),
const SizedBox(width: 8),
FilterChip(
label: Text(AppLocalizations.of(context)!.friday),
selected: _weekdays.contains("fri"),
onSelected: (value) => onSelectWeekday(value, "fri")
),
const SizedBox(width: 8),
FilterChip(
label: Text(AppLocalizations.of(context)!.saturday),
selected: _weekdays.contains("sat"),
onSelected: (value) => onSelectWeekday(value, "sat")
),
const SizedBox(width: 8),
FilterChip(
label: Text(AppLocalizations.of(context)!.sunday),
selected: _weekdays.contains("sun"),
onSelected: (value) => onSelectWeekday(value, "sun")
), ),
], ],
), ),
), if (validTimes == false) Padding(
const SizedBox(height: 16), padding: const EdgeInsets.only(top: 16),
Row( child: Card(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, color: const Color.fromARGB(255, 255, 182, 175),
children: [ elevation: 0,
ElevatedButton( child: Padding(
onPressed: () async { padding: const EdgeInsets.all(16),
final selected = await showTimePicker( child: Row(
context: context, children: [
initialTime: _from ?? const TimeOfDay(hour: 0, minute: 0), Icon(
helpText: AppLocalizations.of(context)!.selectStartTime, Icons.error_rounded,
confirmText: AppLocalizations.of(context)!.confirm, color: Theme.of(context).colorScheme.onSurfaceVariant
); ),
setState(() => _from = selected); const SizedBox(width: 16),
}, Expanded(
child: Text( child: Text(
AppLocalizations.of(context)!.from( AppLocalizations.of(context)!.startTimeBeforeEndTime,
_from != null ? "${_from!.hour.toString().padLeft(2, '0')}:${_from!.minute.toString().padLeft(2, '0')}" : "--:--" style: TextStyle(
) color: Theme.of(context).colorScheme.onSurface
) ),
),
ElevatedButton(
onPressed: () async {
final selected = await showTimePicker(
context: context,
initialTime: _to ?? const TimeOfDay(hour: 23, minute: 59),
helpText: AppLocalizations.of(context)!.selectEndTime,
confirmText: AppLocalizations.of(context)!.confirm
);
setState(() => _to = selected);
},
child: Text(
AppLocalizations.of(context)!.to(
_to != null ? "${_to!.hour.toString().padLeft(2, '0')}:${_to!.minute.toString().padLeft(2, '0')}" : "--:--"
)
)
),
],
),
if (validTimes == false) Padding(
padding: const EdgeInsets.only(top: 16),
child: Card(
color: const Color.fromARGB(255, 255, 182, 175),
elevation: 0,
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
Icon(
Icons.error_rounded,
color: Theme.of(context).colorScheme.onSurfaceVariant
),
const SizedBox(width: 16),
Expanded(
child: Text(
AppLocalizations.of(context)!.startTimeBeforeEndTime,
style: TextStyle(
color: Theme.of(context).colorScheme.onSurface
), ),
), ),
), ],
], ),
), ),
), )
) )
) ],
], ),
), ),
), ),
), const SizedBox(height: 24),
const SizedBox(height: 24), Row(
Row( mainAxisAlignment: MainAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end, children: [
children: [ TextButton(
TextButton( onPressed: () => Navigator.pop(context),
onPressed: () => Navigator.pop(context), child: Text(AppLocalizations.of(context)!.close)
child: Text(AppLocalizations.of(context)!.close) ),
), const SizedBox(width: 8),
const SizedBox(width: 8), TextButton(
TextButton( onPressed: valid ? () => onConfirm() : null,
onPressed: valid ? () => onConfirm() : null, child: Text(AppLocalizations.of(context)!.confirm)
child: Text(AppLocalizations.of(context)!.confirm) ),
), ],
], )
) ],
], ),
), ),
), ),
); );