desktop layout

This commit is contained in:
julian 2023-07-26 16:08:01 -06:00
parent 0175939d63
commit 9d2b315bd9

View file

@ -206,60 +206,100 @@ class _MonkeyViewState extends ConsumerState<MonkeyView> {
//edit for desktop //edit for desktop
return Background( return Background(
child: Stack( child: ConditionalParent(
children: [ condition: isDesktop,
ConditionalParent( builder: (child) => DesktopScaffold(
condition: isDesktop, appBar: DesktopAppBar(
builder: (child) => DesktopScaffold( background: Theme.of(context).extension<StackColors>()!.popupBG,
appBar: DesktopAppBar( leading: Expanded(
background: Theme.of(context).extension<StackColors>()!.popupBG, child: Row(
leading: Expanded( children: [
child: Row( const SizedBox(
children: [ width: 32,
const SizedBox(
width: 32,
),
AppBarIconButton(
size: 32,
color: Theme.of(context)
.extension<StackColors>()!
.textFieldDefaultBG,
shadows: const [],
icon: SvgPicture.asset(
Assets.svg.arrowLeft,
width: 18,
height: 18,
color: Theme.of(context)
.extension<StackColors>()!
.topNavIconPrimary,
),
onPressed: () {
if (mounted) {
Navigator.of(context).pop();
}
},
),
const SizedBox(
width: 15,
),
Text(
"MonKey",
style: STextStyles.navBarTitle(context),
),
],
), ),
), AppBarIconButton(
trailing: AspectRatio( size: 32,
color: Theme.of(context)
.extension<StackColors>()!
.textFieldDefaultBG,
shadows: const [],
icon: SvgPicture.asset(
Assets.svg.arrowLeft,
width: 18,
height: 18,
color: Theme.of(context)
.extension<StackColors>()!
.topNavIconPrimary,
),
onPressed: () {
if (mounted) {
Navigator.of(context).pop();
}
},
),
const SizedBox(
width: 15,
),
Text(
"MonKey",
style: STextStyles.navBarTitle(context),
),
],
),
),
trailing: AspectRatio(
aspectRatio: 1,
child: AppBarIconButton(
icon: SvgPicture.asset(Assets.svg.circleQuestion),
onPressed: () {
showDialog<dynamic>(
context: context,
useSafeArea: false,
barrierDismissible: true,
builder: (context) {
return const StackDialog(
title: "About MonKeys",
message:
"A MonKey is a visual representation of your Banano address.",
);
});
}),
),
useSpacers: false,
isCompactHeight: true,
),
body: child,
),
child: ConditionalParent(
condition: !isDesktop,
builder: (child) => Scaffold(
appBar: AppBar(
leading: AppBarBackButton(
onPressed: () {
Navigator.of(context).pop();
},
),
title: Text(
"MonKey",
style: STextStyles.navBarTitle(context),
),
actions: [
AspectRatio(
aspectRatio: 1, aspectRatio: 1,
child: AppBarIconButton( child: AppBarIconButton(
icon: SvgPicture.asset(Assets.svg.circleQuestion), icon: SvgPicture.asset(
Assets.svg.circleQuestion,
color: Theme.of(context)
.extension<StackColors>()!
.infoItemText,
),
onPressed: () { onPressed: () {
showDialog<dynamic>( showDialog<dynamic>(
context: context, context: context,
useSafeArea: false, useSafeArea: false,
barrierDismissible: true, barrierDismissible: true,
builder: (context) { builder: (context) {
return const StackDialog( return const StackOkDialog(
title: "About MonKeys", title: "About MonKeys",
message: message:
"A MonKey is a visual representation of your Banano address.", "A MonKey is a visual representation of your Banano address.",
@ -267,185 +307,155 @@ class _MonkeyViewState extends ConsumerState<MonkeyView> {
}); });
}), }),
), ),
useSpacers: false, ],
isCompactHeight: true, ),
), body: child,
body: child, ),
child: ConditionalParent(
condition: isDesktop,
builder: (child) => SizedBox(
width: 318,
child: child,
), ),
child: ConditionalParent( child: ConditionalParent(
condition: !isDesktop, condition: imageBytes != null,
builder: (child) => Scaffold( builder: (_) => Column(
appBar: AppBar( children: [
leading: AppBarBackButton( isDesktop
onPressed: () { ? const SizedBox(
Navigator.of(context).pop(); height: 50,
}, )
), : const Spacer(
title: Text( flex: 1,
"MonKey", ),
style: STextStyles.navBarTitle(context), if (imageBytes != null)
), SizedBox(
actions: [ width: 300,
AspectRatio( height: 300,
aspectRatio: 1, child: SvgPicture.memory(Uint8List.fromList(imageBytes)),
child: AppBarIconButton(
icon: SvgPicture.asset(
Assets.svg.circleQuestion,
color: Theme.of(context)
.extension<StackColors>()!
.infoItemText,
),
onPressed: () {
showDialog<dynamic>(
context: context,
useSafeArea: false,
barrierDismissible: true,
builder: (context) {
return const StackOkDialog(
title: "About MonKeys",
message:
"A MonKey is a visual representation of your Banano address.",
);
});
}),
), ),
], isDesktop
), ? const SizedBox(
body: child, height: 50,
), )
child: ConditionalParent( : const Spacer(
condition: isDesktop, flex: 1,
builder: (child) => SizedBox(
width: 300,
height: 300,
child: child,
),
child: ConditionalParent(
condition: imageBytes != null,
builder: (child) => Column(
children: [
const Spacer(
flex: 1,
),
if (imageBytes != null)
SizedBox(
width: 300,
height: 300,
child:
SvgPicture.memory(Uint8List.fromList(imageBytes)),
), ),
const Spacer( Padding(
flex: 1, padding: const EdgeInsets.all(16.0),
), child: Column(
Padding( children: [
padding: const EdgeInsets.all(16.0), SecondaryButton(
child: Column( label: "Save as SVG",
children: [
SecondaryButton(
label: "Save as SVG",
onPressed: () async {
await showLoading(
whileFuture:
downloadMonkey(receivingAddress, false),
context: context,
isDesktop: Util.isDesktop,
message: "Saving MonKey svg",
);
},
),
const SizedBox(height: 12),
SecondaryButton(
label: "Download as PNG",
onPressed: () async {
await showLoading(
whileFuture:
downloadMonkey(receivingAddress, true),
context: context,
isDesktop: Util.isDesktop,
message: "Downloading MonKey png",
);
},
),
],
),
),
// child,
],
),
child: Column(
children: [
const Spacer(
flex: 4,
),
Center(
child: Column(
children: [
Opacity(
opacity: 0.2,
child: SvgPicture.file(
File(
ref.watch(coinIconProvider(coin)),
),
width: 200,
height: 200,
),
),
const SizedBox(
height: 40,
),
Text(
"You do not have a MonKey yet. \nFetch yours now!",
style: STextStyles.smallMed14(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark3,
),
textAlign: TextAlign.center,
),
],
),
),
const Spacer(
flex: 6,
),
Padding(
padding: const EdgeInsets.all(16.0),
child: PrimaryButton(
label: "Fetch MonKey",
onPressed: () async { onPressed: () async {
final future = Future.wait([
getMonkeyImage(receivingAddress),
Future<void>.delayed(const Duration(seconds: 2)),
]);
await showLoading( await showLoading(
whileFuture: future, whileFuture:
downloadMonkey(receivingAddress, false),
context: context, context: context,
isDesktop: Util.isDesktop, isDesktop: Util.isDesktop,
message: "Fetching MonKey", message: "Saving MonKey svg",
subMessage: "We are fetching your MonKey",
); );
// if (isDesktop) {
// Navigator.of(context).popUntil(
// ModalRoute.withName(
// DesktopWalletView.routeName),
// );
// } else {
// Navigator.of(context).popUntil(
// ModalRoute.withName(WalletView.routeName),
// );
// }
}, },
), ),
), const SizedBox(height: 12),
], SecondaryButton(
label: "Download as PNG",
onPressed: () async {
await showLoading(
whileFuture:
downloadMonkey(receivingAddress, true),
context: context,
isDesktop: Util.isDesktop,
message: "Downloading MonKey png",
);
},
),
],
),
), ),
), // child,
],
),
child: Column(
children: [
isDesktop
? const SizedBox(
height: 100,
)
: const Spacer(
flex: 4,
),
Center(
child: Column(
children: [
Opacity(
opacity: 0.2,
child: SvgPicture.file(
File(
ref.watch(coinIconProvider(coin)),
),
width: 200,
height: 200,
),
),
const SizedBox(
height: 70,
),
Text(
"You do not have a MonKey yet. \nFetch yours now!",
style: STextStyles.smallMed14(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark3,
),
textAlign: TextAlign.center,
),
],
),
),
isDesktop
? const SizedBox(
height: 50,
)
: const Spacer(
flex: 6,
),
Padding(
padding: const EdgeInsets.all(16.0),
child: PrimaryButton(
label: "Fetch MonKey",
onPressed: () async {
final future = Future.wait([
getMonkeyImage(receivingAddress),
Future<void>.delayed(const Duration(seconds: 2)),
]);
await showLoading(
whileFuture: future,
context: context,
isDesktop: Util.isDesktop,
message: "Fetching MonKey",
subMessage: "We are fetching your MonKey",
);
// if (isDesktop) {
// Navigator.of(context).popUntil(
// ModalRoute.withName(
// DesktopWalletView.routeName),
// );
// } else {
// Navigator.of(context).popUntil(
// ModalRoute.withName(WalletView.routeName),
// );
// }
},
),
),
],
), ),
), ),
), ),
], ),
), ),
); );
} }