basic desktop home view and menu outlines

This commit is contained in:
julian 2022-09-15 15:38:30 -06:00
parent a587024fab
commit 497d0f1555
7 changed files with 287 additions and 21 deletions

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/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(

View 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)),
],
),
);
}
}

View 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,
),
],
),
),
],
),
),
);
}
}

View 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,
),
],
),
),
);
}
}

View file

@ -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:

View file

@ -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,
),
);
}

View file

@ -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,
);
}