321 lines
11 KiB
Dart
321 lines
11 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 '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: const Offset(3.0, 3.0),
|
|
end: const 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: const Offset(0.6, 0.6),
|
|
end: const 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: const Offset(0.0, 30.0),
|
|
end: const 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: const Offset(0.0, 30.0),
|
|
end: const 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: const Offset(0.6, 0.6),
|
|
end: const 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: AppTheme.secondaryBackground,
|
|
body: Column(
|
|
mainAxisSize: MainAxisSize.max,
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Expanded(
|
|
child: Container(
|
|
width: double.infinity,
|
|
height: 500,
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
colors: [
|
|
AppTheme.primary,
|
|
AppTheme.error,
|
|
AppTheme.tertiary
|
|
],
|
|
stops: const [0, 0.5, 1],
|
|
begin: const AlignmentDirectional(-1, -1),
|
|
end: const AlignmentDirectional(1, 1),
|
|
),
|
|
),
|
|
child: Container(
|
|
width: 100,
|
|
height: 100,
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
colors: [
|
|
const Color(0x00FFFFFF),
|
|
AppTheme.secondaryBackground
|
|
],
|
|
stops: const [0, 1],
|
|
begin: const AlignmentDirectional(0, -1),
|
|
end: const AlignmentDirectional(0, 1),
|
|
),
|
|
),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.max,
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Container(
|
|
width: 120,
|
|
height: 120,
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.accent4,
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: Padding(
|
|
padding: const 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: const EdgeInsetsDirectional.fromSTEB(0, 44, 0, 0),
|
|
child: Text(
|
|
'Welcome!',
|
|
style: AppTheme
|
|
.displaySmall
|
|
.override(
|
|
fontFamily: 'Outfit',
|
|
letterSpacing: 0,
|
|
),
|
|
).animateOnPageLoad(
|
|
animationsMap['textOnPageLoadAnimation1']!),
|
|
),
|
|
Padding(
|
|
padding: const 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:
|
|
AppTheme.labelMedium.override(
|
|
fontFamily: 'Readex Pro',
|
|
letterSpacing: 0,
|
|
),
|
|
).animateOnPageLoad(
|
|
animationsMap['textOnPageLoadAnimation2']!),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
).animateOnPageLoad(
|
|
animationsMap['containerOnPageLoadAnimation1']!),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsetsDirectional.fromSTEB(16, 24, 16, 44),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
Expanded(
|
|
child: Align(
|
|
alignment: const AlignmentDirectional(0, 0),
|
|
child: Padding(
|
|
padding: const EdgeInsetsDirectional.fromSTEB(0, 0, 8, 16),
|
|
child: FFButtonWidget(
|
|
onPressed: () {
|
|
print('Button pressed ...');
|
|
},
|
|
text: 'Get Started',
|
|
options: FFButtonOptions(
|
|
width: 230,
|
|
height: 52,
|
|
padding: const EdgeInsetsDirectional.fromSTEB(0, 0, 0, 0),
|
|
iconPadding:
|
|
const EdgeInsetsDirectional.fromSTEB(0, 0, 0, 0),
|
|
color: AppTheme
|
|
.secondaryBackground,
|
|
textStyle:
|
|
AppTheme.bodyLarge.override(
|
|
fontFamily: 'Readex Pro',
|
|
letterSpacing: 0,
|
|
),
|
|
elevation: 0,
|
|
borderSide: BorderSide(
|
|
color: AppTheme.alternate,
|
|
width: 2,
|
|
),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Expanded(
|
|
child: Align(
|
|
alignment: const AlignmentDirectional(0, 0),
|
|
child: Padding(
|
|
padding: const EdgeInsetsDirectional.fromSTEB(8, 0, 0, 16),
|
|
child: FFButtonWidget(
|
|
onPressed: () {
|
|
print('Button pressed ...');
|
|
},
|
|
text: 'My Account',
|
|
options: FFButtonOptions(
|
|
width: 230,
|
|
height: 52,
|
|
padding: const EdgeInsetsDirectional.fromSTEB(0, 0, 0, 0),
|
|
iconPadding:
|
|
const EdgeInsetsDirectional.fromSTEB(0, 0, 0, 0),
|
|
color: AppTheme.primary,
|
|
textStyle: AppTheme
|
|
.titleSmall
|
|
.override(
|
|
fontFamily: 'Readex Pro',
|
|
color: Colors.white,
|
|
letterSpacing: 0,
|
|
),
|
|
elevation: 3,
|
|
borderSide: const BorderSide(
|
|
color: Colors.transparent,
|
|
width: 1,
|
|
),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
).animateOnPageLoad(animationsMap['rowOnPageLoadAnimation']!),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|