From 06d25b9a0c18535d8fa045654bc6e7972a9d838c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maty=C3=A1=C5=A1=20Caras?= Date: Mon, 12 Feb 2024 18:43:57 +0100 Subject: [PATCH] fix: show actionsheet instead of inkwell on iOS --- CHANGELOG.md | 1 + lib/views/settings/graph_type.dart | 279 +++++++++++++++++++---------- 2 files changed, 186 insertions(+), 94 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b6f00e7..00c4570 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ - Welcome text on Setup view is now centered - Editing entries is now done by tapping the entry, instead of a dedicated button - return iOS (Cupertino) widgets only on iOS/macOS +- Show action sheet in graph settings on iOS instead of InkWell # 1.0.0-alpha+5 - Add tests diff --git a/lib/views/settings/graph_type.dart b/lib/views/settings/graph_type.dart index 14d1b02..b946ba6 100644 --- a/lib/views/settings/graph_type.dart +++ b/lib/views/settings/graph_type.dart @@ -1,3 +1,6 @@ +import 'dart:io'; + +import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart'; import 'package:settings_ui/settings_ui.dart'; @@ -47,59 +50,103 @@ class _GraphTypeSettingsViewState extends State { ? AppLocalizations.of(context).barChart : AppLocalizations.of(context).lineChart, ), - onPressed: (c) => showAdaptiveDialog( - context: c, - builder: (ctx) => AlertDialog.adaptive( - title: Text(AppLocalizations.of(context).selectType), - content: SizedBox( - height: 80, - child: Column( - children: [ - SizedBox( - width: MediaQuery.of(ctx).size.width, - child: InkWell( - child: Padding( - padding: const EdgeInsets.all(8), - child: Text( - AppLocalizations.of(context).barChart, - textAlign: TextAlign.center, - ), - ), - onTap: () async { - final s = await SharedPreferences.getInstance(); - await s.setInt("yearlygraph", 1); - _yearly = 1; - if (!ctx.mounted) return; - Navigator.of(ctx).pop(); - setState(() {}); - }, + onPressed: (c) { + if (Platform.isIOS) { + // iOS does not use Material widgets => no inkwell support + showCupertinoModalPopup( + context: context, + builder: (ctx) => CupertinoActionSheet( + title: Text(AppLocalizations.of(context).selectType), + actions: [ + CupertinoActionSheetAction( + onPressed: () async { + final s = await SharedPreferences.getInstance(); + await s.setInt("yearlygraph", 1); + _yearly = 1; + if (!ctx.mounted) return; + Navigator.of(ctx).pop(); + setState(() {}); + }, + child: Text( + AppLocalizations.of(context).barChart, + textAlign: TextAlign.center, ), ), - SizedBox( - width: MediaQuery.of(context).size.width, - child: InkWell( - child: Padding( - padding: const EdgeInsets.all(8), - child: Text( - AppLocalizations.of(context).lineChart, - textAlign: TextAlign.center, - ), - ), - onTap: () async { - final s = await SharedPreferences.getInstance(); - await s.setInt("yearlygraph", 2); - _yearly = 2; - if (!ctx.mounted) return; - Navigator.of(ctx).pop(); - setState(() {}); - }, + CupertinoActionSheetAction( + onPressed: () async { + final s = await SharedPreferences.getInstance(); + await s.setInt("yearlygraph", 2); + _yearly = 2; + if (!ctx.mounted) return; + Navigator.of(ctx).pop(); + setState(() {}); + }, + child: Text( + AppLocalizations.of(context).lineChart, + textAlign: TextAlign.center, ), ), ], ), - ), - ), - ), + ); + } else { + showAdaptiveDialog( + context: c, + builder: (ctx) => AlertDialog.adaptive( + title: Text(AppLocalizations.of(context).selectType), + content: SizedBox( + height: 80, + child: Column( + children: [ + SizedBox( + width: MediaQuery.of(ctx).size.width, + child: InkWell( + child: Padding( + padding: const EdgeInsets.all(8), + child: Text( + AppLocalizations.of(context).barChart, + textAlign: TextAlign.center, + ), + ), + onTap: () async { + final s = + await SharedPreferences.getInstance(); + await s.setInt("yearlygraph", 1); + _yearly = 1; + if (!ctx.mounted) return; + Navigator.of(ctx).pop(); + setState(() {}); + }, + ), + ), + SizedBox( + width: MediaQuery.of(context).size.width, + child: InkWell( + child: Padding( + padding: const EdgeInsets.all(8), + child: Text( + AppLocalizations.of(context).lineChart, + textAlign: TextAlign.center, + ), + ), + onTap: () async { + final s = + await SharedPreferences.getInstance(); + await s.setInt("yearlygraph", 2); + _yearly = 2; + if (!ctx.mounted) return; + Navigator.of(ctx).pop(); + setState(() {}); + }, + ), + ), + ], + ), + ), + ), + ); + } + }, ), SettingsTile.navigation( title: Text(AppLocalizations.of(context).monthly), @@ -108,59 +155,103 @@ class _GraphTypeSettingsViewState extends State { ? AppLocalizations.of(context).barChart : AppLocalizations.of(context).lineChart, ), - onPressed: (c) => showAdaptiveDialog( - context: c, - builder: (ctx) => AlertDialog.adaptive( - title: Text(AppLocalizations.of(context).selectType), - content: SizedBox( - height: 80, - child: Column( - children: [ - SizedBox( - width: MediaQuery.of(ctx).size.width, - child: InkWell( - child: Padding( - padding: const EdgeInsets.all(8), - child: Text( - AppLocalizations.of(context).barChart, - textAlign: TextAlign.center, - ), - ), - onTap: () async { - final s = await SharedPreferences.getInstance(); - await s.setInt("monthlygraph", 1); - _monthly = 1; - if (!ctx.mounted) return; - Navigator.of(ctx).pop(); - setState(() {}); - }, + onPressed: (c) { + if (Platform.isIOS) { + // iOS does not use Material widgets => no inkwell support + showCupertinoModalPopup( + context: context, + builder: (ctx) => CupertinoActionSheet( + title: Text(AppLocalizations.of(context).selectType), + actions: [ + CupertinoActionSheetAction( + onPressed: () async { + final s = await SharedPreferences.getInstance(); + await s.setInt("monthlygraph", 1); + _monthly = 1; + if (!ctx.mounted) return; + Navigator.of(ctx).pop(); + setState(() {}); + }, + child: Text( + AppLocalizations.of(context).barChart, + textAlign: TextAlign.center, ), ), - SizedBox( - width: MediaQuery.of(ctx).size.width, - child: InkWell( - child: Padding( - padding: const EdgeInsets.all(8), - child: Text( - AppLocalizations.of(context).lineChart, - textAlign: TextAlign.center, - ), - ), - onTap: () async { - final s = await SharedPreferences.getInstance(); - await s.setInt("monthlygraph", 2); - _monthly = 2; - if (!ctx.mounted) return; - Navigator.of(ctx).pop(); - setState(() {}); - }, + CupertinoActionSheetAction( + onPressed: () async { + final s = await SharedPreferences.getInstance(); + await s.setInt("monthlygraph", 2); + _monthly = 2; + if (!ctx.mounted) return; + Navigator.of(ctx).pop(); + setState(() {}); + }, + child: Text( + AppLocalizations.of(context).lineChart, + textAlign: TextAlign.center, ), ), ], ), - ), - ), - ), + ); + } else { + showAdaptiveDialog( + context: c, + builder: (ctx) => AlertDialog.adaptive( + title: Text(AppLocalizations.of(context).selectType), + content: SizedBox( + height: 80, + child: Column( + children: [ + SizedBox( + width: MediaQuery.of(ctx).size.width, + child: InkWell( + child: Padding( + padding: const EdgeInsets.all(8), + child: Text( + AppLocalizations.of(context).barChart, + textAlign: TextAlign.center, + ), + ), + onTap: () async { + final s = + await SharedPreferences.getInstance(); + await s.setInt("monthlygraph", 1); + _monthly = 1; + if (!ctx.mounted) return; + Navigator.of(ctx).pop(); + setState(() {}); + }, + ), + ), + SizedBox( + width: MediaQuery.of(context).size.width, + child: InkWell( + child: Padding( + padding: const EdgeInsets.all(8), + child: Text( + AppLocalizations.of(context).lineChart, + textAlign: TextAlign.center, + ), + ), + onTap: () async { + final s = + await SharedPreferences.getInstance(); + await s.setInt("monthlygraph", 2); + _monthly = 2; + if (!ctx.mounted) return; + Navigator.of(ctx).pop(); + setState(() {}); + }, + ), + ), + ], + ), + ), + ), + ); + } + }, ), ], ),