improvements

design_3.0_demo_module
Sikander Saleem 8 months ago
parent eead9bed02
commit 0a38bdd9e1

@ -12,7 +12,7 @@ extension BuildContextExtension on BuildContext {
List<String> get getIssues => [translation.reason1, translation.reason2, translation.reason3, translation.reason4, translation.reason5]; List<String> get getIssues => [translation.reason1, translation.reason2, translation.reason3, translation.reason4, translation.reason5];
bool get isDark => Provider.of<SettingProvider>(this).theme == "dark"; bool get isDark => Provider.of<SettingProvider>(this, listen: false).theme == "dark";
bool get isAr => Provider.of<SettingProvider>(this).language == "ar"; bool get isAr => Provider.of<SettingProvider>(this).language == "ar";
@ -28,7 +28,7 @@ extension BuildContextExtension on BuildContext {
), ),
); );
void showBottomSheet(Widget childWidget, {bool? isDismissible, String? title}) => showModalBottomSheet( Future showBottomSheet(Widget childWidget, {bool? isDismissible, String? title}) => showModalBottomSheet(
context: this, context: this,
useSafeArea: true, useSafeArea: true,
isScrollControlled: true, isScrollControlled: true,

@ -182,66 +182,110 @@ class _MultiFilesPickerState extends State<MultiFilesPicker> {
); );
} }
onFilePicker() async { Widget gridItemNew(String icon, String label) {
if (widget.files.length >= 5) { return Container(
Fluttertoast.showToast(msg: context.translation.maxImagesNumberIs5); padding: const EdgeInsets.all(12),
return; decoration: BoxDecoration(
} color: Colors.white,
ImageSource? source = await showModalBottomSheet<ImageSource>( borderRadius: BorderRadius.circular(12),
context: context, border: Border.all(color: const Color(0xffF1F1F1), width: 1),
builder: (BuildContext context) { ),
Widget listCard({required String icon, required String label, required VoidCallback onTap}) {
return GestureDetector(
onTap: onTap,
child: Container(
constraints: BoxConstraints(minWidth: 111.toScreenWidth, minHeight: 111.toScreenHeight),
padding: EdgeInsets.symmetric(horizontal: 12.toScreenWidth, vertical: 12.toScreenHeight),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(12), border: Border.all(width: 1, color: AppColor.white70)),
child: Column( child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
icon.toSvgAsset(), icon.toSvgAsset(),
24.height,
label.bodyText2(context).custom(color: AppColor.black20), label.bodyText2(context).custom(color: AppColor.black20),
], ],
), ),
),
); );
} }
return Container( onFilePicker() async {
padding: const EdgeInsets.all(16.0), if (widget.files.length >= 5) {
child: Row( Fluttertoast.showToast(msg: context.translation.maxImagesNumberIs5);
mainAxisAlignment: MainAxisAlignment.spaceBetween, return;
}
ImageSource? source = await context.showBottomSheet(
GridView(
padding: const EdgeInsets.all(0),
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, childAspectRatio: 1, crossAxisSpacing: 12, mainAxisSpacing: 12),
children: <Widget>[ children: <Widget>[
listCard( gridItemNew('camera_icon', context.translation.pickFromCamera).onPress(() => Navigator.of(context).pop(ImageSource.camera)),
icon: 'camera_icon', gridItemNew('gallery_icon', context.translation.pickFromGallery).onPress(() => Navigator.of(context).pop(ImageSource.gallery)),
label: '${context.translation.open}\n${context.translation.camera}', gridItemNew('file_icon', context.translation.pickFromFiles).onPress(() async {
onTap: () {
Navigator.of(context).pop(ImageSource.camera);
},
),
listCard(
icon: 'gallery_icon',
label: '${context.translation.open}\n${context.translation.gallery}',
onTap: () {
Navigator.of(context).pop(ImageSource.gallery);
},
),
listCard(
icon: 'file_icon',
label: '${context.translation.open}\n${context.translation.files}',
onTap: () async {
await fromFilePicker(); await fromFilePicker();
Navigator.pop(context); Navigator.pop(context);
}, }),
),
], ],
), ),
); title: "Attach File");
}, //
); // showModalBottomSheet<ImageSource>(
// context: context,
// builder: (BuildContext context) {
// return;
// },
// );
// ImageSource? source = await showModalBottomSheet<ImageSource>(
// context: context,
// builder: (BuildContext context) {
// Widget listCard({required String icon, required String label, required VoidCallback onTap}) {
// return GestureDetector(
// onTap: onTap,
// child: Container(
// constraints: BoxConstraints(minWidth: 111.toScreenWidth, minHeight: 111.toScreenHeight),
// padding: EdgeInsets.symmetric(horizontal: 12.toScreenWidth, vertical: 12.toScreenHeight),
// decoration: BoxDecoration(borderRadius: BorderRadius.circular(12), border: Border.all(width: 1, color: AppColor.white70)),
// child: Column(
// mainAxisSize: MainAxisSize.min,
// crossAxisAlignment: CrossAxisAlignment.start,
// children: [
// icon.toSvgAsset(),
// 24.height,
// label.bodyText2(context).custom(color: AppColor.black20),
// ],
// ),
// ),
// );
// }
//
// return Container(
// padding: const EdgeInsets.all(16.0),
// child: Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
// children: <Widget>[
// listCard(
// icon: 'camera_icon',
// label: '${context.translation.open}\n${context.translation.camera}',
// onTap: () {
// Navigator.of(context).pop(ImageSource.camera);
// },
// ),
// listCard(
// icon: 'gallery_icon',
// label: '${context.translation.open}\n${context.translation.gallery}',
// onTap: () {
// Navigator.of(context).pop(ImageSource.gallery);
// },
// ),
// listCard(
// icon: 'file_icon',
// label: '${context.translation.open}\n${context.translation.files}',
// onTap: () async {
// await fromFilePicker();
// Navigator.pop(context);
// },
// ),
// ],
// ),
// );
// },
// );
// ImageSource source = await showDialog( // ImageSource source = await showDialog(
// context: context, // context: context,
// builder: (dialogContext) => CupertinoAlertDialog( // builder: (dialogContext) => CupertinoAlertDialog(
@ -304,247 +348,219 @@ class AttachmentModel {
} }
} }
class AttachmentPicker extends StatefulWidget { // class AttachmentPicker extends StatefulWidget {
final String label; // final String label;
final bool error; // final bool error;
final List<AttachmentModel> attachment; // final List<AttachmentModel> attachment;
//
final bool enabled, onlyImages; // final bool enabled, onlyImages;
double? buttonHeight; // double? buttonHeight;
Widget? buttonIcon; // Widget? buttonIcon;
Color? buttonColor; // Color? buttonColor;
final Function(List<AttachmentModel>)? onChange; // final Function(List<AttachmentModel>)? onChange;
final bool showAsGrid; // final bool showAsGrid;
//
AttachmentPicker( // AttachmentPicker(
{Key? key, // {Key? key,
this.attachment = const <AttachmentModel>[], // this.attachment = const <AttachmentModel>[],
required this.label, // required this.label,
this.error = false, // this.error = false,
this.buttonHeight, // this.buttonHeight,
this.buttonIcon, // this.buttonIcon,
this.enabled = true, // this.enabled = true,
this.onlyImages = false, // this.onlyImages = false,
this.onChange, // this.onChange,
this.showAsGrid = false, // this.showAsGrid = false,
this.buttonColor}) // this.buttonColor})
: super(key: key); // : super(key: key);
//
@override // @override
State<AttachmentPicker> createState() => _AttachmentPickerState(); // State<AttachmentPicker> createState() => _AttachmentPickerState();
} // }
//
class _AttachmentPickerState extends State<AttachmentPicker> { // class _AttachmentPickerState extends State<AttachmentPicker> {
@override // @override
Widget build(BuildContext context) { // Widget build(BuildContext context) {
return Column( // return Column(
crossAxisAlignment: CrossAxisAlignment.start, // crossAxisAlignment: CrossAxisAlignment.start,
children: [ // children: [
AppDashedButton( // AppDashedButton(
title: widget.label, // title: widget.label,
height: widget.buttonHeight, // height: widget.buttonHeight,
buttonColor: widget.buttonColor, // buttonColor: widget.buttonColor,
icon: widget.buttonIcon, // icon: widget.buttonIcon,
onPressed: (widget.enabled == false) // onPressed: (widget.enabled == false)
? () {} // ? () {}
: widget.showAsGrid // : widget.showAsGrid
? showFileSourceSheet // ? showFileSourceSheet
: onFilePicker), // : onFilePicker),
16.height, // 16.height,
if (widget.attachment.isNotEmpty) // if (widget.attachment.isNotEmpty)
Wrap( // Wrap(
spacing: 8.toScreenWidth, // spacing: 8.toScreenWidth,
children: List.generate( // children: List.generate(
widget.attachment.length, // widget.attachment.length,
(index) { // (index) {
File image = widget.attachment[index].file!; // File image = widget.attachment[index].file!;
return MultiFilesPickerItem( // return MultiFilesPickerItem(
file: image, // file: image,
enabled: widget.enabled, // enabled: widget.enabled,
onRemoveTap: (image) { // onRemoveTap: (image) {
if (!widget.enabled) { // if (!widget.enabled) {
return; // return;
} // }
widget.attachment.remove(image); // widget.attachment.remove(image);
if (widget.onChange != null) { // if (widget.onChange != null) {
widget.onChange!(widget.attachment); // widget.onChange!(widget.attachment);
} // }
setState(() {}); // setState(() {});
}, // },
); // );
}, // },
), // ),
), // ),
], // ],
); // );
} // }
//
fromFilePicker() async { // fromFilePicker() async {
FilePickerResult? result = await FilePicker.platform.pickFiles( // FilePickerResult? result = await FilePicker.platform.pickFiles(
type: FileType.custom, // type: FileType.custom,
allowMultiple: true, // allowMultiple: true,
allowedExtensions: widget.onlyImages ? ['jpg', 'jpeg', 'png'] : ['jpg', 'jpeg', 'png', 'pdf', 'doc', 'docx', 'xlsx', 'pptx'], // allowedExtensions: widget.onlyImages ? ['jpg', 'jpeg', 'png'] : ['jpg', 'jpeg', 'png', 'pdf', 'doc', 'docx', 'xlsx', 'pptx'],
); // );
if (result != null) { // if (result != null) {
for (var path in result.paths) { // for (var path in result.paths) {
widget.attachment.add(AttachmentModel(0, File(path!))); // widget.attachment.add(AttachmentModel(0, File(path!)));
} // }
setState(() {}); // setState(() {});
} // }
} // }
//
void showFileSourceSheet() async { // void showFileSourceSheet() async {
if (widget.attachment.length >= 5) { // if (widget.attachment.length >= 5) {
Fluttertoast.showToast(msg: context.translation.maxImagesNumberIs5); // Fluttertoast.showToast(msg: context.translation.maxImagesNumberIs5);
return; // return;
} // }
//
ImageSource source = (await showModalBottomSheet( // ImageSource source = (await showModalBottomSheet(
context: context,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
top: Radius.circular(20),
),
),
clipBehavior: Clip.antiAliasWithSaveLayer,
builder: (BuildContext context) => Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
"Attach File".heading4(context),
12.height,
GridView(
padding: const EdgeInsets.all(0),
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, childAspectRatio: 1, crossAxisSpacing: 12, mainAxisSpacing: 12),
children: <Widget>[
gridItem(Icons.camera_enhance_rounded, context.translation.pickFromCamera).onPress(() => Navigator.of(context).pop(ImageSource.camera)),
gridItem(Icons.image_rounded, context.translation.pickFromGallery).onPress(() => Navigator.of(context).pop(ImageSource.gallery)),
gridItem(Icons.file_present_rounded, context.translation.pickFromFiles).onPress(() async {
await fromFilePicker();
Navigator.pop(context);
}),
],
),
12.height,
],
).paddingAll(21),
)) as ImageSource;
final pickedFile = await ImagePicker().pickImage(source: source, imageQuality: 70, maxWidth: 800, maxHeight: 800);
if (pickedFile != null) {
File fileImage = File(pickedFile.path);
widget.attachment.add(AttachmentModel(0, fileImage));
if (widget.onChange != null) {
widget.onChange!(widget.attachment);
}
setState(() {});
}
}
Widget gridItem(IconData iconData, String title) {
return Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: const Color(0xffF1F1F1), width: 1),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(iconData, color: const Color(0xff7D859A), size: 36),
Text(
title,
style: const TextStyle(fontSize: 12, fontWeight: FontWeight.w500),
),
],
),
);
}
onFilePicker() async {
if (widget.attachment.length >= 5) {
Fluttertoast.showToast(msg: context.translation.maxImagesNumberIs5);
return;
}
ImageSource? source = await showModalBottomSheet<ImageSource>(
context: context,
builder: (BuildContext context) {
Widget listCard({required String icon, required String label, required VoidCallback onTap}) {
return GestureDetector(
onTap: onTap,
child: Container(
constraints: BoxConstraints(minWidth: 111.toScreenWidth, minHeight: 111.toScreenHeight),
padding: EdgeInsets.symmetric(horizontal: 12.toScreenWidth, vertical: 12.toScreenHeight),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(12), border: Border.all(width: 1, color: AppColor.white70)),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
icon.toSvgAsset(),
24.height,
label.bodyText2(context).custom(color: AppColor.black20),
],
),
),
);
}
return Container(
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
listCard(
icon: 'camera_icon',
label: '${context.translation.open}\n${context.translation.camera}',
onTap: () {
Navigator.of(context).pop(ImageSource.camera);
},
),
listCard(
icon: 'gallery_icon',
label: '${context.translation.open}\n${context.translation.gallery}',
onTap: () {
Navigator.of(context).pop(ImageSource.gallery);
},
),
listCard(
icon: 'file_icon',
label: '${context.translation.open}\n${context.translation.files}',
onTap: () async {
await fromFilePicker();
Navigator.pop(context);
},
),
],
),
);
},
);
// ImageSource source = await showDialog(
// context: context, // context: context,
// builder: (dialogContext) => CupertinoAlertDialog( // shape: const RoundedRectangleBorder(
// actions: <Widget>[ // borderRadius: BorderRadius.vertical(
// TextButton( // top: Radius.circular(20),
// child: Text(context.translation.pickFromCamera), // ),
// onPressed: () { // ),
// Navigator.of(dialogContext).pop(ImageSource.camera); // clipBehavior: Clip.antiAliasWithSaveLayer,
// builder: (BuildContext context) => Column(
// mainAxisSize: MainAxisSize.min,
// crossAxisAlignment: CrossAxisAlignment.start,
// children: [
// "Attach File".heading4(context),
// 12.height,
// GridView(
// padding: const EdgeInsets.all(0),
// shrinkWrap: true,
// physics: const NeverScrollableScrollPhysics(),
// gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, childAspectRatio: 1, crossAxisSpacing: 12, mainAxisSpacing: 12),
// children: <Widget>[
// gridItem(Icons.camera_enhance_rounded, context.translation.pickFromCamera).onPress(() => Navigator.of(context).pop(ImageSource.camera)),
// gridItem(Icons.image_rounded, context.translation.pickFromGallery).onPress(() => Navigator.of(context).pop(ImageSource.gallery)),
// gridItem(Icons.file_present_rounded, context.translation.pickFromFiles).onPress(() async {
// await fromFilePicker();
// Navigator.pop(context);
// }),
// ],
// ),
// 12.height,
// ],
// ).paddingAll(21),
// )) as ImageSource;
//
// final pickedFile = await ImagePicker().pickImage(source: source, imageQuality: 70, maxWidth: 800, maxHeight: 800);
//
// if (pickedFile != null) {
// File fileImage = File(pickedFile.path);
// widget.attachment.add(AttachmentModel(0, fileImage));
// if (widget.onChange != null) {
// widget.onChange!(widget.attachment);
// }
// setState(() {});
// }
// }
//
// Widget gridItem(IconData iconData, String title) {
// return Container(
// padding: const EdgeInsets.all(12),
// decoration: BoxDecoration(
// color: Colors.white,
// borderRadius: BorderRadius.circular(12),
// border: Border.all(color: const Color(0xffF1F1F1), width: 1),
// ),
// child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
// children: [
// Icon(iconData, color: const Color(0xff7D859A), size: 36),
// Text(
// title,
// style: const TextStyle(fontSize: 12, fontWeight: FontWeight.w500),
// ),
// ],
// ),
// );
// }
//
// onFilePicker() async {
// if (widget.attachment.length >= 5) {
// Fluttertoast.showToast(msg: context.translation.maxImagesNumberIs5);
// return;
// }
// ImageSource? source = await showModalBottomSheet<ImageSource>(
// context: context,
// builder: (BuildContext context) {
// Widget listCard({required String icon, required String label, required VoidCallback onTap}) {
// return GestureDetector(
// onTap: onTap,
// child: Container(
// constraints: BoxConstraints(minWidth: 111.toScreenWidth, minHeight: 111.toScreenHeight),
// padding: EdgeInsets.symmetric(horizontal: 12.toScreenWidth, vertical: 12.toScreenHeight),
// decoration: BoxDecoration(borderRadius: BorderRadius.circular(12), border: Border.all(width: 1, color: AppColor.white70)),
// child: Column(
// mainAxisSize: MainAxisSize.min,
// crossAxisAlignment: CrossAxisAlignment.start,
// children: [
// icon.toSvgAsset(),
// 24.height,
// label.bodyText2(context).custom(color: AppColor.black20),
// ],
// ),
// ),
// );
// }
//
// return Container(
// padding: const EdgeInsets.all(16.0),
// child: Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
// children: <Widget>[
// listCard(
// icon: 'camera_icon',
// label: '${context.translation.open}\n${context.translation.camera}',
// onTap: () {
// Navigator.of(context).pop(ImageSource.camera);
// }, // },
// ), // ),
// TextButton( // listCard(
// child: Text(context.translation.pickFromGallery), // icon: 'gallery_icon',
// onPressed: () { // label: '${context.translation.open}\n${context.translation.gallery}',
// Navigator.of(dialogContext).pop(ImageSource.gallery); // onTap: () {
// Navigator.of(context).pop(ImageSource.gallery);
// }, // },
// ), // ),
// TextButton( // listCard(
// child: Text(context.translation.pickFromFiles), // icon: 'file_icon',
// onPressed: () async { // label: '${context.translation.open}\n${context.translation.files}',
// onTap: () async {
// await fromFilePicker(); // await fromFilePicker();
// Navigator.pop(context); // Navigator.pop(context);
// }, // },
@ -552,19 +568,47 @@ class _AttachmentPickerState extends State<AttachmentPicker> {
// ], // ],
// ), // ),
// ); // );
if (source == null) return; // },
// );
final pickedFile = await ImagePicker().pickImage(source: source, imageQuality: 70, maxWidth: 800, maxHeight: 800); // // ImageSource source = await showDialog(
// // context: context,
if (pickedFile != null) { // // builder: (dialogContext) => CupertinoAlertDialog(
File fileImage = File(pickedFile.path); // // actions: <Widget>[
widget.attachment.add(AttachmentModel(0, fileImage)); // // TextButton(
if (widget.onChange != null) { // // child: Text(context.translation.pickFromCamera),
widget.onChange!(widget.attachment); // // onPressed: () {
} // // Navigator.of(dialogContext).pop(ImageSource.camera);
setState(() {}); // // },
} // // ),
// // TextButton(
setState(() {}); // // child: Text(context.translation.pickFromGallery),
} // // onPressed: () {
} // // Navigator.of(dialogContext).pop(ImageSource.gallery);
// // },
// // ),
// // TextButton(
// // child: Text(context.translation.pickFromFiles),
// // onPressed: () async {
// // await fromFilePicker();
// // Navigator.pop(context);
// // },
// // ),
// // ],
// // ),
// // );
// if (source == null) return;
//
// final pickedFile = await ImagePicker().pickImage(source: source, imageQuality: 70, maxWidth: 800, maxHeight: 800);
//
// if (pickedFile != null) {
// File fileImage = File(pickedFile.path);
// widget.attachment.add(AttachmentModel(0, fileImage));
// if (widget.onChange != null) {
// widget.onChange!(widget.attachment);
// }
// setState(() {});
// }
//
// setState(() {});
// }
// }

Loading…
Cancel
Save