497 lines
21 KiB
Dart
497 lines
21 KiB
Dart
import 'package:flutterflow_ui/flutterflow_ui.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 'support_form_model.dart';
|
|
export 'support_form_model.dart';
|
|
|
|
import 'package:app/theme.dart';
|
|
|
|
class SupportFormWidget extends StatefulWidget {
|
|
const SupportFormWidget({super.key});
|
|
|
|
@override
|
|
State<SupportFormWidget> createState() => _SupportFormWidgetState();
|
|
}
|
|
|
|
class _SupportFormWidgetState extends State<SupportFormWidget>
|
|
with TickerProviderStateMixin {
|
|
late SupportFormModel _model;
|
|
|
|
final scaffoldKey = GlobalKey<ScaffoldState>();
|
|
|
|
final animationsMap = <String, AnimationInfo>{};
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_model = createModel(context, () => SupportFormModel());
|
|
|
|
_model.textController1 ??= TextEditingController();
|
|
_model.textFieldFocusNode1 ??= FocusNode();
|
|
|
|
_model.textController2 ??= TextEditingController();
|
|
_model.textFieldFocusNode2 ??= FocusNode();
|
|
|
|
_model.textController3 ??= TextEditingController();
|
|
_model.textFieldFocusNode3 ??= FocusNode();
|
|
|
|
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, 110.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, 110.0),
|
|
end: const Offset(0.0, 0.0),
|
|
),
|
|
],
|
|
),
|
|
'containerOnPageLoadAnimation3': 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, 110.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 GestureDetector(
|
|
onTap: () => _model.unfocusNode.canRequestFocus
|
|
? FocusScope.of(context).requestFocus(_model.unfocusNode)
|
|
: FocusScope.of(context).unfocus(),
|
|
child: Scaffold(
|
|
key: scaffoldKey,
|
|
backgroundColor: AppTheme.secondaryBackground,
|
|
appBar: AppBar(
|
|
backgroundColor: AppTheme.secondaryBackground,
|
|
automaticallyImplyLeading: false,
|
|
leading: FlutterFlowIconButton(
|
|
borderColor: Colors.transparent,
|
|
borderRadius: 30,
|
|
borderWidth: 1,
|
|
buttonSize: 60,
|
|
icon: const Icon(
|
|
Icons.arrow_back_rounded,
|
|
color: AppTheme.primaryText,
|
|
size: 30,
|
|
),
|
|
onPressed: () async {
|
|
context.pop();
|
|
},
|
|
),
|
|
title: const Text(
|
|
'Submit Ticket',
|
|
style: AppTheme.titleLarge,
|
|
),
|
|
actions: const [],
|
|
centerTitle: false,
|
|
elevation: 0,
|
|
),
|
|
body: SafeArea(
|
|
top: true,
|
|
child: Align(
|
|
alignment: const AlignmentDirectional(0, 1),
|
|
child: Padding(
|
|
padding: const EdgeInsetsDirectional.fromSTEB(16, 12, 16, 0),
|
|
child: SingleChildScrollView(
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.max,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text(
|
|
'Welcome to support',
|
|
style: AppTheme.labelLarge,
|
|
),
|
|
const Padding(
|
|
padding: EdgeInsetsDirectional.fromSTEB(0, 4, 0, 0),
|
|
child: Text(
|
|
'Submit a bug',
|
|
style: AppTheme.headlineMedium,
|
|
),
|
|
),
|
|
Row(
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
Expanded(
|
|
child: Padding(
|
|
padding:
|
|
const EdgeInsetsDirectional.fromSTEB(0, 16, 0, 0),
|
|
child: Container(
|
|
width: 120,
|
|
constraints: const BoxConstraints(
|
|
maxWidth: 500,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: AppTheme
|
|
.secondaryBackground,
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(
|
|
color: AppTheme.alternate,
|
|
width: 2,
|
|
),
|
|
),
|
|
child: const Padding(
|
|
padding: EdgeInsetsDirectional.fromSTEB(
|
|
8, 16, 8, 16),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.max,
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
Icon(
|
|
Icons.email_outlined,
|
|
color:
|
|
AppTheme.primary,
|
|
size: 36,
|
|
),
|
|
Padding(
|
|
padding: EdgeInsetsDirectional.fromSTEB(
|
|
0, 12, 0, 0),
|
|
child: Text(
|
|
'Email Us',
|
|
textAlign: TextAlign.center,
|
|
style: AppTheme.bodyMedium,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
).animateOnPageLoad(animationsMap[
|
|
'containerOnPageLoadAnimation1']!),
|
|
),
|
|
),
|
|
Expanded(
|
|
child: Padding(
|
|
padding:
|
|
const EdgeInsetsDirectional.fromSTEB(0, 16, 0, 0),
|
|
child: Container(
|
|
width: 120,
|
|
constraints: const BoxConstraints(
|
|
maxWidth: 500,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: AppTheme
|
|
.secondaryBackground,
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(
|
|
color: AppTheme.alternate,
|
|
width: 2,
|
|
),
|
|
),
|
|
child: const Padding(
|
|
padding: EdgeInsetsDirectional.fromSTEB(
|
|
8, 16, 8, 16),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.max,
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
Icon(
|
|
Icons.search_rounded,
|
|
color:
|
|
AppTheme.primary,
|
|
size: 36,
|
|
),
|
|
Padding(
|
|
padding: EdgeInsetsDirectional.fromSTEB(
|
|
0, 12, 0, 0),
|
|
child: Text(
|
|
'Search FAQs',
|
|
textAlign: TextAlign.center,
|
|
style: AppTheme.bodyMedium,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
).animateOnPageLoad(animationsMap[
|
|
'containerOnPageLoadAnimation2']!),
|
|
),
|
|
),
|
|
].divide(const SizedBox(width: 12)),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsetsDirectional.fromSTEB(0, 16, 0, 0),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
TextFormField(
|
|
controller: _model.textController1,
|
|
focusNode: _model.textFieldFocusNode1,
|
|
autofocus: true,
|
|
obscureText: false,
|
|
decoration: InputDecoration(
|
|
labelText: 'Channel Name',
|
|
labelStyle: AppTheme.labelMedium,
|
|
hintStyle: AppTheme.labelMedium,
|
|
enabledBorder: OutlineInputBorder(
|
|
borderSide: const BorderSide(
|
|
color: AppTheme.alternate,
|
|
width: 2,
|
|
),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
focusedBorder: OutlineInputBorder(
|
|
borderSide: const BorderSide(
|
|
color: AppTheme.primary,
|
|
width: 2,
|
|
),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
errorBorder: OutlineInputBorder(
|
|
borderSide: const BorderSide(
|
|
color: AppTheme.error,
|
|
width: 2,
|
|
),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
focusedErrorBorder: OutlineInputBorder(
|
|
borderSide: const BorderSide(
|
|
color: AppTheme.error,
|
|
width: 2,
|
|
),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
contentPadding: const EdgeInsetsDirectional.fromSTEB(
|
|
16, 12, 16, 12),
|
|
),
|
|
style: AppTheme.bodyMedium,
|
|
cursorColor: AppTheme.primary,
|
|
validator: _model.textController1Validator
|
|
.asValidator(context),
|
|
),
|
|
TextFormField(
|
|
controller: _model.textController2,
|
|
focusNode: _model.textFieldFocusNode2,
|
|
autofocus: true,
|
|
obscureText: false,
|
|
decoration: InputDecoration(
|
|
labelText: 'Channel ID',
|
|
labelStyle: AppTheme.labelMedium,
|
|
hintStyle: AppTheme.labelMedium,
|
|
enabledBorder: OutlineInputBorder(
|
|
borderSide: const BorderSide(
|
|
color: AppTheme.alternate,
|
|
width: 2,
|
|
),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
focusedBorder: OutlineInputBorder(
|
|
borderSide: const BorderSide(
|
|
color: AppTheme.primary,
|
|
width: 2,
|
|
),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
errorBorder: OutlineInputBorder(
|
|
borderSide: const BorderSide(
|
|
color: AppTheme.error,
|
|
width: 2,
|
|
),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
focusedErrorBorder: OutlineInputBorder(
|
|
borderSide: const BorderSide(
|
|
color: AppTheme.error,
|
|
width: 2,
|
|
),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
contentPadding: const EdgeInsetsDirectional.fromSTEB(
|
|
16, 12, 16, 12),
|
|
),
|
|
style: AppTheme.bodyMedium,
|
|
cursorColor: AppTheme.primary,
|
|
validator: _model.textController2Validator
|
|
.asValidator(context),
|
|
),
|
|
TextFormField(
|
|
controller: _model.textController3,
|
|
focusNode: _model.textFieldFocusNode3,
|
|
autofocus: true,
|
|
obscureText: false,
|
|
decoration: InputDecoration(
|
|
labelStyle: AppTheme.labelMedium,
|
|
hintText:
|
|
'Short Description of what is going on...',
|
|
hintStyle: AppTheme.labelMedium,
|
|
enabledBorder: OutlineInputBorder(
|
|
borderSide: const BorderSide(
|
|
color: AppTheme.alternate,
|
|
width: 2,
|
|
),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
focusedBorder: OutlineInputBorder(
|
|
borderSide: const BorderSide(
|
|
color: AppTheme.primary,
|
|
width: 2,
|
|
),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
errorBorder: OutlineInputBorder(
|
|
borderSide: const BorderSide(
|
|
color: AppTheme.error,
|
|
width: 2,
|
|
),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
focusedErrorBorder: OutlineInputBorder(
|
|
borderSide: const BorderSide(
|
|
color: AppTheme.error,
|
|
width: 2,
|
|
),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
contentPadding: const EdgeInsetsDirectional.fromSTEB(
|
|
16, 24, 16, 12),
|
|
),
|
|
style: AppTheme.bodyMedium,
|
|
maxLines: 16,
|
|
minLines: 6,
|
|
cursorColor: AppTheme.primary,
|
|
validator: _model.textController3Validator
|
|
.asValidator(context),
|
|
),
|
|
].divide(const SizedBox(height: 12)),
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsetsDirectional.fromSTEB(0, 16, 0, 0),
|
|
child: Container(
|
|
width: double.infinity,
|
|
constraints: const BoxConstraints(
|
|
maxWidth: 500,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color:
|
|
AppTheme.secondaryBackground,
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(
|
|
color: AppTheme.alternate,
|
|
width: 2,
|
|
),
|
|
),
|
|
child: const Padding(
|
|
padding: EdgeInsets.all(8),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
Icon(
|
|
Icons.add_a_photo_rounded,
|
|
color: AppTheme.primary,
|
|
size: 32,
|
|
),
|
|
Padding(
|
|
padding:
|
|
EdgeInsetsDirectional.fromSTEB(16, 0, 0, 0),
|
|
child: Text(
|
|
'Upload Screenshot',
|
|
textAlign: TextAlign.center,
|
|
style: AppTheme.bodyMedium,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
).animateOnPageLoad(
|
|
animationsMap['containerOnPageLoadAnimation3']!),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsetsDirectional.fromSTEB(0, 24, 0, 12),
|
|
child: FFButtonWidget(
|
|
onPressed: () {
|
|
print('Button pressed ...');
|
|
},
|
|
text: 'Submit Ticket',
|
|
icon: const Icon(
|
|
Icons.receipt_long,
|
|
size: 15,
|
|
),
|
|
options: FFButtonOptions(
|
|
width: double.infinity,
|
|
height: 48,
|
|
padding: const EdgeInsets.all(0),
|
|
iconPadding:
|
|
const EdgeInsetsDirectional.fromSTEB(0, 0, 0, 0),
|
|
color: AppTheme.primary,
|
|
textStyle: AppTheme.titleSmall,
|
|
elevation: 4,
|
|
borderSide: const BorderSide(
|
|
color: Colors.transparent,
|
|
width: 1,
|
|
),
|
|
borderRadius: BorderRadius.circular(60),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|