1430 lines
82 KiB
Dart
1430 lines
82 KiB
Dart
import '/components/popup/popup_widget.dart';
|
|
import 'package:flutterflow_ui/flutterflow_ui.dart';
|
|
import 'package:cached_network_image/cached_network_image.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_animate/flutter_animate.dart';
|
|
import 'package:google_fonts/google_fonts.dart';
|
|
import 'package:provider/provider.dart';
|
|
|
|
import 'package:app/theme.dart';
|
|
|
|
import 'settings_model.dart';
|
|
export 'settings_model.dart';
|
|
|
|
class SettingsWidget extends StatefulWidget {
|
|
const SettingsWidget({super.key});
|
|
|
|
@override
|
|
State<SettingsWidget> createState() => _SettingsWidgetState();
|
|
}
|
|
|
|
class _SettingsWidgetState extends State<SettingsWidget>
|
|
with TickerProviderStateMixin {
|
|
late SettingsModel _model;
|
|
|
|
final scaffoldKey = GlobalKey<ScaffoldState>();
|
|
|
|
final animationsMap = <String, AnimationInfo>{};
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_model = createModel(context, () => SettingsModel());
|
|
|
|
animationsMap.addAll({
|
|
'containerOnPageLoadAnimation1': AnimationInfo(
|
|
trigger: AnimationTrigger.onPageLoad,
|
|
effectsBuilder: () => [
|
|
FadeEffect(
|
|
curve: Curves.easeInOut,
|
|
delay: 0.0.ms,
|
|
duration: 600.0.ms,
|
|
begin: 0.0,
|
|
end: 1.0,
|
|
),
|
|
MoveEffect(
|
|
curve: Curves.easeInOut,
|
|
delay: 0.0.ms,
|
|
duration: 600.0.ms,
|
|
begin: const Offset(0.0, 90.0),
|
|
end: const Offset(0.0, 0.0),
|
|
),
|
|
],
|
|
),
|
|
'containerOnPageLoadAnimation2': AnimationInfo(
|
|
trigger: AnimationTrigger.onPageLoad,
|
|
effectsBuilder: () => [
|
|
FadeEffect(
|
|
curve: Curves.easeInOut,
|
|
delay: 0.0.ms,
|
|
duration: 600.0.ms,
|
|
begin: 0.0,
|
|
end: 1.0,
|
|
),
|
|
MoveEffect(
|
|
curve: Curves.easeInOut,
|
|
delay: 0.0.ms,
|
|
duration: 600.0.ms,
|
|
begin: const Offset(0.0, 90.0),
|
|
end: const Offset(0.0, 0.0),
|
|
),
|
|
],
|
|
),
|
|
});
|
|
setupAnimations(
|
|
animationsMap.values.where((anim) =>
|
|
anim.trigger == AnimationTrigger.onActionTrigger ||
|
|
!anim.applyInitialState),
|
|
this,
|
|
);
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_model.dispose();
|
|
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
key: scaffoldKey,
|
|
backgroundColor: AppTheme.secondaryBackground,
|
|
appBar: MediaQuery.sizeOf(context).width <= 991.0
|
|
? AppBar(
|
|
backgroundColor: AppTheme.secondaryBackground,
|
|
automaticallyImplyLeading: false,
|
|
title: const Text(
|
|
'My Profile',
|
|
style: AppTheme.headlineMedium,
|
|
),
|
|
actions: const [],
|
|
centerTitle: false,
|
|
elevation: 0,
|
|
)
|
|
: null,
|
|
body: SafeArea(
|
|
top: true,
|
|
child: Stack(
|
|
children: [
|
|
Row(
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
if (responsiveVisibility(
|
|
context: context,
|
|
phone: false,
|
|
tablet: false,
|
|
))
|
|
Container(
|
|
width: 270,
|
|
height: double.infinity,
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.primaryBackground,
|
|
borderRadius: BorderRadius.circular(0),
|
|
border: Border.all(
|
|
color: AppTheme.alternate,
|
|
width: 1,
|
|
),
|
|
),
|
|
child: Padding(
|
|
padding: const EdgeInsetsDirectional.fromSTEB(0, 24, 0, 16),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.max,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Padding(
|
|
padding:
|
|
EdgeInsetsDirectional.fromSTEB(16, 0, 16, 12),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
Icon(
|
|
Icons.add_task_rounded,
|
|
color: AppTheme.primary,
|
|
size: 32,
|
|
),
|
|
Padding(
|
|
padding: EdgeInsetsDirectional.fromSTEB(
|
|
12, 0, 0, 0),
|
|
child: Text(
|
|
'check.io',
|
|
style: AppTheme.headlineMedium,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const Divider(
|
|
height: 12,
|
|
thickness: 2,
|
|
color: AppTheme.alternate,
|
|
),
|
|
Expanded(
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.max,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Padding(
|
|
padding: EdgeInsetsDirectional.fromSTEB(
|
|
16, 12, 0, 0),
|
|
child: Text(
|
|
'Platform Navigation',
|
|
style: AppTheme.labelMedium,
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsetsDirectional.fromSTEB(
|
|
16, 0, 16, 0),
|
|
child: AnimatedContainer(
|
|
duration: const Duration(milliseconds: 200),
|
|
curve: Curves.easeInOut,
|
|
width: double.infinity,
|
|
height: 44,
|
|
decoration: BoxDecoration(
|
|
color: AppTheme
|
|
.primaryBackground,
|
|
borderRadius: BorderRadius.circular(12),
|
|
shape: BoxShape.rectangle,
|
|
),
|
|
child: const Padding(
|
|
padding: EdgeInsetsDirectional.fromSTEB(
|
|
8, 0, 6, 0),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
Icon(
|
|
Icons.space_dashboard,
|
|
color: AppTheme.primaryTextColor,
|
|
size: 24,
|
|
),
|
|
Padding(
|
|
padding:
|
|
EdgeInsetsDirectional.fromSTEB(
|
|
12, 0, 0, 0),
|
|
child: Text(
|
|
'Dashboard',
|
|
style:
|
|
AppTheme.bodyMedium,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsetsDirectional.fromSTEB(
|
|
16, 0, 16, 0),
|
|
child: AnimatedContainer(
|
|
duration: const Duration(milliseconds: 200),
|
|
curve: Curves.easeInOut,
|
|
width: double.infinity,
|
|
height: 44,
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.primaryBackground,
|
|
borderRadius: BorderRadius.circular(12),
|
|
shape: BoxShape.rectangle,
|
|
),
|
|
child: const Padding(
|
|
padding: EdgeInsetsDirectional.fromSTEB(
|
|
8, 0, 6, 0),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
Icon(
|
|
Icons.forum_rounded,
|
|
color: AppTheme.primaryTextColor,
|
|
size: 24,
|
|
),
|
|
Padding(
|
|
padding:
|
|
EdgeInsetsDirectional.fromSTEB(
|
|
12, 0, 0, 0),
|
|
child: Text(
|
|
'Chats',
|
|
style: AppTheme.bodyMedium,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsetsDirectional.fromSTEB(
|
|
16, 0, 16, 0),
|
|
child: AnimatedContainer(
|
|
duration: const Duration(milliseconds: 200),
|
|
curve: Curves.easeInOut,
|
|
width: double.infinity,
|
|
height: 44,
|
|
decoration: BoxDecoration(
|
|
color: AppTheme
|
|
.primaryBackground,
|
|
borderRadius: BorderRadius.circular(12),
|
|
shape: BoxShape.rectangle,
|
|
),
|
|
child: const Padding(
|
|
padding: EdgeInsetsDirectional.fromSTEB(
|
|
8, 0, 6, 0),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
Icon(
|
|
Icons.work,
|
|
color: AppTheme.primaryTextColor,
|
|
size: 24,
|
|
),
|
|
Padding(
|
|
padding:
|
|
EdgeInsetsDirectional.fromSTEB(
|
|
12, 0, 0, 0),
|
|
child: Text(
|
|
'Projects',
|
|
style: AppTheme.bodyMedium,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsetsDirectional.fromSTEB(
|
|
16, 0, 16, 0),
|
|
child: AnimatedContainer(
|
|
duration: const Duration(milliseconds: 200),
|
|
curve: Curves.easeInOut,
|
|
width: double.infinity,
|
|
height: 44,
|
|
decoration: BoxDecoration(
|
|
color:
|
|
AppTheme.accent1,
|
|
borderRadius: BorderRadius.circular(12),
|
|
shape: BoxShape.rectangle,
|
|
),
|
|
child: Padding(
|
|
padding: const EdgeInsetsDirectional.fromSTEB(
|
|
8, 0, 6, 0),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
const Icon(
|
|
Icons.receipt_rounded,
|
|
color: AppTheme
|
|
.primary,
|
|
size: 24,
|
|
),
|
|
const Expanded(
|
|
child: Padding(
|
|
padding: EdgeInsetsDirectional
|
|
.fromSTEB(12, 0, 0, 0),
|
|
child: Text(
|
|
'Recent Orders',
|
|
style: AppTheme.bodyMedium,
|
|
),
|
|
),
|
|
),
|
|
Container(
|
|
height: 32,
|
|
decoration: BoxDecoration(
|
|
color:
|
|
AppTheme
|
|
.primary,
|
|
borderRadius:
|
|
BorderRadius.circular(8),
|
|
),
|
|
child: const Align(
|
|
alignment:
|
|
AlignmentDirectional(0, 0),
|
|
child: Padding(
|
|
padding: EdgeInsetsDirectional
|
|
.fromSTEB(8, 4, 8, 4),
|
|
child: Text(
|
|
'12',
|
|
style: AppTheme.bodyMedium,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
const Padding(
|
|
padding: EdgeInsetsDirectional.fromSTEB(
|
|
16, 0, 0, 0),
|
|
child: Text(
|
|
'Settings',
|
|
style: AppTheme.labelMedium,
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsetsDirectional.fromSTEB(
|
|
16, 0, 16, 0),
|
|
child: AnimatedContainer(
|
|
duration: const Duration(milliseconds: 200),
|
|
curve: Curves.easeInOut,
|
|
width: double.infinity,
|
|
height: 44,
|
|
decoration: BoxDecoration(
|
|
color: AppTheme
|
|
.primaryBackground,
|
|
borderRadius: BorderRadius.circular(12),
|
|
shape: BoxShape.rectangle,
|
|
),
|
|
child: const Padding(
|
|
padding: EdgeInsetsDirectional.fromSTEB(
|
|
8, 0, 6, 0),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
Icon(
|
|
Icons.attach_money_rounded,
|
|
color: AppTheme.primaryTextColor,
|
|
size: 24,
|
|
),
|
|
Padding(
|
|
padding:
|
|
EdgeInsetsDirectional.fromSTEB(
|
|
12, 0, 0, 0),
|
|
child: Text(
|
|
'Billing',
|
|
style:
|
|
AppTheme.bodyMedium,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsetsDirectional.fromSTEB(
|
|
16, 0, 16, 0),
|
|
child: AnimatedContainer(
|
|
duration: const Duration(milliseconds: 200),
|
|
curve: Curves.easeInOut,
|
|
width: double.infinity,
|
|
height: 44,
|
|
decoration: BoxDecoration(
|
|
color: AppTheme
|
|
.primaryBackground,
|
|
borderRadius: BorderRadius.circular(12),
|
|
shape: BoxShape.rectangle,
|
|
),
|
|
child: const Padding(
|
|
padding: EdgeInsetsDirectional.fromSTEB(
|
|
8, 0, 6, 0),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
Icon(
|
|
Icons.wifi_tethering_rounded,
|
|
color: AppTheme.primaryTextColor,
|
|
size: 24,
|
|
),
|
|
Padding(
|
|
padding:
|
|
EdgeInsetsDirectional.fromSTEB(
|
|
12, 0, 0, 0),
|
|
child: Text(
|
|
'Explore',
|
|
style:
|
|
AppTheme.bodyMedium,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
].divide(const SizedBox(height: 12)),
|
|
),
|
|
),
|
|
Align(
|
|
alignment: const AlignmentDirectional(0, -1),
|
|
child: Padding(
|
|
padding:
|
|
const EdgeInsetsDirectional.fromSTEB(0, 8, 0, 16),
|
|
child: Container(
|
|
width: 250,
|
|
height: 50,
|
|
decoration: BoxDecoration(
|
|
color: AppTheme
|
|
.primaryBackground,
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(
|
|
color:
|
|
AppTheme.alternate,
|
|
width: 1,
|
|
),
|
|
),
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(4),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.max,
|
|
mainAxisAlignment: MainAxisAlignment.start,
|
|
children: [
|
|
Expanded(
|
|
child: InkWell(
|
|
splashColor: Colors.transparent,
|
|
focusColor: Colors.transparent,
|
|
hoverColor: Colors.transparent,
|
|
highlightColor: Colors.transparent,
|
|
//TODO
|
|
// onTap: () async {
|
|
// setDarkModeSetting(
|
|
// context, AppThemeMode.light);
|
|
// },
|
|
child: Container(
|
|
width: 115,
|
|
height: 100,
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.primaryBackground,
|
|
borderRadius:
|
|
BorderRadius.circular(10),
|
|
border: Border.all(
|
|
color: valueOrDefault<Color>(
|
|
AppTheme.primaryBackground,
|
|
AppTheme.alternate,
|
|
),
|
|
width: 1,
|
|
),
|
|
),
|
|
child: const Row(
|
|
mainAxisSize: MainAxisSize.max,
|
|
mainAxisAlignment:
|
|
MainAxisAlignment.center,
|
|
children: [
|
|
Icon(
|
|
Icons.wb_sunny_rounded,
|
|
color: AppTheme.secondaryText,
|
|
size: 16,
|
|
),
|
|
Padding(
|
|
padding: EdgeInsetsDirectional
|
|
.fromSTEB(4, 0, 0, 0),
|
|
child: Text(
|
|
'Light Mode',
|
|
style: AppTheme.primaryText,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Expanded(
|
|
child: InkWell(
|
|
splashColor: Colors.transparent,
|
|
focusColor: Colors.transparent,
|
|
hoverColor: Colors.transparent,
|
|
highlightColor: Colors.transparent,
|
|
// TODO
|
|
// onTap: () async {
|
|
// setDarkModeSetting(
|
|
// context, AppThemeMode.dark);
|
|
// },
|
|
child: Container(
|
|
width: 115,
|
|
height: 100,
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.primaryBackground,
|
|
borderRadius:
|
|
BorderRadius.circular(10),
|
|
border: Border.all(
|
|
color: AppTheme.primaryBackground,
|
|
width: 1,
|
|
),
|
|
),
|
|
child: const Row(
|
|
mainAxisSize: MainAxisSize.max,
|
|
mainAxisAlignment:
|
|
MainAxisAlignment.center,
|
|
children: [
|
|
Icon(
|
|
Icons.nightlight_round,
|
|
color: AppTheme.primaryTextColor,
|
|
size: 16,
|
|
),
|
|
Padding(
|
|
padding: EdgeInsetsDirectional
|
|
.fromSTEB(4, 0, 0, 0),
|
|
child: Text(
|
|
'Dark Mode',
|
|
style: AppTheme.bodyMedium,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
const Divider(
|
|
height: 12,
|
|
thickness: 2,
|
|
color: AppTheme.alternate,
|
|
),
|
|
Padding(
|
|
padding:
|
|
const EdgeInsetsDirectional.fromSTEB(16, 12, 16, 12),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
Container(
|
|
width: 50,
|
|
height: 50,
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.accent1,
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(
|
|
color:
|
|
AppTheme.primary,
|
|
width: 2,
|
|
),
|
|
),
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(2),
|
|
child: ClipRRect(
|
|
borderRadius: BorderRadius.circular(8),
|
|
child: CachedNetworkImage(
|
|
fadeInDuration:
|
|
const Duration(milliseconds: 500),
|
|
fadeOutDuration:
|
|
const Duration(milliseconds: 500),
|
|
imageUrl:
|
|
'https://images.unsplash.com/photo-1624561172888-ac93c696e10c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NjJ8fHVzZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60',
|
|
width: 44,
|
|
height: 44,
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
const Expanded(
|
|
child: Padding(
|
|
padding: EdgeInsetsDirectional.fromSTEB(
|
|
12, 0, 0, 0),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.max,
|
|
crossAxisAlignment:
|
|
CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'Casper Ghost',
|
|
style: AppTheme.bodyLarge,
|
|
),
|
|
Text(
|
|
'admin@gmail.com',
|
|
style: AppTheme.labelMedium,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const Padding(
|
|
padding:
|
|
EdgeInsetsDirectional.fromSTEB(16, 0, 16, 0),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.max,
|
|
mainAxisAlignment: MainAxisAlignment.end,
|
|
children: [
|
|
Icon(
|
|
Icons.menu_open_rounded,
|
|
color: AppTheme
|
|
.secondaryText,
|
|
size: 24,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
Expanded(
|
|
child: Align(
|
|
alignment: const AlignmentDirectional(0, 0),
|
|
child: SingleChildScrollView(
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
if (responsiveVisibility(
|
|
context: context,
|
|
phone: false,
|
|
tablet: false,
|
|
))
|
|
Container(
|
|
width: double.infinity,
|
|
height: 24,
|
|
decoration: const BoxDecoration(),
|
|
),
|
|
Align(
|
|
alignment: const AlignmentDirectional(0, -1),
|
|
child: Padding(
|
|
padding:
|
|
const EdgeInsetsDirectional.fromSTEB(16, 16, 16, 0),
|
|
child: Wrap(
|
|
spacing: 16,
|
|
runSpacing: 16,
|
|
alignment: WrapAlignment.center,
|
|
crossAxisAlignment: WrapCrossAlignment.start,
|
|
direction: Axis.horizontal,
|
|
runAlignment: WrapAlignment.center,
|
|
verticalDirection: VerticalDirection.down,
|
|
clipBehavior: Clip.none,
|
|
children: [
|
|
Container(
|
|
width: double.infinity,
|
|
constraints: const BoxConstraints(
|
|
maxWidth: 390,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: AppTheme
|
|
.secondaryBackground,
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(
|
|
color: AppTheme
|
|
.alternate,
|
|
width: 1,
|
|
),
|
|
),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.all(16),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
Container(
|
|
width: 72,
|
|
height: 72,
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.accent1,
|
|
borderRadius:
|
|
BorderRadius.circular(12),
|
|
border: Border.all(
|
|
color: AppTheme.primary,
|
|
width: 2,
|
|
),
|
|
),
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(2),
|
|
child: ClipRRect(
|
|
borderRadius:
|
|
BorderRadius.circular(
|
|
8),
|
|
child: CachedNetworkImage(
|
|
fadeInDuration: const Duration(
|
|
milliseconds: 500),
|
|
fadeOutDuration: const Duration(
|
|
milliseconds: 500),
|
|
imageUrl:
|
|
'https://images.unsplash.com/photo-1624561172888-ac93c696e10c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NjJ8fHVzZXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60',
|
|
width: 44,
|
|
height: 44,
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
const Expanded(
|
|
child: Padding(
|
|
padding: EdgeInsetsDirectional
|
|
.fromSTEB(16, 4, 0, 4),
|
|
child: Column(
|
|
mainAxisSize:
|
|
MainAxisSize.max,
|
|
crossAxisAlignment:
|
|
CrossAxisAlignment
|
|
.start,
|
|
children: [
|
|
Text(
|
|
'Casper Ghost',
|
|
style: AppTheme.headlineSmall,
|
|
),
|
|
Padding(
|
|
padding:
|
|
EdgeInsetsDirectional
|
|
.fromSTEB(
|
|
0, 4, 0, 0),
|
|
child: Text(
|
|
'casper@ghustbusters.com',
|
|
style: AppTheme.labelMedium,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const Divider(
|
|
height: 2,
|
|
thickness: 1,
|
|
color: AppTheme
|
|
.alternate,
|
|
),
|
|
Row(
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
Expanded(
|
|
child: Padding(
|
|
padding: const EdgeInsetsDirectional
|
|
.fromSTEB(0, 0, 0, 12),
|
|
child: Container(
|
|
width: 200,
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.secondaryBackground,
|
|
borderRadius:
|
|
BorderRadius.circular(
|
|
8),
|
|
),
|
|
child: const Padding(
|
|
padding:
|
|
EdgeInsetsDirectional
|
|
.fromSTEB(
|
|
12, 12, 12, 0),
|
|
child: Column(
|
|
mainAxisSize:
|
|
MainAxisSize.max,
|
|
mainAxisAlignment:
|
|
MainAxisAlignment
|
|
.center,
|
|
children: [
|
|
Icon(
|
|
Icons.receipt_rounded,
|
|
color: AppTheme.primary,
|
|
size: 44,
|
|
),
|
|
Padding(
|
|
padding:
|
|
EdgeInsetsDirectional
|
|
.fromSTEB(0,
|
|
8, 0, 4),
|
|
child: Text(
|
|
'2,200',
|
|
textAlign: TextAlign
|
|
.center,
|
|
style: AppTheme.headlineSmall,
|
|
),
|
|
),
|
|
Text(
|
|
'Orders Placed',
|
|
textAlign:
|
|
TextAlign.center,
|
|
style: AppTheme.labelMedium,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
).animateOnPageLoad(animationsMap[
|
|
'containerOnPageLoadAnimation1']!),
|
|
),
|
|
),
|
|
Expanded(
|
|
child: Padding(
|
|
padding: const EdgeInsetsDirectional
|
|
.fromSTEB(0, 0, 0, 12),
|
|
child: Container(
|
|
width: 200,
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.secondaryBackground,
|
|
borderRadius:
|
|
BorderRadius.circular(
|
|
8),
|
|
),
|
|
child: const Padding(
|
|
padding:
|
|
EdgeInsetsDirectional
|
|
.fromSTEB(
|
|
12, 12, 12, 0),
|
|
child: Column(
|
|
mainAxisSize:
|
|
MainAxisSize.max,
|
|
mainAxisAlignment:
|
|
MainAxisAlignment
|
|
.center,
|
|
children: [
|
|
Icon(
|
|
Icons
|
|
.ssid_chart_rounded,
|
|
color: AppTheme.primary,
|
|
size: 44,
|
|
),
|
|
Padding(
|
|
padding:
|
|
EdgeInsetsDirectional
|
|
.fromSTEB(0,
|
|
8, 0, 4),
|
|
child: Text(
|
|
'\$212.4k',
|
|
textAlign: TextAlign
|
|
.center,
|
|
style: AppTheme.headlineSmall,
|
|
),
|
|
),
|
|
Text(
|
|
'Money Earned',
|
|
textAlign:
|
|
TextAlign.center,
|
|
style: AppTheme.labelMedium,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
).animateOnPageLoad(animationsMap[
|
|
'containerOnPageLoadAnimation2']!),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Container(
|
|
width: double.infinity,
|
|
constraints: const BoxConstraints(
|
|
maxWidth: 470,
|
|
),
|
|
decoration: const BoxDecoration(),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.max,
|
|
crossAxisAlignment:
|
|
CrossAxisAlignment.start,
|
|
children: [
|
|
Container(
|
|
width: double.infinity,
|
|
decoration: BoxDecoration(
|
|
color: AppTheme
|
|
.primaryBackground,
|
|
borderRadius:
|
|
BorderRadius.circular(12),
|
|
border: Border.all(
|
|
color:
|
|
AppTheme
|
|
.alternate,
|
|
),
|
|
),
|
|
child: const Padding(
|
|
padding:
|
|
EdgeInsetsDirectional.fromSTEB(
|
|
16, 12, 0, 12),
|
|
child: Text(
|
|
'My Account Information',
|
|
style:
|
|
AppTheme.labelMedium,
|
|
),
|
|
),
|
|
),
|
|
Padding(
|
|
padding:
|
|
const EdgeInsetsDirectional.fromSTEB(
|
|
0, 0, 0, 1),
|
|
child: Container(
|
|
width: double.infinity,
|
|
height: 60,
|
|
decoration: const BoxDecoration(
|
|
color:
|
|
AppTheme
|
|
.secondaryBackground,
|
|
boxShadow: [
|
|
BoxShadow(
|
|
blurRadius: 0,
|
|
color: AppTheme.alternate,
|
|
offset: Offset(
|
|
0,
|
|
1,
|
|
),
|
|
)
|
|
],
|
|
shape: BoxShape.rectangle,
|
|
),
|
|
child: const Padding(
|
|
padding: EdgeInsetsDirectional
|
|
.fromSTEB(16, 0, 16, 0),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.max,
|
|
mainAxisAlignment:
|
|
MainAxisAlignment.center,
|
|
children: [
|
|
Row(
|
|
mainAxisSize:
|
|
MainAxisSize.max,
|
|
children: [
|
|
Text(
|
|
'Change Password',
|
|
style: AppTheme.bodyLarge,
|
|
),
|
|
Expanded(
|
|
child: Align(
|
|
alignment:
|
|
AlignmentDirectional(
|
|
1, 0),
|
|
child: Icon(
|
|
Icons
|
|
.chevron_right_rounded,
|
|
color: AppTheme.secondaryText,
|
|
size: 20,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Padding(
|
|
padding:
|
|
const EdgeInsetsDirectional.fromSTEB(
|
|
0, 0, 0, 1),
|
|
child: Container(
|
|
width: double.infinity,
|
|
height: 60,
|
|
decoration: const BoxDecoration(
|
|
color:
|
|
AppTheme
|
|
.secondaryBackground,
|
|
boxShadow: [
|
|
BoxShadow(
|
|
blurRadius: 0,
|
|
color: AppTheme.alternate,
|
|
offset: Offset(
|
|
0,
|
|
1,
|
|
),
|
|
)
|
|
],
|
|
shape: BoxShape.rectangle,
|
|
),
|
|
child: const Padding(
|
|
padding: EdgeInsetsDirectional
|
|
.fromSTEB(16, 0, 16, 0),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.max,
|
|
mainAxisAlignment:
|
|
MainAxisAlignment.center,
|
|
children: [
|
|
Row(
|
|
mainAxisSize:
|
|
MainAxisSize.max,
|
|
children: [
|
|
Text(
|
|
'Edit Profile',
|
|
style: AppTheme.bodyLarge,
|
|
),
|
|
Expanded(
|
|
child: Align(
|
|
alignment:
|
|
AlignmentDirectional(
|
|
1, 0),
|
|
child: Icon(
|
|
Icons
|
|
.chevron_right_rounded,
|
|
color: AppTheme.secondaryText,
|
|
size: 20,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Padding(
|
|
padding:
|
|
const EdgeInsetsDirectional.fromSTEB(
|
|
0, 12, 0, 0),
|
|
child: Container(
|
|
width: double.infinity,
|
|
decoration: BoxDecoration(
|
|
color:
|
|
AppTheme
|
|
.primaryBackground,
|
|
borderRadius:
|
|
BorderRadius.circular(12),
|
|
border: Border.all(
|
|
color:
|
|
AppTheme
|
|
.alternate,
|
|
),
|
|
),
|
|
child: const Padding(
|
|
padding: EdgeInsetsDirectional
|
|
.fromSTEB(16, 12, 0, 12),
|
|
child: Text(
|
|
'Support',
|
|
style:
|
|
AppTheme.labelMedium,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Padding(
|
|
padding:
|
|
const EdgeInsetsDirectional.fromSTEB(
|
|
0, 0, 0, 1),
|
|
child: InkWell(
|
|
splashColor: Colors.transparent,
|
|
focusColor: Colors.transparent,
|
|
hoverColor: Colors.transparent,
|
|
highlightColor: Colors.transparent,
|
|
// TODO
|
|
// onTap: () async {
|
|
// context.pushNamed(
|
|
// 'SupportForm',
|
|
// extra: <String, dynamic>{
|
|
// kTransitionInfoKey:
|
|
// TransitionInfo(
|
|
// hasTransition: true,
|
|
// transitionType:
|
|
// PageTransitionType
|
|
// .rightToLeft,
|
|
// duration: const Duration(
|
|
// milliseconds: 250),
|
|
// ),
|
|
// },
|
|
// );
|
|
// },
|
|
child: Container(
|
|
width: double.infinity,
|
|
height: 60,
|
|
decoration: const BoxDecoration(
|
|
color:
|
|
AppTheme
|
|
.secondaryBackground,
|
|
boxShadow: [
|
|
BoxShadow(
|
|
blurRadius: 0,
|
|
color: AppTheme.alternate,
|
|
offset: Offset(
|
|
0,
|
|
1,
|
|
),
|
|
)
|
|
],
|
|
shape: BoxShape.rectangle,
|
|
),
|
|
child: const Padding(
|
|
padding: EdgeInsetsDirectional
|
|
.fromSTEB(16, 0, 16, 0),
|
|
child: Column(
|
|
mainAxisSize:
|
|
MainAxisSize.max,
|
|
mainAxisAlignment:
|
|
MainAxisAlignment.center,
|
|
children: [
|
|
Row(
|
|
mainAxisSize:
|
|
MainAxisSize.max,
|
|
children: [
|
|
Text(
|
|
'Bug or Feature Request',
|
|
style: AppTheme.bodyLarge,
|
|
),
|
|
Expanded(
|
|
child: Align(
|
|
alignment:
|
|
AlignmentDirectional(
|
|
1, 0),
|
|
child: Icon(
|
|
Icons.chevron_right_rounded,
|
|
color: AppTheme.secondaryText,
|
|
size: 20,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Padding(
|
|
padding:
|
|
const EdgeInsetsDirectional.fromSTEB(
|
|
0, 0, 0, 1),
|
|
child: InkWell(
|
|
splashColor: Colors.transparent,
|
|
focusColor: Colors.transparent,
|
|
hoverColor: Colors.transparent,
|
|
highlightColor: Colors.transparent,
|
|
// TODO: Should open in a browser rather than in-app?
|
|
onTap: () async {
|
|
await showModalBottomSheet(
|
|
isScrollControlled: true,
|
|
backgroundColor:
|
|
Colors.transparent,
|
|
enableDrag: false,
|
|
useSafeArea: true,
|
|
context: context,
|
|
builder: (context) {
|
|
return Padding(
|
|
padding:
|
|
MediaQuery.viewInsetsOf(
|
|
context),
|
|
child: const PopupWidget(),
|
|
);
|
|
},
|
|
).then((value) =>
|
|
safeSetState(() {}));
|
|
},
|
|
child: Container(
|
|
width: double.infinity,
|
|
height: 60,
|
|
decoration: const BoxDecoration(
|
|
color:
|
|
AppTheme
|
|
.secondaryBackground,
|
|
boxShadow: [
|
|
BoxShadow(
|
|
blurRadius: 0,
|
|
color: AppTheme.alternate,
|
|
offset: Offset(
|
|
0,
|
|
1,
|
|
),
|
|
)
|
|
],
|
|
shape: BoxShape.rectangle,
|
|
),
|
|
child: const Padding(
|
|
padding: EdgeInsetsDirectional
|
|
.fromSTEB(16, 0, 16, 0),
|
|
child: Column(
|
|
mainAxisSize:
|
|
MainAxisSize.max,
|
|
mainAxisAlignment:
|
|
MainAxisAlignment.center,
|
|
children: [
|
|
Row(
|
|
mainAxisSize:
|
|
MainAxisSize.max,
|
|
children: [
|
|
Text(
|
|
'Open-source licenses & other info',
|
|
style: AppTheme.bodyLarge,
|
|
),
|
|
Expanded(
|
|
child: Align(
|
|
alignment:
|
|
AlignmentDirectional(
|
|
1, 0),
|
|
child: Icon(
|
|
Icons.chevron_right_rounded,
|
|
color: AppTheme.secondaryText,
|
|
size: 20,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Align(
|
|
alignment:
|
|
const AlignmentDirectional(0, -1),
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(16),
|
|
child: Container(
|
|
width: double.infinity,
|
|
height: 50,
|
|
constraints: const BoxConstraints(
|
|
maxWidth: 500,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color:
|
|
AppTheme
|
|
.primaryBackground,
|
|
borderRadius:
|
|
BorderRadius.circular(12),
|
|
border: Border.all(
|
|
color: AppTheme.alternate,
|
|
width: 1,
|
|
),
|
|
),
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(4),
|
|
child: Row(
|
|
mainAxisSize:
|
|
MainAxisSize.max,
|
|
mainAxisAlignment:
|
|
MainAxisAlignment.start,
|
|
children: [
|
|
Expanded(
|
|
child: InkWell(
|
|
splashColor:
|
|
Colors.transparent,
|
|
focusColor:
|
|
Colors.transparent,
|
|
hoverColor:
|
|
Colors.transparent,
|
|
highlightColor:
|
|
Colors.transparent,
|
|
// TODO
|
|
// onTap: () async {
|
|
// setDarkModeSetting(
|
|
// context,
|
|
// AppThemeMode.light);
|
|
// },
|
|
child: Container(
|
|
width: 115,
|
|
height: 100,
|
|
decoration:
|
|
BoxDecoration(
|
|
color: AppTheme.primaryBackground,
|
|
borderRadius:
|
|
BorderRadius
|
|
.circular(
|
|
10),
|
|
border: Border.all(
|
|
color: AppTheme.primaryBackground,
|
|
width: 1,
|
|
),
|
|
),
|
|
child: const Row(
|
|
mainAxisSize:
|
|
MainAxisSize
|
|
.max,
|
|
mainAxisAlignment:
|
|
MainAxisAlignment
|
|
.center,
|
|
children: [
|
|
Icon(
|
|
Icons
|
|
.wb_sunny_rounded,
|
|
color: AppTheme.primaryTextColor,
|
|
size: 16,
|
|
),
|
|
Padding(
|
|
padding:
|
|
EdgeInsetsDirectional
|
|
.fromSTEB(
|
|
4,
|
|
0,
|
|
0,
|
|
0),
|
|
child: Text(
|
|
'Light ',
|
|
style: AppTheme.primaryText,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Expanded(
|
|
child: InkWell(
|
|
splashColor:
|
|
Colors.transparent,
|
|
focusColor:
|
|
Colors.transparent,
|
|
hoverColor:
|
|
Colors.transparent,
|
|
highlightColor:
|
|
Colors.transparent,
|
|
// TODO
|
|
// onTap: () async {
|
|
// setDarkModeSetting(
|
|
// context,
|
|
// AppThemeMode.dark);
|
|
// },
|
|
child: Container(
|
|
width: 115,
|
|
height: 100,
|
|
decoration:
|
|
BoxDecoration(
|
|
color: AppTheme.primaryBackground,
|
|
borderRadius:
|
|
BorderRadius
|
|
.circular(
|
|
10),
|
|
border: Border.all(
|
|
color: AppTheme.primaryBackground,
|
|
width: 1,
|
|
),
|
|
),
|
|
child: const Row(
|
|
mainAxisSize:
|
|
MainAxisSize
|
|
.max,
|
|
mainAxisAlignment:
|
|
MainAxisAlignment
|
|
.center,
|
|
children: [
|
|
Icon(
|
|
Icons
|
|
.nightlight_round,
|
|
color: AppTheme.secondaryText,
|
|
size: 16,
|
|
),
|
|
Padding(
|
|
padding:
|
|
EdgeInsetsDirectional
|
|
.fromSTEB(
|
|
4,
|
|
0,
|
|
0,
|
|
0),
|
|
child: Text(
|
|
'Dark',
|
|
style: AppTheme.bodyMedium,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
].addToEnd(const SizedBox(height: 72)),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|