mirror of
https://github.com/cypherstack/stack_wallet.git
synced 2025-01-29 21:55:58 +00:00
basic desktop home view and menu outlines
This commit is contained in:
parent
a587024fab
commit
497d0f1555
7 changed files with 287 additions and 21 deletions
|
@ -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/home/desktop_home_view.dart';
|
||||
import 'package:stackwallet/utilities/assets.dart';
|
||||
import 'package:stackwallet/utilities/cfcolors.dart';
|
||||
import 'package:stackwallet/utilities/constants.dart';
|
||||
|
@ -75,6 +76,12 @@ class _CreatePasswordViewState extends State<CreatePasswordView> {
|
|||
|
||||
await widget.secureStore
|
||||
.write(key: "stackDesktopPassword", value: passphrase);
|
||||
|
||||
if (mounted) {
|
||||
unawaited(Navigator.of(context)
|
||||
.pushReplacementNamed(DesktopHomeView.routeName));
|
||||
}
|
||||
|
||||
unawaited(showFloatingFlushBar(
|
||||
type: FlushBarType.success,
|
||||
message: "Your password is set up",
|
||||
|
@ -121,27 +128,6 @@ class _CreatePasswordViewState extends State<CreatePasswordView> {
|
|||
},
|
||||
),
|
||||
const Spacer(),
|
||||
SizedBox(
|
||||
height: 56,
|
||||
child: TextButton(
|
||||
style: CFColors.getSecondaryEnabledButtonColor(context),
|
||||
onPressed: () {
|
||||
//
|
||||
},
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 30,
|
||||
),
|
||||
child: Text(
|
||||
"Exit to My Stack",
|
||||
style: STextStyles.desktopButtonSecondaryEnabled,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
width: 24,
|
||||
),
|
||||
],
|
||||
),
|
||||
Expanded(
|
||||
|
|
30
lib/pages_desktop_specific/home/desktop_home_view.dart
Normal file
30
lib/pages_desktop_specific/home/desktop_home_view.dart
Normal file
|
@ -0,0 +1,30 @@
|
|||
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/utilities/cfcolors.dart';
|
||||
|
||||
final homeContent = Provider<Widget>((ref) => Container());
|
||||
|
||||
class DesktopHomeView extends ConsumerStatefulWidget {
|
||||
const DesktopHomeView({Key? key}) : super(key: key);
|
||||
|
||||
static const String routeName = "/desktopHome";
|
||||
|
||||
@override
|
||||
ConsumerState<DesktopHomeView> createState() => _DesktopHomeViewState();
|
||||
}
|
||||
|
||||
class _DesktopHomeViewState extends ConsumerState<DesktopHomeView> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Material(
|
||||
color: CFColors.almostWhite,
|
||||
child: Row(
|
||||
children: [
|
||||
const DesktopMenu(),
|
||||
Expanded(child: ref.watch(homeContent)),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
160
lib/pages_desktop_specific/home/desktop_menu.dart
Normal file
160
lib/pages_desktop_specific/home/desktop_menu.dart
Normal file
|
@ -0,0 +1,160 @@
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_svg/flutter_svg.dart';
|
||||
import 'package:stackwallet/pages_desktop_specific/home/desktop_menu_item.dart';
|
||||
import 'package:stackwallet/utilities/assets.dart';
|
||||
import 'package:stackwallet/utilities/cfcolors.dart';
|
||||
import 'package:stackwallet/utilities/text_styles.dart';
|
||||
|
||||
class DesktopMenu extends StatefulWidget {
|
||||
const DesktopMenu({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
State<DesktopMenu> createState() => _DesktopMenuState();
|
||||
}
|
||||
|
||||
class _DesktopMenuState extends State<DesktopMenu> {
|
||||
double _width = 225;
|
||||
int selectedMenuItem = 0;
|
||||
|
||||
void updateSelectedMenuItem(int index) {
|
||||
setState(() {
|
||||
selectedMenuItem = index;
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Material(
|
||||
color: CFColors.popupBackground,
|
||||
child: SizedBox(
|
||||
width: _width,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
const SizedBox(
|
||||
height: 22,
|
||||
),
|
||||
SizedBox(
|
||||
width: 70,
|
||||
height: 70,
|
||||
child: Image(
|
||||
image: AssetImage(
|
||||
Assets.png.splash,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 10,
|
||||
),
|
||||
Text(
|
||||
"Stack Wallet",
|
||||
style: STextStyles.desktopH2.copyWith(
|
||||
fontSize: 18,
|
||||
height: 23.4 / 18,
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 60,
|
||||
),
|
||||
SizedBox(
|
||||
width: _width - 32, // 16 padding on either side
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
DesktopMenuItem(
|
||||
icon: SvgPicture.asset(
|
||||
Assets.svg.bell,
|
||||
width: 20,
|
||||
height: 20,
|
||||
),
|
||||
label: "My Stack",
|
||||
value: 0,
|
||||
group: selectedMenuItem,
|
||||
onChanged: updateSelectedMenuItem,
|
||||
),
|
||||
DesktopMenuItem(
|
||||
icon: SvgPicture.asset(
|
||||
Assets.svg.bell,
|
||||
width: 20,
|
||||
height: 20,
|
||||
),
|
||||
label: "Exchange",
|
||||
value: 1,
|
||||
group: selectedMenuItem,
|
||||
onChanged: updateSelectedMenuItem,
|
||||
),
|
||||
DesktopMenuItem(
|
||||
icon: SvgPicture.asset(
|
||||
Assets.svg.bell,
|
||||
width: 20,
|
||||
height: 20,
|
||||
),
|
||||
label: "Notifications",
|
||||
value: 2,
|
||||
group: selectedMenuItem,
|
||||
onChanged: updateSelectedMenuItem,
|
||||
),
|
||||
DesktopMenuItem(
|
||||
icon: SvgPicture.asset(
|
||||
Assets.svg.bell,
|
||||
width: 20,
|
||||
height: 20,
|
||||
),
|
||||
label: "Address Book",
|
||||
value: 3,
|
||||
group: selectedMenuItem,
|
||||
onChanged: updateSelectedMenuItem,
|
||||
),
|
||||
DesktopMenuItem(
|
||||
icon: SvgPicture.asset(
|
||||
Assets.svg.bell,
|
||||
width: 20,
|
||||
height: 20,
|
||||
),
|
||||
label: "Settings",
|
||||
value: 4,
|
||||
group: selectedMenuItem,
|
||||
onChanged: updateSelectedMenuItem,
|
||||
),
|
||||
DesktopMenuItem(
|
||||
icon: SvgPicture.asset(
|
||||
Assets.svg.bell,
|
||||
width: 20,
|
||||
height: 20,
|
||||
),
|
||||
label: "Support",
|
||||
value: 5,
|
||||
group: selectedMenuItem,
|
||||
onChanged: updateSelectedMenuItem,
|
||||
),
|
||||
DesktopMenuItem(
|
||||
icon: SvgPicture.asset(
|
||||
Assets.svg.bell,
|
||||
width: 20,
|
||||
height: 20,
|
||||
),
|
||||
label: "About",
|
||||
value: 6,
|
||||
group: selectedMenuItem,
|
||||
onChanged: updateSelectedMenuItem,
|
||||
),
|
||||
DesktopMenuItem(
|
||||
icon: SvgPicture.asset(
|
||||
Assets.svg.bell,
|
||||
width: 20,
|
||||
height: 20,
|
||||
),
|
||||
label: "Exit",
|
||||
value: 7,
|
||||
group: selectedMenuItem,
|
||||
onChanged: updateSelectedMenuItem,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
52
lib/pages_desktop_specific/home/desktop_menu_item.dart
Normal file
52
lib/pages_desktop_specific/home/desktop_menu_item.dart
Normal file
|
@ -0,0 +1,52 @@
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:stackwallet/utilities/cfcolors.dart';
|
||||
import 'package:stackwallet/utilities/text_styles.dart';
|
||||
|
||||
class DesktopMenuItem<T> extends StatelessWidget {
|
||||
const DesktopMenuItem({
|
||||
Key? key,
|
||||
required this.icon,
|
||||
required this.label,
|
||||
required this.value,
|
||||
required this.group,
|
||||
required this.onChanged,
|
||||
}) : super(key: key);
|
||||
|
||||
final Widget icon;
|
||||
final String label;
|
||||
final T value;
|
||||
final T group;
|
||||
final void Function(T) onChanged;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return TextButton(
|
||||
style: value == group
|
||||
? CFColors.getDesktopMenuButtonColorSelected(context)
|
||||
: CFColors.getDesktopMenuButtonColor(context),
|
||||
onPressed: () {
|
||||
onChanged(value);
|
||||
},
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
vertical: 16,
|
||||
horizontal: 16,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
icon,
|
||||
const SizedBox(
|
||||
width: 12,
|
||||
),
|
||||
Text(
|
||||
label,
|
||||
style: value == group
|
||||
? STextStyles.desktopMenuItemSelected
|
||||
: STextStyles.desktopMenuItem,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
|
@ -76,6 +76,7 @@ import 'package:stackwallet/pages/wallet_view/transaction_views/transaction_sear
|
|||
import 'package:stackwallet/pages/wallet_view/wallet_view.dart';
|
||||
import 'package:stackwallet/pages/wallets_view/wallets_view.dart';
|
||||
import 'package:stackwallet/pages_desktop_specific/create_password/create_password_view.dart';
|
||||
import 'package:stackwallet/pages_desktop_specific/home/desktop_home_view.dart';
|
||||
import 'package:stackwallet/services/coins/manager.dart';
|
||||
import 'package:stackwallet/services/event_bus/events/global/node_connection_status_changed_event.dart';
|
||||
import 'package:stackwallet/services/event_bus/events/global/wallet_sync_status_changed_event.dart';
|
||||
|
@ -884,6 +885,12 @@ class RouteGenerator {
|
|||
builder: (_) => const CreatePasswordView(),
|
||||
settings: RouteSettings(name: settings.name));
|
||||
|
||||
case DesktopHomeView.routeName:
|
||||
return getRoute(
|
||||
shouldUseMaterialRoute: useMaterialPageRoute,
|
||||
builder: (_) => const DesktopHomeView(),
|
||||
settings: RouteSettings(name: settings.name));
|
||||
|
||||
// == End of desktop specific routes =======================================
|
||||
|
||||
default:
|
||||
|
|
|
@ -147,6 +147,10 @@ abstract class CFColors {
|
|||
}
|
||||
|
||||
// new
|
||||
|
||||
static const Color popupBackground = Color(0xFFFFFFFF);
|
||||
static const Color background = Color(0xFFF7F7F7);
|
||||
|
||||
static const Color textDark = Color(0xFF232323);
|
||||
static const Color textSubtitle1 = Color(0xFF8E9192);
|
||||
static const Color textSubtitle2 = Color(0xFFA9ACAC);
|
||||
|
@ -183,4 +187,18 @@ abstract class CFColors {
|
|||
CFColors.textFieldDefaultBackground,
|
||||
),
|
||||
);
|
||||
|
||||
static ButtonStyle? getDesktopMenuButtonColor(BuildContext context) =>
|
||||
Theme.of(context).textButtonTheme.style?.copyWith(
|
||||
backgroundColor: MaterialStateProperty.all<Color>(
|
||||
CFColors.popupBackground,
|
||||
),
|
||||
);
|
||||
|
||||
static ButtonStyle? getDesktopMenuButtonColorSelected(BuildContext context) =>
|
||||
Theme.of(context).textButtonTheme.style?.copyWith(
|
||||
backgroundColor: MaterialStateProperty.all<Color>(
|
||||
CFColors.textFieldDefaultBackground,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
|
|
@ -200,4 +200,17 @@ class STextStyles {
|
|||
fontSize: 20,
|
||||
height: 30 / 20,
|
||||
);
|
||||
|
||||
static final TextStyle desktopMenuItem = GoogleFonts.inter(
|
||||
color: CFColors.textDark.withOpacity(0.8),
|
||||
fontWeight: FontWeight.w500,
|
||||
fontSize: 16,
|
||||
height: 20.8 / 16,
|
||||
);
|
||||
static final TextStyle desktopMenuItemSelected = GoogleFonts.inter(
|
||||
color: CFColors.textDark,
|
||||
fontWeight: FontWeight.w500,
|
||||
fontSize: 16,
|
||||
height: 20.8 / 16,
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue