save before flutter upgrade
This commit is contained in:
Abraham
78
lib/pages/login_page/login_page.dart
Normal file
78
lib/pages/login_page/login_page.dart
Normal file
@@ -0,0 +1,78 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:nethive_neo/models/users/token.dart';
|
||||
import 'package:nethive_neo/pages/login_page/widgets/login_form.dart';
|
||||
import 'package:nethive_neo/pages/login_page/widgets/right_image.dart';
|
||||
import 'package:nethive_neo/theme/theme.dart';
|
||||
|
||||
class LoginPage extends StatefulWidget {
|
||||
const LoginPage({
|
||||
Key? key,
|
||||
this.token,
|
||||
}) : super(key: key);
|
||||
|
||||
final Token? token;
|
||||
|
||||
@override
|
||||
State<LoginPage> createState() => _LoginPageState();
|
||||
}
|
||||
|
||||
class _LoginPageState extends State<LoginPage> {
|
||||
final scaffoldKey = GlobalKey<ScaffoldState>();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: AppTheme.of(context).primaryBackground,
|
||||
key: scaffoldKey,
|
||||
body: GestureDetector(
|
||||
onTap: () => FocusScope.of(context).unfocus(),
|
||||
child: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
if (constraints.maxWidth < 600) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(20),
|
||||
child: Container(
|
||||
width: double.infinity,
|
||||
height: double.infinity,
|
||||
decoration: BoxDecoration(
|
||||
color: AppTheme.of(context).primaryBackground,
|
||||
borderRadius: BorderRadius.circular(19),
|
||||
),
|
||||
child: Center(
|
||||
child: LoginForm(),
|
||||
),
|
||||
),
|
||||
);
|
||||
} else {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(10),
|
||||
child: Stack(
|
||||
children: [
|
||||
Container(
|
||||
width: double.infinity,
|
||||
height: double.infinity,
|
||||
decoration: BoxDecoration(
|
||||
color: AppTheme.of(context).primaryBackground,
|
||||
borderRadius: BorderRadius.circular(19),
|
||||
),
|
||||
),
|
||||
const Positioned(
|
||||
top: 101,
|
||||
left: 109,
|
||||
child: LoginForm(),
|
||||
),
|
||||
const Positioned(
|
||||
right: 0,
|
||||
child: RightImageWidget(),
|
||||
)
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
357
lib/pages/login_page/widgets/login_form.dart
Normal file
357
lib/pages/login_page/widgets/login_form.dart
Normal file
@@ -0,0 +1,357 @@
|
||||
import 'dart:developer';
|
||||
|
||||
import 'package:supabase_flutter/supabase_flutter.dart' as sf;
|
||||
import 'package:email_validator/email_validator.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
import 'package:nethive_neo/helpers/globals.dart';
|
||||
import 'package:nethive_neo/helpers/supabase/queries.dart';
|
||||
import 'package:nethive_neo/pages/widgets/custom_button.dart';
|
||||
import 'package:nethive_neo/providers/providers.dart';
|
||||
import 'package:nethive_neo/services/api_error_handler.dart';
|
||||
import 'package:nethive_neo/theme/theme.dart';
|
||||
|
||||
class LoginForm extends StatefulWidget {
|
||||
const LoginForm({super.key});
|
||||
|
||||
@override
|
||||
State<LoginForm> createState() => _LoginFormState();
|
||||
}
|
||||
|
||||
class _LoginFormState extends State<LoginForm> {
|
||||
final formKey = GlobalKey<FormState>();
|
||||
bool passwordVisibility = false;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final UserState userState = Provider.of<UserState>(context);
|
||||
double height = MediaQuery.of(context).size.height / 1024;
|
||||
double width = MediaQuery.of(context).size.width / 1440;
|
||||
|
||||
Future<void> login() async {
|
||||
//Login
|
||||
try {
|
||||
// Check if user exists
|
||||
final userId =
|
||||
await userState.getUserId(userState.emailController.text);
|
||||
|
||||
if (userId == null) {
|
||||
await ApiErrorHandler.callToast('Este Correo no está registrado');
|
||||
return;
|
||||
}
|
||||
|
||||
await supabase.auth.signInWithPassword(
|
||||
email: userState.emailController.text,
|
||||
password: userState.passwordController.text,
|
||||
);
|
||||
|
||||
if (userState.recuerdame == true) {
|
||||
await userState.setEmail();
|
||||
await userState.setPassword();
|
||||
} else {
|
||||
userState.emailController.text = '';
|
||||
userState.passwordController.text = '';
|
||||
await prefs.remove('email');
|
||||
await prefs.remove('password');
|
||||
}
|
||||
|
||||
if (supabase.auth.currentUser == null) {
|
||||
await ApiErrorHandler.callToast();
|
||||
return;
|
||||
}
|
||||
|
||||
currentUser = await SupabaseQueries.getCurrentUserData();
|
||||
|
||||
if (currentUser == null) {
|
||||
await ApiErrorHandler.callToast();
|
||||
return;
|
||||
}
|
||||
/*
|
||||
13: limitado
|
||||
14: ilimitado
|
||||
*/
|
||||
|
||||
/* ILIMITADO */
|
||||
print('User Role ID: ${currentUser!.role.roleId}');
|
||||
/* if (currentUser!.role.roleId == 14 || currentUser!.role.roleId == 13) {
|
||||
context.pushReplacement('/book_page_main');
|
||||
return;
|
||||
} */
|
||||
/* LIMITADO */
|
||||
|
||||
theme = await SupabaseQueries.getUserTheme();
|
||||
AppTheme.initConfiguration(theme);
|
||||
|
||||
if (!mounted) return;
|
||||
|
||||
context.pushReplacement('/');
|
||||
} catch (e) {
|
||||
if (e is sf.AuthException) {
|
||||
await userState.incrementLoginAttempts(
|
||||
userState.emailController.text,
|
||||
);
|
||||
await ApiErrorHandler.callToast('Credenciales Invalidas');
|
||||
|
||||
return;
|
||||
}
|
||||
log('Error al iniciar sesion - $e');
|
||||
}
|
||||
}
|
||||
|
||||
return SizedBox(
|
||||
width: 521,
|
||||
child: SingleChildScrollView(
|
||||
child: Form(
|
||||
key: formKey,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Center(
|
||||
child: Image.asset(
|
||||
AppTheme.themeMode == ThemeMode.light
|
||||
? 'assets/images/logo_lu.jpeg'
|
||||
: 'assets/images/logo_lu.jpeg',
|
||||
filterQuality: FilterQuality.high,
|
||||
fit: BoxFit.contain,
|
||||
alignment: Alignment.centerLeft,
|
||||
width: width * 200,
|
||||
height: height * 200,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'Inicie Sesión',
|
||||
textAlign: TextAlign.start,
|
||||
style: AppTheme.of(context).title3.override(
|
||||
fontFamily: AppTheme.of(context).title3Family,
|
||||
color: AppTheme.of(context).primaryColor,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 50.32),
|
||||
Text(
|
||||
'Correo',
|
||||
style: AppTheme.of(context).bodyText2,
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
TextFormField(
|
||||
controller: userState.emailController,
|
||||
onFieldSubmitted: (value) async {
|
||||
if (!formKey.currentState!.validate()) {
|
||||
return;
|
||||
}
|
||||
await login();
|
||||
},
|
||||
validator: (value) {
|
||||
if (value == null || value.isEmpty) {
|
||||
return 'El correo es requerido';
|
||||
} else if (!EmailValidator.validate(value)) {
|
||||
return 'Favor de ingresar un correo valido';
|
||||
}
|
||||
return null;
|
||||
},
|
||||
decoration: _buildInputDecoration('Nombre de usuario'),
|
||||
style: AppTheme.of(context).bodyText3.override(
|
||||
fontFamily: AppTheme.of(context).bodyText3Family,
|
||||
color: AppTheme.of(context).primaryText,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'Contraseña',
|
||||
style: AppTheme.of(context).bodyText2,
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
TextFormField(
|
||||
controller: userState.passwordController,
|
||||
obscureText: !passwordVisibility,
|
||||
onFieldSubmitted: (value) async {
|
||||
if (!formKey.currentState!.validate()) {
|
||||
return;
|
||||
}
|
||||
await login();
|
||||
},
|
||||
validator: (value) {
|
||||
if (value == null || value.isEmpty) {
|
||||
return 'La contraseña es requerida';
|
||||
}
|
||||
return null;
|
||||
},
|
||||
decoration:
|
||||
_buildInputDecoration('Contraseña', isPassword: true),
|
||||
style: AppTheme.of(context).bodyText3.override(
|
||||
fontFamily: AppTheme.of(context).bodyText3Family,
|
||||
color: AppTheme.of(context).primaryText,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 53),
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.max,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Transform.scale(
|
||||
scale: 1.25,
|
||||
child: Checkbox(
|
||||
value: userState.recuerdame,
|
||||
activeColor: AppTheme.of(context).primaryColor,
|
||||
onChanged: (value) async {
|
||||
await userState.updateRecuerdame();
|
||||
},
|
||||
splashRadius: 0,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 18),
|
||||
InkWell(
|
||||
onTap: () async {
|
||||
await userState.updateRecuerdame();
|
||||
},
|
||||
child: Text(
|
||||
'Recuerdame',
|
||||
style: AppTheme.of(context).bodyText3,
|
||||
),
|
||||
),
|
||||
const Spacer(),
|
||||
InkWell(
|
||||
onTap: () {},
|
||||
child: Text(
|
||||
'Olvidaste Contraseña?',
|
||||
style: AppTheme.of(context).bodyText3.override(
|
||||
fontFamily: AppTheme.of(context).bodyText3Family,
|
||||
color: AppTheme.of(context).primaryColor,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
CustomButton(
|
||||
onPressed: () async {
|
||||
if (!formKey.currentState!.validate()) {
|
||||
return;
|
||||
}
|
||||
await login();
|
||||
},
|
||||
text: 'Iniciar Sesión',
|
||||
options: ButtonOptions(
|
||||
width: double.infinity,
|
||||
height: 68,
|
||||
color: AppTheme.of(context).primaryColor,
|
||||
textStyle: AppTheme.of(context).bodyText2.override(
|
||||
fontFamily: AppTheme.of(context).bodyText3Family,
|
||||
color: AppTheme.of(context).primaryBackground,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 68),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
'No registrasdo aun? ',
|
||||
style: AppTheme.of(context).bodyText2.override(
|
||||
fontFamily: AppTheme.of(context).bodyText2Family,
|
||||
color: AppTheme.of(context).alternate,
|
||||
),
|
||||
),
|
||||
InkWell(
|
||||
onTap: () {},
|
||||
child: Text(
|
||||
'Registrate',
|
||||
style: AppTheme.of(context).bodyText2.override(
|
||||
fontFamily: AppTheme.of(context).bodyText2Family,
|
||||
color: AppTheme.of(context).primaryColor,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const Icon(
|
||||
Icons.copyright,
|
||||
size: 16,
|
||||
color: Color(0xFF99B2C6),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Text(
|
||||
'Copyright CB Luna 2024',
|
||||
style: AppTheme.of(context).bodyText3.override(
|
||||
fontFamily: AppTheme.of(context).bodyText3Family,
|
||||
color: AppTheme.of(context).alternate,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
InputDecoration _buildInputDecoration(String label,
|
||||
{bool isPassword = false}) {
|
||||
Widget? suffixIcon;
|
||||
if (isPassword) {
|
||||
suffixIcon = InkWell(
|
||||
onTap: () => setState(
|
||||
() => passwordVisibility = !passwordVisibility,
|
||||
),
|
||||
focusNode: FocusNode(skipTraversal: true),
|
||||
child: Icon(
|
||||
passwordVisibility
|
||||
? Icons.visibility_outlined
|
||||
: Icons.visibility_off_outlined,
|
||||
color: const Color(0xFFB8B8B8),
|
||||
size: 22,
|
||||
),
|
||||
);
|
||||
}
|
||||
return InputDecoration(
|
||||
hintText: label,
|
||||
filled: true,
|
||||
// isDense: true,
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 27, vertical: 20),
|
||||
fillColor: AppTheme.of(context).tertiaryBackground,
|
||||
hintStyle: GoogleFonts.quicksand(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 15,
|
||||
color: AppTheme.of(context).hintText,
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
borderSide: const BorderSide(
|
||||
color: Colors.transparent,
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
borderSide: const BorderSide(
|
||||
color: Colors.transparent,
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
errorBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
borderSide: const BorderSide(
|
||||
color: Colors.red,
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
prefixIcon: Padding(
|
||||
padding: const EdgeInsets.only(left: 27, right: 19),
|
||||
child: Icon(
|
||||
isPassword ? Icons.lock : Icons.mail_rounded,
|
||||
size: 24,
|
||||
color: AppTheme.of(context).hintText,
|
||||
),
|
||||
),
|
||||
suffixIcon: suffixIcon,
|
||||
);
|
||||
}
|
||||
}
|
||||
39
lib/pages/login_page/widgets/right_image.dart
Normal file
39
lib/pages/login_page/widgets/right_image.dart
Normal file
@@ -0,0 +1,39 @@
|
||||
import 'package:flutter/material.dart';
|
||||
//import 'package:cbluna_crm_lu/theme/theme.dart';
|
||||
|
||||
class RightImageWidget extends StatelessWidget {
|
||||
const RightImageWidget({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final size = MediaQuery.of(context).size;
|
||||
return Stack(
|
||||
children: [
|
||||
Container(
|
||||
width: size.width * 0.55,
|
||||
height: size.height - 20,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(19),
|
||||
image: const DecorationImage(
|
||||
image: AssetImage('assets/images/lu_login.jpeg'),
|
||||
filterQuality: FilterQuality.high,
|
||||
fit: BoxFit.fill,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
/* Positioned(
|
||||
left: 51.54,
|
||||
bottom: 86,
|
||||
child: Text(
|
||||
'Control de Visitas',
|
||||
style: AppTheme.of(context).title1.override(
|
||||
fontFamily: AppTheme.of(context).title1Family,
|
||||
color: AppTheme.of(context).primaryColor,
|
||||
),
|
||||
),
|
||||
), */
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
19
lib/pages/page_not_found.dart
Normal file
19
lib/pages/page_not_found.dart
Normal file
@@ -0,0 +1,19 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
|
||||
class PageNotFoundPage extends StatelessWidget {
|
||||
const PageNotFoundPage({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Text(
|
||||
'404 - Page not found',
|
||||
style: GoogleFonts.montserratAlternates(
|
||||
fontSize: 20, fontWeight: FontWeight.bold),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
2
lib/pages/pages.dart
Normal file
2
lib/pages/pages.dart
Normal file
@@ -0,0 +1,2 @@
|
||||
export 'package:nethive_neo/pages/login_page/login_page.dart';
|
||||
export 'package:nethive_neo/pages/page_not_found.dart';
|
||||
93
lib/pages/widgets/animated_hover_button.dart
Normal file
93
lib/pages/widgets/animated_hover_button.dart
Normal file
@@ -0,0 +1,93 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class AnimatedHoverButton extends StatefulWidget {
|
||||
const AnimatedHoverButton({
|
||||
Key? key,
|
||||
required this.primaryColor,
|
||||
required this.secondaryColor,
|
||||
required this.onTap,
|
||||
required this.icon,
|
||||
required this.tooltip,
|
||||
this.radius = 50,
|
||||
this.size = 50,
|
||||
this.enable = true,
|
||||
}) : super(key: key);
|
||||
|
||||
final Color primaryColor;
|
||||
final Color secondaryColor;
|
||||
final void Function() onTap;
|
||||
final IconData icon;
|
||||
final String tooltip;
|
||||
final double radius;
|
||||
final double size;
|
||||
final bool? enable;
|
||||
|
||||
@override
|
||||
State<AnimatedHoverButton> createState() => _AnimatedHoverButtonState();
|
||||
}
|
||||
|
||||
class _AnimatedHoverButtonState extends State<AnimatedHoverButton> {
|
||||
bool isHovered = false;
|
||||
|
||||
void setHovered(bool hovered) {
|
||||
setState(() {
|
||||
isHovered = hovered;
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final Color primaryColor;
|
||||
final Color secondaryColor;
|
||||
|
||||
if (!isHovered) {
|
||||
if (widget.enable == true) {
|
||||
primaryColor = widget.primaryColor;
|
||||
secondaryColor = widget.secondaryColor;
|
||||
} else {
|
||||
primaryColor = Theme.of(context).hintColor;
|
||||
secondaryColor = Theme.of(context).scaffoldBackgroundColor;
|
||||
}
|
||||
} else {
|
||||
if (widget.enable == true) {
|
||||
primaryColor = widget.secondaryColor;
|
||||
secondaryColor = widget.primaryColor;
|
||||
} else {
|
||||
primaryColor = Theme.of(context).scaffoldBackgroundColor;
|
||||
secondaryColor = Theme.of(context).hintColor;
|
||||
}
|
||||
}
|
||||
|
||||
return Tooltip(
|
||||
message: widget.tooltip,
|
||||
child: GestureDetector(
|
||||
onTap: widget.enable == true ? widget.onTap : null,
|
||||
child: MouseRegion(
|
||||
cursor: SystemMouseCursors.click,
|
||||
onEnter: (_) => setHovered(true),
|
||||
onExit: (_) => setHovered(false),
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
width: widget.size,
|
||||
height: widget.size,
|
||||
decoration: BoxDecoration(
|
||||
color: secondaryColor,
|
||||
borderRadius: BorderRadius.circular(widget.radius),
|
||||
border: Border.all(
|
||||
color: primaryColor,
|
||||
width: 1.5,
|
||||
),
|
||||
),
|
||||
child: Center(
|
||||
child: Icon(
|
||||
widget.icon,
|
||||
color: primaryColor,
|
||||
size: widget.size / 1.5,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
110
lib/pages/widgets/animated_hover_icon_text_button.dart
Normal file
110
lib/pages/widgets/animated_hover_icon_text_button.dart
Normal file
@@ -0,0 +1,110 @@
|
||||
import 'package:nethive_neo/theme/theme.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class AnimatedHoverIconTextButton extends StatefulWidget {
|
||||
const AnimatedHoverIconTextButton({
|
||||
Key? key,
|
||||
required this.primaryColor,
|
||||
required this.secondaryColor,
|
||||
required this.onTap,
|
||||
required this.icon,
|
||||
required this.text,
|
||||
required this.tooltip,
|
||||
this.size = 45,
|
||||
this.enable = true,
|
||||
}) : super(key: key);
|
||||
|
||||
final Color primaryColor;
|
||||
final Color secondaryColor;
|
||||
final void Function() onTap;
|
||||
final IconData icon;
|
||||
final String text;
|
||||
final String? tooltip;
|
||||
final double? size;
|
||||
final bool? enable;
|
||||
|
||||
@override
|
||||
State<AnimatedHoverIconTextButton> createState() =>
|
||||
_AnimatedHoverButtonState();
|
||||
}
|
||||
|
||||
class _AnimatedHoverButtonState extends State<AnimatedHoverIconTextButton> {
|
||||
late Color primaryColor;
|
||||
late Color secondaryColor;
|
||||
|
||||
void setColors(bool isPrimary) {
|
||||
if (isPrimary) {
|
||||
if (widget.enable == true) {
|
||||
primaryColor = widget.primaryColor;
|
||||
secondaryColor = widget.secondaryColor;
|
||||
} else {
|
||||
primaryColor = AppTheme.of(context).hintText;
|
||||
secondaryColor = AppTheme.of(context).primaryBackground;
|
||||
}
|
||||
} else {
|
||||
if (widget.enable == true) {
|
||||
primaryColor = widget.secondaryColor;
|
||||
secondaryColor = widget.primaryColor;
|
||||
} else {
|
||||
primaryColor = AppTheme.of(context).primaryBackground;
|
||||
secondaryColor = AppTheme.of(context).hintText;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
primaryColor = widget.primaryColor;
|
||||
secondaryColor = widget.secondaryColor;
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Tooltip(
|
||||
message: widget.tooltip,
|
||||
child: GestureDetector(
|
||||
onTap: widget.enable == true ? widget.onTap : null,
|
||||
child: MouseRegion(
|
||||
cursor: SystemMouseCursors.click,
|
||||
onEnter: (_) => setState(() => setColors(false)),
|
||||
onExit: (_) => setState(() => setColors(true)),
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
//width: (MediaQuery.of(context).size.width * 48 / 1920),
|
||||
//height: (MediaQuery.of(context).size.width * 48 / 1920),
|
||||
decoration: BoxDecoration(
|
||||
color: secondaryColor,
|
||||
borderRadius: const BorderRadius.all(Radius.circular(16)),
|
||||
border: Border.all(
|
||||
color: primaryColor,
|
||||
width: 1.5,
|
||||
),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
widget.icon,
|
||||
color: primaryColor,
|
||||
size: (MediaQuery.of(context).size.width * 25 / 1920),
|
||||
),
|
||||
const SizedBox(width: 5),
|
||||
Text(
|
||||
widget.text,
|
||||
style: AppTheme.of(context).bodyText3.override(
|
||||
fontFamily: AppTheme.of(context).bodyText3Family,
|
||||
color: primaryColor,
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
185
lib/pages/widgets/custom_button.dart
Normal file
185
lib/pages/widgets/custom_button.dart
Normal file
@@ -0,0 +1,185 @@
|
||||
import 'package:auto_size_text/auto_size_text.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class ButtonOptions {
|
||||
ButtonOptions({
|
||||
this.textStyle,
|
||||
this.elevation,
|
||||
this.height = 50,
|
||||
this.width,
|
||||
this.padding,
|
||||
required this.color,
|
||||
this.disabledColor = const Color(0xFF57636C),
|
||||
this.disabledTextColor = const Color(0xFFc1c7cc),
|
||||
this.splashColor,
|
||||
this.iconSize,
|
||||
this.iconColor,
|
||||
this.iconPadding,
|
||||
this.borderRadius,
|
||||
this.borderSide,
|
||||
this.disabled = false,
|
||||
});
|
||||
|
||||
final TextStyle? textStyle;
|
||||
final double? elevation;
|
||||
final double? height;
|
||||
final double? width;
|
||||
final EdgeInsetsGeometry? padding;
|
||||
final Color color;
|
||||
final Color disabledColor;
|
||||
final Color disabledTextColor;
|
||||
final Color? splashColor;
|
||||
final double? iconSize;
|
||||
final Color? iconColor;
|
||||
final EdgeInsetsGeometry? iconPadding;
|
||||
final BorderRadius? borderRadius;
|
||||
final BorderSide? borderSide;
|
||||
final bool disabled;
|
||||
}
|
||||
|
||||
class CustomButton extends StatefulWidget {
|
||||
const CustomButton({
|
||||
Key? key,
|
||||
required this.text,
|
||||
required this.onPressed,
|
||||
this.icon,
|
||||
this.iconData,
|
||||
required this.options,
|
||||
this.showLoadingIndicator = true,
|
||||
}) : super(key: key);
|
||||
|
||||
final String text;
|
||||
final Widget? icon;
|
||||
final IconData? iconData;
|
||||
final Function() onPressed;
|
||||
final ButtonOptions options;
|
||||
final bool showLoadingIndicator;
|
||||
|
||||
@override
|
||||
State<CustomButton> createState() => _CustomButtonState();
|
||||
}
|
||||
|
||||
class _CustomButtonState extends State<CustomButton> {
|
||||
bool loading = false;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
Widget textWidget = loading
|
||||
? Center(
|
||||
child: SizedBox(
|
||||
width: 23,
|
||||
height: 23,
|
||||
child: CircularProgressIndicator(
|
||||
valueColor: AlwaysStoppedAnimation<Color>(
|
||||
widget.options.textStyle?.color ?? Colors.white,
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
: AutoSizeText(
|
||||
widget.text,
|
||||
style: widget.options.textStyle,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
);
|
||||
|
||||
final onPressed =
|
||||
widget.options.disabled || (widget.showLoadingIndicator && loading)
|
||||
? null
|
||||
: () async {
|
||||
if (!widget.showLoadingIndicator) {
|
||||
widget.onPressed();
|
||||
return;
|
||||
}
|
||||
setState(() => loading = true);
|
||||
try {
|
||||
await widget.onPressed();
|
||||
} finally {
|
||||
if (mounted) {
|
||||
setState(() => loading = false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ButtonStyle style = ButtonStyle(
|
||||
shape: MaterialStateProperty.all<OutlinedBorder>(
|
||||
RoundedRectangleBorder(
|
||||
borderRadius:
|
||||
widget.options.borderRadius ?? BorderRadius.circular(8.0),
|
||||
side: widget.options.borderSide ?? BorderSide.none,
|
||||
),
|
||||
),
|
||||
foregroundColor: MaterialStateProperty.resolveWith<Color?>(
|
||||
(states) {
|
||||
if (states.contains(MaterialState.disabled) ||
|
||||
widget.options.disabled) {
|
||||
return widget.options.disabledTextColor;
|
||||
}
|
||||
return widget.options.textStyle?.color;
|
||||
},
|
||||
),
|
||||
backgroundColor: MaterialStateProperty.resolveWith<Color>(
|
||||
(states) {
|
||||
if (states.contains(MaterialState.disabled) ||
|
||||
widget.options.disabled) {
|
||||
return widget.options.disabledColor;
|
||||
}
|
||||
return widget.options.color;
|
||||
},
|
||||
),
|
||||
overlayColor: MaterialStateProperty.resolveWith<Color?>((states) {
|
||||
if (widget.options.disabled) {
|
||||
return null;
|
||||
}
|
||||
if (states.contains(MaterialState.pressed)) {
|
||||
return widget.options.splashColor;
|
||||
}
|
||||
return null;
|
||||
}),
|
||||
padding: MaterialStateProperty.all(widget.options.padding ??
|
||||
const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0)),
|
||||
elevation:
|
||||
MaterialStateProperty.all<double>(widget.options.elevation ?? 2.0),
|
||||
mouseCursor: MaterialStateProperty.resolveWith<MouseCursor?>(
|
||||
(Set<MaterialState> states) {
|
||||
if (widget.options.disabled) {
|
||||
return SystemMouseCursors.basic;
|
||||
}
|
||||
return SystemMouseCursors.click;
|
||||
},
|
||||
),
|
||||
);
|
||||
|
||||
if (widget.icon != null || widget.iconData != null) {
|
||||
return SizedBox(
|
||||
height: widget.options.height,
|
||||
width: widget.options.width,
|
||||
child: ElevatedButton.icon(
|
||||
icon: Padding(
|
||||
padding: widget.options.iconPadding ?? EdgeInsets.zero,
|
||||
child: widget.icon ??
|
||||
Icon(
|
||||
widget.iconData,
|
||||
size: widget.options.iconSize,
|
||||
color: widget.options.iconColor ??
|
||||
widget.options.textStyle?.color,
|
||||
),
|
||||
),
|
||||
label: textWidget,
|
||||
onPressed: onPressed,
|
||||
style: style,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return SizedBox(
|
||||
height: widget.options.height,
|
||||
width: widget.options.width,
|
||||
child: ElevatedButton(
|
||||
onPressed: onPressed,
|
||||
style: style,
|
||||
child: textWidget,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user