Cw 430 find a better way to decide when to show the desktop UI (#977)

* Find a better way to decide when to show the desktop UI

* fix UI issue for tablet view

* fix trocar invoice issue for landscape layout

* fix present receive option piker UI issue

* fix dascktop layout

* - Fix AnonPay Navigation
- Fix Wallet changing on Mobile

---------

Co-authored-by: Serhii <borodenko.sv@gmail.com>
Co-authored-by: OmarHatem <omarh.ismail1@gmail.com>
This commit is contained in:
Godwin Asuquo 2023-07-13 16:05:52 +03:00 committed by GitHub
parent d4969633b0
commit ff420c7c7e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 80 additions and 48 deletions

View file

@ -22,7 +22,6 @@
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true" android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize" android:windowSoftInputMode="adjustResize"
android:screenOrientation="portrait"
android:exported="true"> android:exported="true">
<meta-data <meta-data
android:name="io.flutter.embedding.android.SplashScreenDrawable" android:name="io.flutter.embedding.android.SplashScreenDrawable"

View file

@ -193,12 +193,7 @@ class App extends StatefulWidget {
} }
class AppState extends State<App> with SingleTickerProviderStateMixin { class AppState extends State<App> with SingleTickerProviderStateMixin {
AppState() : yatStore = getIt.get<YatStore>() { AppState() : yatStore = getIt.get<YatStore>();
SystemChrome.setPreferredOrientations(
ResponsiveLayoutUtil.instance.isIpad ?
[DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight] :
[DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
}
YatStore yatStore; YatStore yatStore;
StreamSubscription? stream; StreamSubscription? stream;
@ -290,7 +285,43 @@ class AppState extends State<App> with SingleTickerProviderStateMixin {
locale: Locale(settingsStore.languageCode), locale: Locale(settingsStore.languageCode),
onGenerateRoute: (settings) => Router.createRoute(settings), onGenerateRoute: (settings) => Router.createRoute(settings),
initialRoute: initialRoute, initialRoute: initialRoute,
home: _Home(),
)); ));
}); });
} }
} }
class _Home extends StatefulWidget {
const _Home();
@override
State<_Home> createState() => _HomeState();
}
class _HomeState extends State<_Home> {
@override
void didChangeDependencies() {
if(!ResponsiveLayoutUtil.instance.isMobile){
_setOrientation(context);
}
super.didChangeDependencies();
}
void _setOrientation(BuildContext context){
final orientation = MediaQuery.of(context).orientation;
final width = MediaQuery.of(context).size.width;
final height = MediaQuery.of(context).size.height;
if (orientation == Orientation.portrait && width < height) {
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
} else if (orientation == Orientation.landscape && width > height) {
SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]);
}
}
@override
Widget build(BuildContext context) {
return const SizedBox.shrink();
}
}

View file

