Ecosystem/stack_wallet
1
0
Fork 0
mirror of https://github.com/cypherstack/stack_wallet.git synced 2025-03-15 16:12:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

empty wallets desktop ui and simple desktop app bar class

Browse source
This commit is contained in:
julian 2022-09-16 10:23:42 -06:00
parent 53f721a2f3
commit 31565f1832
9 changed files with 250 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
assets/svg/stack-icon1.svg
View file

@ -1,12 +1,5 @@
<svg width="102" height="102" viewBox="0 0 102 102" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3358_84804)">
<path d="M60.2849 13.9547C54.3472 10.5288 46.9268 14.8184 46.9268 21.6702C46.9268 28.522 50.2375 34.4598 55.6643 38.1232L78.6452 51.4454L78.7028 51.4238L101.993 37.9649L60.2849 13.9547Z" fill="#B3B3B3"/>
<path d="M55.6646 38.1228C50.2378 34.4593 46.9271 28.2913 46.9271 21.6697C46.9271 18.4094 48.6328 15.6888 51.0583 14.1486C50.9431 14.2134 51.1735 14.0838 51.0583 14.1486L14.7048 34.5745L8.8678 38.1012L4.8877 40.3899C7.39235 39.116 10.5304 39.0152 13.3301 40.6418L23.3415 46.3421L32.115 51.4161L55.4055 64.8535L78.6383 51.4305L55.6574 38.1084L55.6646 38.1228Z" fill="#666666"/>
<path d="M102 64.8678L55.4119 91.7857L46.6168 86.7116L46.5809 86.6756L8.83108 64.8678C6.24725 63.1837 4.14564 60.8877 2.663 58.3039C0.935648 55.3242 0 51.8983 0 48.3501C0 45.1545 1.605 42.513 3.93692 40.944C4.2536 40.7497 4.56308 40.5698 4.89416 40.397C7.39882 39.1231 10.5368 39.0224 13.3366 40.649L23.2904 46.3924L32.0639 51.4449L32.1215 51.4233L55.4119 64.8606L78.6448 51.4377L102 64.8606V64.8678Z" fill="#232323"/>
</g>
<defs>
<clipPath id="clip0_3358_84804">
<rect width="102" height="102" fill="white"/>
</clipPath>
</defs>
<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M41.3715 9.57675C37.2965 7.22564 32.2041 10.1695 32.2041 14.8717C32.2041 19.5739 34.4762 23.6489 38.2004 26.163L53.9717 35.3057L54.0112 35.2908L69.9948 26.0543L41.3715 9.57675Z" fill="#B3B3B3"/>
<path d="M38.2014 26.163C34.4771 23.6489 32.205 19.4159 32.205 14.8717C32.205 12.6342 33.3757 10.7671 35.0402 9.7101C34.9612 9.75455 35.1192 9.66564 35.0402 9.7101L10.0917 23.7279L6.08593 26.1481L3.35449 27.7188C5.07337 26.8446 7.22692 26.7754 9.14831 27.8917L16.0189 31.8037L22.0399 35.2859L38.0236 44.5076L53.9677 35.2958L38.1964 26.1531L38.2014 26.163Z" fill="#666666"/>
<path d="M70 44.5187L38.0278 62.9917L31.992 59.5095L31.9673 59.4848L6.06054 44.5187C4.28733 43.3629 2.84505 41.7872 1.82755 40.014C0.642111 37.9691 0 35.618 0 33.1829C0 30.9899 1.10147 29.1771 2.70181 28.1004C2.91914 27.967 3.13153 27.8435 3.35874 27.725C5.07762 26.8507 7.23116 26.7816 9.15256 27.8979L15.9836 31.8394L22.0047 35.3068L22.0442 35.292L38.0278 44.5137L53.9719 35.3019L70 44.5137V44.5187Z" fill="#232323"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

7
lib/pages/intro_view.dart
View file

