292 lines
10 KiB
Dart
292 lines
10 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:file_picker/file_picker.dart';
|
|
import 'package:google_fonts/google_fonts.dart';
|
|
|
|
import 'fileUploadService.dart';
|
|
|
|
class ThemedUploadField extends StatefulWidget {
|
|
final String? hintText;
|
|
final double? txtwidth;
|
|
final double? txtheight;
|
|
final double? fontSZ;
|
|
final double? borderCirculr;
|
|
final Color? backgroundColor;
|
|
final Color? borderColor;
|
|
final Color? errorBorderColor;
|
|
final Function(String fileName, PlatformFile file)? onFileSelected;
|
|
final Function(List<String> fileNames, List<PlatformFile> files)?
|
|
onFilesSelected;
|
|
FormFieldValidator<String>? validator;
|
|
final List<String>? allowedExtensions;
|
|
final bool isTxtBtnCase;
|
|
final String? txtName;
|
|
final double? padVertical;
|
|
final double? padHorizontal;
|
|
final bool allowMultiple;
|
|
|
|
ThemedUploadField({
|
|
super.key,
|
|
this.hintText,
|
|
this.txtwidth,
|
|
this.borderCirculr,
|
|
this.fontSZ,
|
|
this.txtheight,
|
|
this.backgroundColor,
|
|
this.borderColor,
|
|
this.errorBorderColor,
|
|
this.onFileSelected,
|
|
this.onFilesSelected,
|
|
this.validator,
|
|
this.allowedExtensions,
|
|
this.isTxtBtnCase = false,
|
|
this.txtName,
|
|
this.padVertical,
|
|
this.padHorizontal,
|
|
this.allowMultiple = false,
|
|
});
|
|
|
|
@override
|
|
State<ThemedUploadField> createState() => _ThemedUploadFieldState();
|
|
}
|
|
|
|
class _ThemedUploadFieldState extends State<ThemedUploadField> {
|
|
final fileService = FileUploadService();
|
|
String? selectedFileName;
|
|
String? selectedMultipleFileNames;
|
|
String? errorMessage;
|
|
|
|
// @override
|
|
// void didUpdateWidget(covariant ThemedUploadField oldWidget) {
|
|
// super.didUpdateWidget(oldWidget);
|
|
//
|
|
// if (widget.hintText != oldWidget.hintText) {
|
|
// setState(() {
|
|
// selectedFileName = null;
|
|
// errorMessage = null;
|
|
// });
|
|
// }
|
|
// }
|
|
|
|
Future<void> _pickFile() async {
|
|
final error = widget.allowMultiple
|
|
? await fileService.pickMultipleFiles(
|
|
allowedExtensions: widget.allowedExtensions,
|
|
)
|
|
: await fileService.pickSingleFile(
|
|
allowedExtensions: widget.allowedExtensions,
|
|
);
|
|
if (error != null) {
|
|
setState(() => errorMessage = error);
|
|
ScaffoldMessenger.of(
|
|
context,
|
|
).showSnackBar(SnackBar(content: Text(error)));
|
|
} else if (widget.allowMultiple && fileService.multipleFiles.isNotEmpty) {
|
|
final names = fileService.multipleFiles.map((file) => file.name).toList();
|
|
setState(() {
|
|
selectedMultipleFileNames = names.join(', ');
|
|
errorMessage = null;
|
|
});
|
|
|
|
widget.onFilesSelected?.call(names, fileService.multipleFiles);
|
|
} else if (!widget.allowMultiple && fileService.singleFile != null) {
|
|
setState(() {
|
|
selectedFileName = fileService.singleFile!.name;
|
|
errorMessage = null;
|
|
});
|
|
|
|
widget.onFileSelected?.call(
|
|
fileService.singleFile!.name,
|
|
fileService.singleFile!,
|
|
);
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Container(
|
|
width: widget.txtwidth ?? MediaQuery.of(context).size.width,
|
|
height: widget.txtheight,
|
|
child: DecoratedBox(
|
|
decoration: BoxDecoration(borderRadius: BorderRadius.circular(10)),
|
|
child: InkWell(
|
|
onTap: _pickFile,
|
|
|
|
borderRadius: BorderRadius.circular(10),
|
|
child: Container(
|
|
padding: EdgeInsets.symmetric(
|
|
vertical: widget.padVertical ?? 10,
|
|
horizontal: widget.padHorizontal ?? 15,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: widget.backgroundColor ?? Colors.white,
|
|
borderRadius: BorderRadius.circular(
|
|
widget.borderCirculr ?? 10,
|
|
),
|
|
border: Border.all(
|
|
color: errorMessage != null
|
|
? (widget.errorBorderColor ?? Colors.red)
|
|
: (widget.borderColor ??
|
|
widget.backgroundColor ??
|
|
Colors.grey.shade50),
|
|
),
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
if (!widget.isTxtBtnCase) ...[
|
|
Expanded(
|
|
child: Text(
|
|
(widget.allowMultiple
|
|
? selectedMultipleFileNames
|
|
: selectedFileName) ??
|
|
widget.hintText ??
|
|
"Upload Document",
|
|
style: TextStyle(
|
|
fontSize: widget.fontSZ ?? 12,
|
|
color: errorMessage != null
|
|
? Colors.red
|
|
: Colors.black,
|
|
),
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
const Icon(
|
|
Icons.file_upload_outlined,
|
|
color: Colors.black,
|
|
size: 12,
|
|
),
|
|
],
|
|
|
|
if (widget.isTxtBtnCase) ...[
|
|
Center(
|
|
child: Tooltip(
|
|
message: 'Upload Documents',
|
|
child: Text(
|
|
widget.txtName!,
|
|
style: GoogleFonts.inter(fontSize: 12),
|
|
),
|
|
),
|
|
),
|
|
// const Icon(
|
|
// Icons.file_upload_outlined,
|
|
// color: Colors.black,
|
|
// ),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
if (errorMessage != null)
|
|
Padding(
|
|
padding: const EdgeInsets.only(left: 8, top: 4),
|
|
child: Text(
|
|
errorMessage!,
|
|
style: const TextStyle(color: Colors.red, fontSize: 10),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
// class ThemedUploadField extends FormField<String> {
|
|
// ThemedUploadField({
|
|
// Key? key,
|
|
// String? hintText,
|
|
// double? txtwidth,
|
|
// double? txtheight,
|
|
// Color? backgroundColor,
|
|
// Color? borderColor,
|
|
// Color? errorBorderColor,
|
|
// FormFieldValidator<String>? validator,
|
|
// void Function(String fileName, PlatformFile file)? onFileSelected,
|
|
// }) : super(
|
|
// key: key,
|
|
// validator: validator,
|
|
// builder: (FormFieldState<String> state) {
|
|
// final fileService = FileUploadService();
|
|
// String? selectedFileName;
|
|
//
|
|
// Future<void> _pickFile(BuildContext context) async {
|
|
// final error = await fileService.pickSingleFile(maxFileSizeInMB: 3);
|
|
// if (error != null) {
|
|
// ScaffoldMessenger.of(
|
|
// context,
|
|
// ).showSnackBar(SnackBar(content: Text(error)));
|
|
// state.didChange(null); // mark invalid
|
|
// } else if (fileService.singleFile != null) {
|
|
// selectedFileName = fileService.singleFile!.name;
|
|
// state.didChange(selectedFileName); // update form value
|
|
//
|
|
// onFileSelected?.call(
|
|
// fileService.singleFile!.name,
|
|
// fileService.singleFile!,
|
|
// );
|
|
// }
|
|
// }
|
|
//
|
|
// return Column(
|
|
// crossAxisAlignment: CrossAxisAlignment.start,
|
|
// children: [
|
|
// Container(
|
|
// width: txtwidth ?? MediaQuery.of(state.context).size.width,
|
|
// height: txtheight,
|
|
// child: InkWell(
|
|
// onTap: () => _pickFile(state.context),
|
|
// child: Container(
|
|
// padding: const EdgeInsets.symmetric(
|
|
// vertical: 10,
|
|
// horizontal: 15,
|
|
// ),
|
|
// decoration: BoxDecoration(
|
|
// color: backgroundColor ?? Colors.white,
|
|
// borderRadius: BorderRadius.circular(10),
|
|
// border: Border.all(
|
|
// color: state.hasError
|
|
// ? (errorBorderColor ?? Colors.red)
|
|
// : (borderColor ?? Colors.grey.shade50),
|
|
// ),
|
|
// ),
|
|
// child: Row(
|
|
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
// children: [
|
|
// Expanded(
|
|
// child: Text(
|
|
// selectedFileName ?? hintText ?? "Upload Document",
|
|
// style: TextStyle(
|
|
// fontSize: 12,
|
|
// color: state.hasError
|
|
// ? Colors.red
|
|
// : Colors.black,
|
|
// ),
|
|
// overflow: TextOverflow.ellipsis,
|
|
// ),
|
|
// ),
|
|
// const Icon(
|
|
// Icons.file_upload_outlined,
|
|
// color: Colors.black,
|
|
// ),
|
|
// ],
|
|
// ),
|
|
// ),
|
|
// ),
|
|
// ),
|
|
// if (state.hasError)
|
|
// Padding(
|
|
// padding: const EdgeInsets.only(left: 8, top: 4),
|
|
// child: Text(
|
|
// state.errorText ?? "",
|
|
// style: const TextStyle(color: Colors.red, fontSize: 10),
|
|
// ),
|
|
// ),
|
|
// ],
|
|
// );
|
|
// },
|
|
// );
|
|
// }
|