CW-342 Enable Mac Layout on iPad (#958)

* Add iPad responsive layout

* Set magic number to position input field on wider screens

* Adjust screen resolution

* Update target device family for ios

* Add icons for iPad

* Revert width adjustment for ipad

* Fix overflowing balance

* Fix overflowing balance

* Fix PR issues

* Remove unused icons [skip ci]

---------

Co-authored-by: OmarHatem <omarh.ismail1@gmail.com>
This commit is contained in:
Godwin Asuquo
2023-06-14 02:04:52 +03:00
committed by GitHub
co-authored by OmarHatem
parent e84d02f661
commit affc35f335
34 changed files with 144 additions and 110 deletions
@@ -9,6 +9,7 @@ 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/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/view_model/anon_invoice_page_view_model.dart';
import 'package:cake_wallet/view_model/dashboard/receive_option_view_model.dart';
import 'package:flutter/material.dart';
@@ -88,32 +89,30 @@ class AnonPayInvoicePage extends BasePage {
.accentTextTheme!
.bodyLarge!
.backgroundColor!,
nextFocus: false,
actions: [
KeyboardActionsItem(
focusNode: _amountFocusNode,
toolbarButtons: [(_) => KeyboardDoneButton()],
nextFocus: false,
actions: [
KeyboardActionsItem(
focusNode: _amountFocusNode,
toolbarButtons: [(_) => KeyboardDoneButton()],
),
]),
child: Container(
color: Theme.of(context).colorScheme.background,
child: ScrollableWithBottomSection(
contentPadding: EdgeInsets.only(bottom: 24),
content: Container(
decoration: ResponsiveLayoutUtil.instance.isMobile ? BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(24), bottomRight: Radius.circular(24)),
gradient: LinearGradient(
colors: [
Theme.of(context).primaryTextTheme!.titleSmall!.color!,
Theme.of(context).primaryTextTheme!.titleSmall!.decorationColor!,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
]),
child: Container(
color: Theme.of(context).colorScheme.background,
child: ScrollableWithBottomSection(
contentPadding: EdgeInsets.only(bottom: 24),
content: Container(
decoration: DeviceInfo.instance.isMobile
? BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(24), bottomRight: Radius.circular(24)),
gradient: LinearGradient(
colors: [
Theme.of(context).primaryTextTheme!.titleSmall!.color!,
Theme.of(context).primaryTextTheme!.titleSmall!.decorationColor!,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
)
: null,
) : null,
child: Observer(builder: (_) {
return Padding(
padding: EdgeInsets.fromLTRB(24, 120, 24, 0),
@@ -1,4 +1,5 @@
import 'package:cake_wallet/src/widgets/base_text_form_field.dart';
import 'package:cake_wallet/utils/responsive_layout_util.dart';
import 'package:cw_core/currency.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
@@ -9,7 +10,8 @@ class CurrencyInputField extends StatelessWidget {
required this.onTapPicker,
required this.selectedCurrency,
this.focusNode,
required this.controller, required this.isLight,
required this.controller,
required this.isLight,
});
final Function() onTapPicker;
@@ -22,13 +24,12 @@ class CurrencyInputField extends StatelessWidget {
Widget build(BuildContext context) {
final arrowBottomPurple = Image.asset(
'assets/images/arrow_bottom_purple_icon.png',
color: Theme.of(context)
.accentTextTheme!
.displayMedium!
.backgroundColor!,
color: Theme.of(context).accentTextTheme!.displayMedium!.backgroundColor!,
height: 8,
);
final _width = MediaQuery.of(context).size.width;
// This magic number for wider screen sets the text input focus at center of the inputfield
final _width =
ResponsiveLayoutUtil.instance.isMobile ? MediaQuery.of(context).size.width : 500;
return Column(
children: [
@@ -42,10 +43,12 @@ class CurrencyInputField extends StatelessWidget {
keyboardType: TextInputType.numberWithOptions(signed: false, decimal: true),
inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'^\d+(\.|\,)?\d{0,8}'))],
hintText: '0.000',
placeholderTextStyle: isLight ? null : TextStyle(
color: Theme.of(context).primaryTextTheme!.headlineSmall!.color!,
fontWeight: FontWeight.w600,
),
placeholderTextStyle: isLight
? null
: TextStyle(
color: Theme.of(context).primaryTextTheme!.headlineSmall!.color!,
fontWeight: FontWeight.w600,
),
borderColor: Theme.of(context).accentTextTheme!.titleLarge!.backgroundColor!,
textColor: Theme.of(context).accentTextTheme!.displayMedium!.backgroundColor!,
textStyle: TextStyle(
@@ -72,7 +75,10 @@ class CurrencyInputField extends StatelessWidget {
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 16,
color: Theme.of(context).accentTextTheme!.displayMedium!.backgroundColor!,
color: Theme.of(context)
.accentTextTheme!
.displayMedium!
.backgroundColor!,
),
),
if (selectedCurrency.tag != null)
@@ -107,8 +113,10 @@ class CurrencyInputField extends StatelessWidget {
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 20,
color:
Theme.of(context).accentTextTheme!.displayMedium!.backgroundColor!,
color: Theme.of(context)
.accentTextTheme!
.displayMedium!
.backgroundColor!,
),
),
),