@ -4,6 +4,7 @@ import 'package:cake_wallet/di.dart';
import 'package:cake_wallet/entities/main_actions.dart'; import 'package:cake_wallet/entities/main_actions.dart';
import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart'; import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart';
import 'package:cake_wallet/src/screens/dashboard/widgets/market_place_page.dart'; import 'package:cake_wallet/src/screens/dashboard/widgets/market_place_page.dart';
import 'package:cake_wallet/utils/device_info.dart';
import 'package:cake_wallet/utils/version_comparator.dart'; import 'package:cake_wallet/utils/version_comparator.dart';
import 'package:cake_wallet/view_model/dashboard/market_place_view_model.dart'; import 'package:cake_wallet/view_model/dashboard/market_place_view_model.dart';
import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/generated/i18n.dart';
@ -42,16 +43,31 @@ class DashboardPage extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(body: LayoutBuilder(
body: ResponsiveLayoutUtil.instance.isMobile builder: (context, constraints) {
? _DashboardPageView( if (DeviceInfo.instance.isDesktop) {
if (constraints.maxWidth > ResponsiveLayoutUtil.kDesktopMaxDashBoardWidthConstraint) {
return getIt.get<DesktopSidebarWrapper>();
} else {
return _DashboardPageView(
balancePage: balancePage, balancePage: balancePage,
dashboardViewModel: dashboardViewModel, dashboardViewModel: dashboardViewModel,
addressListViewModel: addressListViewModel, addressListViewModel: addressListViewModel,
)
: getIt.get<DesktopSidebarWrapper>(),
); );
} }
} else if (ResponsiveLayoutUtil.instance.shouldRenderMobileUI()) {
return _DashboardPageView(
balancePage: balancePage,
dashboardViewModel: dashboardViewModel,
addressListViewModel: addressListViewModel,
);
} else {
return getIt.get<DesktopSidebarWrapper>();
}
},
));
}
} }
class _DashboardPageView extends BasePage { class _DashboardPageView extends BasePage {

View file

@ -138,7 +138,7 @@ class PresentReceiveOptionPicker extends StatelessWidget {
Container( Container(
margin: EdgeInsets.only(bottom: 40), margin: EdgeInsets.only(bottom: 40),
child: InkWell( child: InkWell(
onTap: () => Navigator.pop(context), onTap: () => Navigator.pop(popUpContext),
child: CircleAvatar( child: CircleAvatar(
child: Icon( child: Icon(
Icons.close, Icons.close,

View file

@ -8,7 +8,6 @@ import 'package:cake_wallet/src/screens/dashboard/widgets/present_receive_option
import 'package:cake_wallet/src/screens/receive/widgets/anonpay_input_form.dart'; import 'package:cake_wallet/src/screens/receive/widgets/anonpay_input_form.dart';
import 'package:cake_wallet/src/widgets/alert_with_one_action.dart'; import 'package:cake_wallet/src/widgets/alert_with_one_action.dart';
import 'package:cake_wallet/src/widgets/keyboard_done_button.dart'; import 'package:cake_wallet/src/widgets/keyboard_done_button.dart';
import 'package:cake_wallet/utils/device_info.dart';
import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:cake_wallet/utils/responsive_layout_util.dart';
import 'package:cake_wallet/view_model/anon_invoice_page_view_model.dart'; import 'package:cake_wallet/view_model/anon_invoice_page_view_model.dart';
import 'package:cake_wallet/view_model/dashboard/receive_option_view_model.dart'; import 'package:cake_wallet/view_model/dashboard/receive_option_view_model.dart';
@ -54,9 +53,7 @@ class AnonPayInvoicePage extends BasePage {
AppBarStyle get appBarStyle => AppBarStyle.transparent; AppBarStyle get appBarStyle => AppBarStyle.transparent;
@override @override
void onClose(BuildContext context) { void onClose(BuildContext context) => Navigator.popUntil(context, (route) => route.isFirst);
Navigator.popUntil(context, ModalRoute.withName(Routes.dashboard));
}
@override @override
Widget middle(BuildContext context) => Widget middle(BuildContext context) =>

View file

@ -32,28 +32,7 @@ class AnonPayReceivePage extends BasePage {
bool get resizeToAvoidBottomInset => false; bool get resizeToAvoidBottomInset => false;
@override @override
Widget leading(BuildContext context) { void onClose(BuildContext context) => Navigator.popUntil(context, (route) => route.isFirst);
final _backButton = Icon(
Icons.arrow_back_ios,
color: Theme.of(context)
.accentTextTheme!
.displayMedium!
.backgroundColor!,
size: 16,
);
return SizedBox(
height: 37,
width: 37,
child: ButtonTheme(
minWidth: double.minPositive,
child: TextButton(
onPressed: () =>
Navigator.pushNamedAndRemoveUntil(context, Routes.dashboard, (route) => false),
child: _backButton),
),
);
}
@override @override
Widget middle(BuildContext context) { Widget middle(BuildContext context) {

View file

@ -220,7 +220,7 @@ class WalletListBodyState extends State<WalletListBody> {
await hideProgressText(); await hideProgressText();
// only pop the wallets route in mobile as it will go back to dashboard page // only pop the wallets route in mobile as it will go back to dashboard page
// in desktop platforms the navigation tree is different // in desktop platforms the navigation tree is different
if (ResponsiveLayoutUtil.instance.isMobile) { if (ResponsiveLayoutUtil.instance.shouldRenderMobileUI()) {
WidgetsBinding.instance.addPostFrameCallback((_) { WidgetsBinding.instance.addPostFrameCallback((_) {
Navigator.of(context).pop(); Navigator.of(context).pop();
}); });

View file

@ -1,22 +1,32 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
class ResponsiveLayoutUtil { class ResponsiveLayoutUtil {
static const double _kMobileThreshold = 768; static const double _kMobileThreshold = 550;
static const double kDesktopMaxWidthConstraint = 400; static const double kDesktopMaxWidthConstraint = 400;
static const double kDesktopMaxDashBoardWidthConstraint = 900;
static const double kPopupWidth = 400; static const double kPopupWidth = 400;
static const double kPopupSpaceHeight = 100; static const double kPopupSpaceHeight = 100;
static const _kIpadMaxWidth = 2560.0;
const ResponsiveLayoutUtil._(); const ResponsiveLayoutUtil._();
static final instance = ResponsiveLayoutUtil._(); static final instance = ResponsiveLayoutUtil._();
bool get isMobile => bool get isMobile =>
MediaQueryData.fromWindow(WidgetsBinding.instance.window).size.width < _kMobileThreshold; MediaQueryData.fromWindow(WidgetsBinding.instance.window).size.shortestSide <=
_kMobileThreshold;
bool get isIpad { bool shouldRenderMobileUI() {
final width = MediaQueryData.fromWindow(WidgetsBinding.instance.window).size.width; final mediaQuery = MediaQueryData.fromWindow(WidgetsBinding.instance.window);
return width >= _kMobileThreshold && !(width > _kIpadMaxWidth); final orientation = mediaQuery.orientation;
final width = mediaQuery.size.width;
final height = mediaQuery.size.height;
if (isMobile ||
(orientation == Orientation.portrait && width < height) ||
(orientation == Orientation.landscape && width < height)) {
return true;
} else {
return false;
}
} }
/// Returns dynamic size. /// Returns dynamic size.