import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; import 'package:flutter_spinkit/flutter_spinkit.dart'; import 'package:flutter_wisetronic/widgets/general/breadcrumbs.dart'; import 'package:fluttertoast/fluttertoast.dart'; import '../../constants.dart'; import '../../events/eventbus.dart'; import '../../events/events.dart'; import '../../generated/l10n.dart'; import '../../models/user.dart'; import '../../routes.dart'; import '../../store/actions.dart'; import '../../store/store.dart'; import '../../utils/util_web.dart' if (dart.library.io) '../../utils/util_io.dart'; import '../../utils/utils.dart'; MediaQueryData mediaQuery; double statusBarHeight; double screenHeight; class DesktopMe extends StatefulWidget { final Key key; const DesktopMe({this.key}) : super(key: key); @override State createState() { return DesktopMeState(); } } class DesktopMeState extends State { int userId; String accessToken; bool isLoading; User _user; double sideSpace = 0; double mainSpace = 1200; double division = 3; @override Widget build(BuildContext context) { store.dispatch(UpdateContext(context)); if (MediaQuery.of(context).size.width <= 1200) { mainSpace = MediaQuery.of(context).size.width; sideSpace = 0; } else { mainSpace = 1200; sideSpace = (MediaQuery.of(context).size.width - 1200) / 2; } if (isLoading) { return new Scaffold( body: Center( child: SpinKitWave( color: Colors.lightBlueAccent, size: 40.0, ), ), ); } mediaQuery ??= MediaQuery.of(context); screenHeight ??= mediaQuery.size.height; statusBarHeight ??= mediaQuery.padding.top; Widget userInfo = GestureDetector( child: Container( padding: EdgeInsets.only(left: 16.0, right: 16.0, top: 12.0, bottom: 5.0), color: Colors.transparent, child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( margin: EdgeInsets.only(right: 5.0), child: _user != null && _user.avatarUrl.isNotEmpty ? Util.showImage( 'https:${_user.avatarUrl}', width: 60, height: 60, fit: BoxFit.fill, errorWidget: (context, url, error) => Icon( Icons.account_circle, size: 60.0, color: Colors.blue, ), ) : Icon( Icons.person_outline, size: 60.0, color: Colors.black38, ), ), Container( child: Text( _user != null ? _user.nickname : S.of(context).please_login, style: TextStyle( color: Colors.black38, fontSize: 18.0, ), ), ), Visibility( visible: _user != null, child: Container( child: Row( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( child: Icon( Icons.phone_iphone, color: Colors.blue, size: 20.0, ), ), Container( child: Text( _user != null ? Utils.safePhoneNumber(_user.mobile) : '', style: TextStyle( color: Colors.black38, fontSize: 14.0, ), ), ) ], ), ), ), ], ), ), onTap: () { if (_user != null) { Routes.router.navigateTo(context, '/user-profile'); } else { Routes.router.navigateTo(context, '/login'); } }, ); Widget widget = SingleChildScrollView( child: Column( children: [ Row( children: [ Container( width: sideSpace, ), Container( width: mainSpace, child: Column( children: [ Row( children: [ Expanded( child: MouseRegion( cursor: SystemMouseCursors.click, child: userInfo, ), ), Expanded( child: Container( padding: EdgeInsets.only( left: 16.0, right: 16.0, top: 16.0, bottom: 16.0), child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( child: Text( _user != null ? '${_user.wallet.toStringAsFixed(2)}' : '0.00', style: TextStyle( fontSize: 24.0, color: Colors.redAccent, ), ), ), Container( child: Text( S.of(context).wallet, style: TextStyle( fontSize: 12.0, color: Colors.grey, ), ), ) ], ), decoration: BoxDecoration( border: Border( bottom: BorderSide( color: Colors.black12, width: 6.0, ), right: BorderSide( color: Colors.black12, width: 1.0, ), ), ), ), ), Expanded( child: GestureDetector( child: Container( padding: EdgeInsets.only( left: 16.0, right: 16.0, top: 16.0, bottom: 16.0), child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( child: Text( _user != null ? '${_user.coupon}' : '0', style: TextStyle( fontSize: 24.0, color: Colors.orangeAccent, ), ), ), Container( child: Text( S.of(context).red_coupon, style: TextStyle( fontSize: 12.0, color: Colors.grey, ), ), ) ], ), decoration: BoxDecoration( border: Border( bottom: BorderSide( color: Colors.black12, width: 6.0, ), right: BorderSide( color: Colors.black12, width: 1.0, ), ), ), ), onTap: () { if (_user != null) { Routes.router.navigateTo( context, '/coupons/${_user.id}'); } else { _pleaseLoginToast(); } }, ), ), Expanded( child: Container( padding: EdgeInsets.only( left: 16.0, right: 16.0, top: 16.0, bottom: 16.0), child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( child: Text( _user != null ? '${_user.points}' : '0', style: TextStyle( fontSize: 24.0, color: Colors.lightGreen, ), ), ), Container( child: Text( S.of(context).point, style: TextStyle( fontSize: 12.0, color: Colors.grey, ), ), ) ], ), decoration: BoxDecoration( border: Border( bottom: BorderSide( color: Colors.black12, width: 6.0, ), ), ), ), ), ], ), Wrap( children: [ getLinkItem( mainSpace / division, 200.0, Icon( Icons.lock, size: 60.0, color: Colors.lightBlueAccent, ), Text(S.of(context).change_password), () { if (_user != null) { Routes.router.navigateTo( context, '/change-password', ); } else { _pleaseLoginToast(); } }, ), getLinkItem( mainSpace / division, 200.0, Icon( Icons.sticky_note_2_outlined, size: 60.0, color: Colors.lightBlueAccent, ), Text(S.of(context).my_orders), () { if (_user != null) { Routes.router.navigateTo(context, '/orders'); } else { _pleaseLoginToast(); } }, ), getLinkItem( mainSpace / division, 200.0, Icon( Icons.location_on, size: 60.0, color: Colors.lightBlueAccent, ), Text(S.of(context).my_addresses), () { if (_user != null) { Routes.router .navigateTo(context, '/my-addresses/-1'); } else { _pleaseLoginToast(); } }, ), getLinkItem( mainSpace / division, 200.0, Icon( Icons.credit_card, size: 60.0, color: Colors.lightBlueAccent, ), Text(S.of(context).my_cards), () { if (_user != null) { Routes.router.navigateTo(context, '/my-cards'); } else { _pleaseLoginToast(); } }, ), getLinkItem( mainSpace / division, 200.0, Icon( Icons.support_agent, size: 60.0, color: Colors.lightBlueAccent, ), Text(S.of(context).my_support), () { if (_user != null) { Routes.router.navigateTo(context, '/my-support/${Constants.BUSINESS_ID}'); } else { _pleaseLoginToast(); } }, ), ], ), ], ), ), Container( width: sideSpace, ), ], ), ], ), ); return widget; } @override void initState() { super.initState(); setState(() { isLoading = true; _user = null; }); eventBus.on().listen((event) { if (mounted) { setState(() { isLoading = false; _user = store.state.user; }); } }); eventBus.on().listen((event) { if (mounted) { setState(() { isLoading = false; _user = null; }); } }); Utils.getCurrentUser(); } void _toLogin() { Routes.router .navigateTo(context, '/login', replace: true, clearStack: true); } _pleaseLoginToast() { Fluttertoast.showToast( msg: S.of(context).please_login, toastLength: Toast.LENGTH_SHORT, gravity: ToastGravity.CENTER, backgroundColor: Colors.black54, textColor: Colors.white); } Widget getLinkItem( double width, double height, Icon icon, Text label, Function tap) { Widget widget = MouseRegion( cursor: SystemMouseCursors.click, child: GestureDetector( child: Container( width: width, height: height, padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 8.0), child: Container( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( child: icon, ), Container( child: label, ), ], ), decoration: BoxDecoration( shape: BoxShape.rectangle, border: new Border.all( color: Colors.black12, width: 1.0, ), borderRadius: BorderRadius.all(Radius.circular(10.0)), ), ), ), onTap: tap, ), ); return widget; } }