326 lines
12 KiB
Dart
326 lines
12 KiB
Dart
import '/flutter_flow/flutter_flow_animations.dart';
|
|
import '/flutter_flow/flutter_flow_theme.dart';
|
|
import '/flutter_flow/flutter_flow_util.dart';
|
|
import '/flutter_flow/flutter_flow_widgets.dart';
|
|
import 'dart:math';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter/scheduler.dart';
|
|
import 'package:flutter_animate/flutter_animate.dart';
|
|
import 'package:google_fonts/google_fonts.dart';
|
|
import 'package:provider/provider.dart';
|
|
|
|
import 'setup_model.dart';
|
|
export 'setup_model.dart';
|
|
|
|
class SetupWidget extends StatefulWidget {
|
|
const SetupWidget({super.key});
|
|
|
|
@override
|
|
State<SetupWidget> createState() => _SetupWidgetState();
|
|
}
|
|
|
|
class _SetupWidgetState extends State<SetupWidget>
|
|
with TickerProviderStateMixin {
|
|
late SetupModel _model;
|
|
|
|
final scaffoldKey = GlobalKey<ScaffoldState>();
|
|
|
|
final animationsMap = <String, AnimationInfo>{};
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_model = createModel(context, () => SetupModel());
|
|
|
|
animationsMap.addAll({
|
|
'containerOnPageLoadAnimation1': AnimationInfo(
|
|
trigger: AnimationTrigger.onPageLoad,
|
|
effectsBuilder: () => [
|
|
VisibilityEffect(duration: 1.ms),
|
|
FadeEffect(
|
|
curve: Curves.easeInOut,
|
|
delay: 0.0.ms,
|
|
duration: 400.0.ms,
|
|
begin: 0.0,
|
|
end: 1.0,
|
|
),
|
|
ScaleEffect(
|
|
curve: Curves.easeInOut,
|
|
delay: 0.0.ms,
|
|
duration: 400.0.ms,
|
|
begin: Offset(3.0, 3.0),
|
|
end: Offset(1.0, 1.0),
|
|
),
|
|
],
|
|
),
|
|
'containerOnPageLoadAnimation2': AnimationInfo(
|
|
trigger: AnimationTrigger.onPageLoad,
|
|
effectsBuilder: () => [
|
|
VisibilityEffect(duration: 300.ms),
|
|
FadeEffect(
|
|
curve: Curves.easeInOut,
|
|
delay: 300.0.ms,
|
|
duration: 300.0.ms,
|
|
begin: 0.0,
|
|
end: 1.0,
|
|
),
|
|
ScaleEffect(
|
|
curve: Curves.bounceOut,
|
|
delay: 300.0.ms,
|
|
duration: 300.0.ms,
|
|
begin: Offset(0.6, 0.6),
|
|
end: Offset(1.0, 1.0),
|
|
),
|
|
],
|
|
),
|
|
'textOnPageLoadAnimation1': AnimationInfo(
|
|
trigger: AnimationTrigger.onPageLoad,
|
|
effectsBuilder: () => [
|
|
VisibilityEffect(duration: 350.ms),
|
|
FadeEffect(
|
|
curve: Curves.easeInOut,
|
|
delay: 350.0.ms,
|
|
duration: 400.0.ms,
|
|
begin: 0.0,
|
|
end: 1.0,
|
|
),
|
|
MoveEffect(
|
|
curve: Curves.easeInOut,
|
|
delay: 350.0.ms,
|
|
duration: 400.0.ms,
|
|
begin: Offset(0.0, 30.0),
|
|
end: Offset(0.0, 0.0),
|
|
),
|
|
],
|
|
),
|
|
'textOnPageLoadAnimation2': AnimationInfo(
|
|
trigger: AnimationTrigger.onPageLoad,
|
|
effectsBuilder: () => [
|
|
VisibilityEffect(duration: 400.ms),
|
|
FadeEffect(
|
|
curve: Curves.easeInOut,
|
|
delay: 400.0.ms,
|
|
duration: 400.0.ms,
|
|
begin: 0.0,
|
|
end: 1.0,
|
|
),
|
|
MoveEffect(
|
|
curve: Curves.easeInOut,
|
|
delay: 400.0.ms,
|
|
duration: 400.0.ms,
|
|
begin: Offset(0.0, 30.0),
|
|
end: Offset(0.0, 0.0),
|
|
),
|
|
],
|
|
),
|
|
'rowOnPageLoadAnimation': AnimationInfo(
|
|
trigger: AnimationTrigger.onPageLoad,
|
|
effectsBuilder: () => [
|
|
VisibilityEffect(duration: 300.ms),
|
|
FadeEffect(
|
|
curve: Curves.easeInOut,
|
|
delay: 300.0.ms,
|
|
duration: 600.0.ms,
|
|
begin: 0.0,
|
|
end: 1.0,
|
|
),
|
|
ScaleEffect(
|
|
curve: Curves.bounceOut,
|
|
delay: 300.0.ms,
|
|
duration: 600.0.ms,
|
|
begin: Offset(0.6, 0.6),
|
|
end: Offset(1.0, 1.0),
|
|
),
|
|
],
|
|
),
|
|
});
|
|
}
|
|
|
|
@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: FlutterFlowTheme.of(context).secondaryBackground,
|
|
body: Column(
|
|
mainAxisSize: MainAxisSize.max,
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Expanded(
|
|
child: Container(
|
|
width: double.infinity,
|
|
height: 500,
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
colors: [
|
|
FlutterFlowTheme.of(context).primary,
|
|
FlutterFlowTheme.of(context).error,
|
|
FlutterFlowTheme.of(context).tertiary
|
|
],
|
|
stops: [0, 0.5, 1],
|
|
begin: AlignmentDirectional(-1, -1),
|
|
end: AlignmentDirectional(1, 1),
|
|
),
|
|
),
|
|
child: Container(
|
|
width: 100,
|
|
height: 100,
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
colors: [
|
|
Color(0x00FFFFFF),
|
|
FlutterFlowTheme.of(context).secondaryBackground
|
|
],
|
|
stops: [0, 1],
|
|
begin: AlignmentDirectional(0, -1),
|
|
end: AlignmentDirectional(0, 1),
|
|
),
|
|
),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.max,
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Container(
|
|
width: 120,
|
|
height: 120,
|
|
decoration: BoxDecoration(
|
|
color: FlutterFlowTheme.of(context).accent4,
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: Padding(
|
|
padding: EdgeInsets.all(8),
|
|
child: Image.network(
|
|
'https://storage.googleapis.com/flutterflow-io-6f20.appspot.com/projects/f-f-templates-q1-23-fbcr63/assets/ax4fvwjz7awx/@4xff_badgeDesign_dark_small.png',
|
|
width: 100,
|
|
height: 100,
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
).animateOnPageLoad(
|
|
animationsMap['containerOnPageLoadAnimation2']!),
|
|
Padding(
|
|
padding: EdgeInsetsDirectional.fromSTEB(0, 44, 0, 0),
|
|
child: Text(
|
|
'Welcome!',
|
|
style: FlutterFlowTheme.of(context)
|
|
.displaySmall
|
|
.override(
|
|
fontFamily: 'Outfit',
|
|
letterSpacing: 0,
|
|
),
|
|
).animateOnPageLoad(
|
|
animationsMap['textOnPageLoadAnimation1']!),
|
|
),
|
|
Padding(
|
|
padding: EdgeInsetsDirectional.fromSTEB(44, 8, 44, 0),
|
|
child: Text(
|
|
'Thanks for joining! Access or create your account below, and get started on your journey!',
|
|
textAlign: TextAlign.center,
|
|
style:
|
|
FlutterFlowTheme.of(context).labelMedium.override(
|
|
fontFamily: 'Readex Pro',
|
|
letterSpacing: 0,
|
|
),
|
|
).animateOnPageLoad(
|
|
animationsMap['textOnPageLoadAnimation2']!),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
).animateOnPageLoad(
|
|
animationsMap['containerOnPageLoadAnimation1']!),
|
|
),
|
|
Padding(
|
|
padding: EdgeInsetsDirectional.fromSTEB(16, 24, 16, 44),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
Expanded(
|
|
child: Align(
|
|
alignment: AlignmentDirectional(0, 0),
|
|
child: Padding(
|
|
padding: EdgeInsetsDirectional.fromSTEB(0, 0, 8, 16),
|
|
child: FFButtonWidget(
|
|
onPressed: () {
|
|
print('Button pressed ...');
|
|
},
|
|
text: 'Get Started',
|
|
options: FFButtonOptions(
|
|
width: 230,
|
|
height: 52,
|
|
padding: EdgeInsetsDirectional.fromSTEB(0, 0, 0, 0),
|
|
iconPadding:
|
|
EdgeInsetsDirectional.fromSTEB(0, 0, 0, 0),
|
|
color: FlutterFlowTheme.of(context)
|
|
.secondaryBackground,
|
|
textStyle:
|
|
FlutterFlowTheme.of(context).bodyLarge.override(
|
|
fontFamily: 'Readex Pro',
|
|
letterSpacing: 0,
|
|
),
|
|
elevation: 0,
|
|
borderSide: BorderSide(
|
|
color: FlutterFlowTheme.of(context).alternate,
|
|
width: 2,
|
|
),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Expanded(
|
|
child: Align(
|
|
alignment: AlignmentDirectional(0, 0),
|
|
child: Padding(
|
|
padding: EdgeInsetsDirectional.fromSTEB(8, 0, 0, 16),
|
|
child: FFButtonWidget(
|
|
onPressed: () {
|
|
print('Button pressed ...');
|
|
},
|
|
text: 'My Account',
|
|
options: FFButtonOptions(
|
|
width: 230,
|
|
height: 52,
|
|
padding: EdgeInsetsDirectional.fromSTEB(0, 0, 0, 0),
|
|
iconPadding:
|
|
EdgeInsetsDirectional.fromSTEB(0, 0, 0, 0),
|
|
color: FlutterFlowTheme.of(context).primary,
|
|
textStyle: FlutterFlowTheme.of(context)
|
|
.titleSmall
|
|
.override(
|
|
fontFamily: 'Readex Pro',
|
|
color: Colors.white,
|
|
letterSpacing: 0,
|
|
),
|
|
elevation: 3,
|
|
borderSide: BorderSide(
|
|
color: Colors.transparent,
|
|
width: 1,
|
|
),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
).animateOnPageLoad(animationsMap['rowOnPageLoadAnimation']!),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|