@ -2,6 +2,7 @@ import 'dart:io';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:stackwallet/pages/pinpad_views/create_pin_view.dart';
import 'package:stackwallet/pages_desktop_specific/create_password/create_password_view.dart';
import 'package:stackwallet/utilities/assets.dart';
@ -109,10 +110,8 @@ class _IntroViewState extends State<IntroView> {
SizedBox(
width: 130,
height: 130,
child: Image(
image: AssetImage(
Assets.png.splash,
),
child: SvgPicture.asset(
Assets.svg.stackIcon,
),
),
const Spacer(

154
lib/pages/wallets_view/sub_widgets/empty_wallets.dart
View file

@ -1,3 +1,5 @@
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:stackwallet/pages/add_wallet_views/add_wallet_view/add_wallet_view.dart';
@ -11,73 +13,111 @@ class EmptyWallets extends StatelessWidget {
@override
Widget build(BuildContext context) {
debugPrint("BUILD: $runtimeType");
final isDesktop =
Platform.isMacOS || Platform.isWindows || Platform.isLinux;
return SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 43,
),
child: Column(
children: [
const Spacer(
flex: 2,
),
Image(
image: AssetImage(
Assets.png.stack,
child: ConstrainedBox(
constraints: BoxConstraints(
maxWidth: isDesktop ? 330 : double.infinity,
),
child: Column(
children: [
const Spacer(
flex: 2,
),
width: MediaQuery.of(context).size.width / 3,
),
const SizedBox(
height: 16,
),
Text(
"You do not have any wallets yet. Start building your crypto Stack!",
textAlign: TextAlign.center,
style: STextStyles.subtitle.copyWith(
color: CFColors.neutral60,
Image(
image: AssetImage(
Assets.png.stack,
),
width: isDesktop ? 324 : MediaQuery.of(context).size.width / 3,
),
),
const SizedBox(
height: 16,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextButton(
style: Theme.of(context).textButtonTheme.style?.copyWith(
backgroundColor: MaterialStateProperty.all<Color>(
CFColors.stackAccent,
),
SizedBox(
height: isDesktop ? 30 : 16,
),
Text(
"You do not have any wallets yet. Start building your crypto Stack!",
textAlign: TextAlign.center,
style: isDesktop
? STextStyles.desktopSubtitleH2.copyWith(
color: CFColors.textSubtitle1,
)
: STextStyles.subtitle.copyWith(
color: CFColors.neutral60,
),
onPressed: () {
Navigator.of(context).pushNamed(AddWalletView.routeName);
},
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 16,
),
child: Row(
children: [
SvgPicture.asset(
Assets.svg.plus,
),
const SizedBox(
width: 5,
),
Text(
"Add Wallet",
style: STextStyles.button,
),
],
),
),
SizedBox(
height: isDesktop ? 30 : 16,
),
if (isDesktop)
const SizedBox(
width: 328,
height: 70,
child: AddWalletButton(
isDesktop: true,
),
),
],
),
const Spacer(
flex: 5,
),
],
if (!isDesktop)
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
AddWalletButton(
isDesktop: false,
),
],
),
const Spacer(
flex: 5,
),
],
),
),
),
);
}
}
class AddWalletButton extends StatelessWidget {
const AddWalletButton({Key? key, required this.isDesktop}) : super(key: key);
final bool isDesktop;
@override
Widget build(BuildContext context) {
return TextButton(
style: CFColors.getPrimaryEnabledButtonColor(context),
onPressed: () {
Navigator.of(context).pushNamed(AddWalletView.routeName);
},
child: Center(
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 16,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SvgPicture.asset(
Assets.svg.plus,
width: isDesktop ? 18 : null,
height: isDesktop ? 18 : null,
),
SizedBox(
width: isDesktop ? 8 : 5,
),
Text(
"Add Wallet",
style: isDesktop
? STextStyles.desktopButtonEnabled
: STextStyles.button,
),
],
),
),
),
);

21
lib/pages_desktop_specific/create_password/create_password_view.dart
View file

