mirror of
https://github.com/cake-tech/cake_wallet.git
synced 2024-12-23 03:59:23 +00:00
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:
parent
d4969633b0
commit
ff420c7c7e
8 changed files with 80 additions and 48 deletions
|
@ -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"
|
||||||
|
|
|
@ -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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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) =>
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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();
|
||||||
});
|
});
|
||||||
|
|
|
@ -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.
|
||||||
|
|
Loading…
Reference in a new issue