@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';
import 'package:flutter_svg/svg.dart';
import 'package:stackwallet/notifications/show_flush_bar.dart';
import 'package:stackwallet/pages_desktop_specific/desktop_app_bar.dart';
import 'package:stackwallet/pages_desktop_specific/home/desktop_home_view.dart';
import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/cfcolors.dart';
@ -118,17 +119,15 @@ class _CreatePasswordViewState extends State<CreatePasswordView> {
return Material(
child: Column(
children: [
Row(
children: [
AppBarBackButton(
onPressed: () async {
if (mounted) {
Navigator.of(context).pop();
}
},
),
const Spacer(),
],
DesktopAppBar(
leading: AppBarBackButton(
onPressed: () async {
if (mounted) {
Navigator.of(context).pop();
}
},
),
isCompactHeight: false,
),
Expanded(
child: Center(

66
lib/pages_desktop_specific/desktop_app_bar.dart Normal file
View file

@ -0,0 +1,66 @@
import 'package:flutter/material.dart';
const double kDesktopAppBarHeight = 96.0;
const double kDesktopAppBarHeightCompact = 82.0;
class DesktopAppBar extends StatefulWidget {
const DesktopAppBar({
Key? key,
this.leading,
this.center,
this.trailing,
this.background = Colors.transparent,
required this.isCompactHeight,
}) : super(key: key);
final Widget? leading;
final Widget? center;
final Widget? trailing;
final Color background;
final bool isCompactHeight;
@override
State<DesktopAppBar> createState() => _DesktopAppBarState();
}
class _DesktopAppBarState extends State<DesktopAppBar> {
late final List<Widget> items;
@override
void initState() {
items = [];
if (widget.leading != null) {
items.add(widget.leading!);
}
items.add(const Spacer());
if (widget.center != null) {
items.add(widget.center!);
items.add(const Spacer());
}
if (widget.trailing != null) {
items.add(widget.trailing!);
}
super.initState();
}
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: widget.background,
),
height: widget.isCompactHeight
? kDesktopAppBarHeightCompact
: kDesktopAppBarHeight,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: items,
),
);
}
}

3
lib/pages_desktop_specific/home/desktop_home_view.dart
View file

@ -1,9 +1,10 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:stackwallet/pages_desktop_specific/home/desktop_menu.dart';
import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/my_stack_view.dart';
import 'package:stackwallet/utilities/cfcolors.dart';
final homeContent = Provider<Widget>((ref) => Container());
final homeContent = Provider<Widget>((ref) => const MyStackView());
class DesktopHomeView extends ConsumerStatefulWidget {
const DesktopHomeView({Key? key}) : super(key: key);

6
lib/pages_desktop_specific/home/desktop_menu.dart
View file

@ -37,10 +37,8 @@ class _DesktopMenuState extends State<DesktopMenu> {
SizedBox(
width: 70,
height: 70,
child: Image(
image: AssetImage(
Assets.png.splash,
),
child: SvgPicture.asset(
Assets.svg.stackIcon,
),
),
const SizedBox(

59
lib/pages_desktop_specific/home/my_stack_view/my_stack_view.dart Normal file
View file

@ -0,0 +1,59 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:stackwallet/pages/wallets_view/sub_widgets/empty_wallets.dart';
import 'package:stackwallet/pages_desktop_specific/desktop_app_bar.dart';
import 'package:stackwallet/providers/global/prefs_provider.dart';
import 'package:stackwallet/providers/global/wallets_provider.dart';
import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/text_styles.dart';
class MyStackView extends ConsumerStatefulWidget {
const MyStackView({Key? key}) : super(key: key);
@override
ConsumerState<MyStackView> createState() => _MyStackViewState();
}
class _MyStackViewState extends ConsumerState<MyStackView> {
@override
Widget build(BuildContext context) {
debugPrint("BUILD: $runtimeType");
final hasWallets = ref.watch(walletsChangeNotifierProvider).hasWallets;
final showFavorites = ref.watch(prefsChangeNotifierProvider
.select((value) => value.showFavoriteWallets));
return Column(
children: [
DesktopAppBar(
isCompactHeight: true,
leading: Row(
children: [
const SizedBox(
width: 24,
),
SizedBox(
width: 32,
height: 32,
child: SvgPicture.asset(
Assets.svg.stackIcon,
),
),
const SizedBox(
width: 12,
),
Text(
"My Stack",
style: STextStyles.desktopH3,
)
],
),
),
Expanded(
child: hasWallets ? Container() : const EmptyWallets(),
),
],
);
}
}

7
lib/utilities/text_styles.dart
View file

@ -152,6 +152,13 @@ class STextStyles {
height: 32 / 32,
);
static final TextStyle desktopH3 = GoogleFonts.inter(
color: CFColors.textDark,
fontWeight: FontWeight.w600,
fontSize: 24,
height: 24 / 24,
);
static final TextStyle desktopTextMedium = GoogleFonts.inter(
color: CFColors.textDark,
fontWeight: FontWeight.w500,