MarianumMobile/Client
3
1
Fork 0
Code Issues 16 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

overhauled feedback dialog UI, implemented async action buttons for submission and image picking, and added a custom image preview widget

Browse Source
This commit is contained in:
Elias Müller
2026-05-13 19:07:06 +02:00
parent cfcb901adb
commit 843686358f
2 changed files with 158 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/view/pages/more/feedback/feedback_dialog.dart
+155 -158
View File
@@ -1,18 +1,13 @@
import 'dart:async';
import 'dart:convert'; import 'dart:convert';
import 'dart:typed_data'; import 'dart:typed_data';
import 'package:badges/badges.dart' as badges;
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:image_picker/image_picker.dart';
import 'package:loader_overlay/loader_overlay.dart';
import 'package:package_info_plus/package_info_plus.dart'; import 'package:package_info_plus/package_info_plus.dart';
import '../../../../api/mhsl/server/feedback/add_feedback.dart'; import '../../../../api/mhsl/server/feedback/add_feedback.dart';
import '../../../../api/mhsl/server/feedback/add_feedback_params.dart'; import '../../../../api/mhsl/server/feedback/add_feedback_params.dart';
import '../../../../model/account_data.dart'; import '../../../../model/account_data.dart';
import '../../../../state/app/modules/settings/bloc/settings_cubit.dart'; import '../../../../widget/async_action_button.dart';
import '../../../../widget/file_pick.dart'; import '../../../../widget/file_pick.dart';
import '../../../../widget/focus_behaviour.dart'; import '../../../../widget/focus_behaviour.dart';
import '../../../../widget/info_dialog.dart'; import '../../../../widget/info_dialog.dart';
@@ -25,187 +20,189 @@ class FeedbackDialog extends StatefulWidget {
} }
class _FeedbackDialogState extends State<FeedbackDialog> { class _FeedbackDialogState extends State<FeedbackDialog> {
final ImagePicker picker = ImagePicker();
final TextEditingController _feedbackInput = TextEditingController(); final TextEditingController _feedbackInput = TextEditingController();
final AsyncActionController _sendController = AsyncActionController();
final AsyncActionController _pickController = AsyncActionController();
Uint8List? _image; Uint8List? _image;
String? _error;
bool _textFieldEmpty = false; bool _textFieldEmpty = false;
@override @override
void initState() { void initState() {
super.initState(); super.initState();
_feedbackInput.addListener(() { _feedbackInput.addListener(() {
setState(() { if (_textFieldEmpty && _feedbackInput.text.isNotEmpty) {
_textFieldEmpty = _feedbackInput.text.isEmpty; setState(() => _textFieldEmpty = false);
_error = null; }
});
}); });
} }
@override @override
Widget build(BuildContext context) => Scaffold( void dispose() {
appBar: AppBar(title: const Text('Feedback')), _feedbackInput.dispose();
body: SingleChildScrollView( _sendController.dispose();
child: Column( _pickController.dispose();
mainAxisSize: MainAxisSize.max, super.dispose();
children: [ }
const SizedBox(height: 5),
const Text( Future<void> _pickImage() async {
'Feedback, Anregungen, Ideen, Fehler und Verbesserungen', final picked = await FilePick.singleGalleryPick();
textAlign: TextAlign.center, if (picked == null) return;
), final data = await picked.readAsBytes();
const SizedBox(height: 15), if (!mounted) return;
const Text( setState(() => _image = data);
'Bitte gib keine geheimen Daten wie z.B. Passwörter weiter.', }
textAlign: TextAlign.center,
style: TextStyle(fontSize: 11), Future<void> _submit() async {
), if (_feedbackInput.text.trim().isEmpty) {
const SizedBox(height: 20), setState(() => _textFieldEmpty = true);
Padding( return;
padding: const EdgeInsets.all(10), }
child: TextField( final info = await PackageInfo.fromPlatform();
await AddFeedback(
AddFeedbackParams(
user: AccountData().getUserSecret(),
feedback: _feedbackInput.text,
screenshot: _image != null ? base64Encode(_image!) : null,
appVersion: int.parse(info.buildNumber),
),
).run();
if (!mounted) return;
Navigator.of(context).pop();
InfoDialog.show(context, 'Danke für dein Feedback!');
}
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Scaffold(
appBar: AppBar(title: const Text('Feedback')),
body: SingleChildScrollView(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
'Feedback, Anregungen, Ideen, Fehler und Verbesserungen',
textAlign: TextAlign.center,
style: theme.textTheme.titleMedium,
),
const SizedBox(height: 6),
Text(
'Bitte gib keine geheimen Daten wie z.B. Passwörter weiter.',
textAlign: TextAlign.center,
style: theme.textTheme.bodySmall?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
),
),
const SizedBox(height: 20),
TextField(
controller: _feedbackInput,
autofocus: true,
minLines: 5,
maxLines: 8,
textCapitalization: TextCapitalization.sentences,
onChanged: (value) { onChanged: (value) {
if (value.trim().toLowerCase() == 'ranzig') { if (value.trim().toLowerCase() == 'ranzig') {
_feedbackInput.text = 'selber'; _feedbackInput.text = 'selber';
} }
}, },
controller: _feedbackInput,
autofocus: true,
decoration: InputDecoration( decoration: InputDecoration(
border: const OutlineInputBorder(), border: const OutlineInputBorder(),
label: const Text('Feedback und Verbesserungen'), label: const Text('Deine Nachricht'),
hintText: 'Was möchtest du uns mitteilen?',
errorText: _textFieldEmpty errorText: _textFieldEmpty
? 'Bitte gib eine Beschreibung an!' ? 'Bitte gib eine Beschreibung an!'
: null, : null,
), ),
minLines: 4, onTapOutside: (_) =>
maxLines: 7,
onTapOutside: (PointerDownEvent event) =>
FocusBehaviour.textFieldTapOutside(context), FocusBehaviour.textFieldTapOutside(context),
), ),
), const SizedBox(height: 16),
const SizedBox(height: 10), if (_image != null)
if (_image != null) Center(
Row( child: _ImagePreview(
mainAxisAlignment: MainAxisAlignment.center, bytes: _image!,
children: [ onRemove: () => setState(() => _image = null),
badges.Badge(
badgeContent: const Icon(Icons.close_outlined, size: 17),
badgeStyle: const badges.BadgeStyle(
padding: EdgeInsets.all(2),
),
child: Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(5)),
border: Border.all(
width: 3,
color: Theme.of(context).primaryColor,
),
),
height: 150,
child: Image(
image: Image.memory(_image!).image,
fit: BoxFit.contain,
),
),
onTap: () async {
setState(() {
_image = null;
});
},
), ),
], )
), else
Padding( Align(
padding: const EdgeInsets.all(5), alignment: Alignment.centerLeft,
child: Visibility( child: AsyncTextButton(
visible: _error != null, controller: _pickController,
child: Visibility( onPressed: _pickImage,
visible: context.read<SettingsCubit>().val().devToolsEnabled, child: const Row(
replacement: const Text( mainAxisSize: MainAxisSize.min,
'Senden fehlgeschlagen, bitte überprüfe die Internetverbindung.', children: [
textAlign: TextAlign.center, Icon(Icons.attach_file_outlined, size: 18),
style: TextStyle(color: Colors.red), SizedBox(width: 6),
), Text('Screenshot anhängen'),
child: Text( ],
'Senden fehlgeschlagen: \n $_error', ),
textAlign: TextAlign.center,
style: const TextStyle(color: Colors.red),
), ),
), ),
const SizedBox(height: 8),
Align(
alignment: Alignment.centerRight,
child: AsyncTextButton(
controller: _sendController,
onPressed: _submit,
child: const Text('Senden'),
),
), ),
), ],
Padding( ),
padding: const EdgeInsets.only(right: 20, left: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Visibility(
visible: _image == null,
child: IconButton(
onPressed: () async {
context.loaderOverlay.show();
final picked = await FilePick.multipleGalleryPick();
final imageData = await picked?.first.readAsBytes();
if (context.mounted) context.loaderOverlay.hide();
setState(() {
_image = imageData;
});
},
icon: const Icon(Icons.attach_file_outlined),
),
),
const Expanded(child: SizedBox.shrink()),
TextButton(
onPressed: () async {
if (_feedbackInput.text.isEmpty) {
setState(() {
_textFieldEmpty = true;
});
return;
}
context.loaderOverlay.show();
unawaited(
AddFeedback(
AddFeedbackParams(
user: AccountData().getUserSecret(),
feedback: _feedbackInput.text,
screenshot: _image != null
? base64Encode(_image!)
: null,
appVersion: int.parse(
(await PackageInfo.fromPlatform()).buildNumber,
),
),
)
.run()
.then((value) {
if (!context.mounted) return;
Navigator.of(context).pop();
InfoDialog.show(
context,
'Danke für dein Feedback!',
);
context.loaderOverlay.hide();
})
.catchError((Object error, StackTrace trace) {
if (!mounted) return;
setState(() {
_error = error.toString();
});
if (!context.mounted) return;
context.loaderOverlay.hide();
}),
);
},
child: const Text('Senden'),
),
],
),
),
],
), ),
), );
}
}
class _ImagePreview extends StatelessWidget {
final Uint8List bytes;
final VoidCallback onRemove;
const _ImagePreview({required this.bytes, required this.onRemove});
@override
Widget build(BuildContext context) => Stack(
children: [
Padding(
// Reserve space inside the Stack bounds for the close button.
// Without it the button would sit on a negative Positioned and
// Flutter wouldn't hit-test taps outside the Stack rect.
padding: const EdgeInsets.only(top: 10, right: 10),
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Theme.of(context).colorScheme.outlineVariant,
),
borderRadius: BorderRadius.circular(8),
),
constraints: const BoxConstraints(maxHeight: 200),
child: Image.memory(bytes, fit: BoxFit.contain),
),
),
),
Positioned(
top: 0,
right: 0,
child: Material(
color: Theme.of(context).colorScheme.surface,
shape: const CircleBorder(),
elevation: 2,
child: InkWell(
customBorder: const CircleBorder(),
onTap: onRemove,
child: const Padding(
padding: EdgeInsets.all(4),
child: Icon(Icons.close, size: 18),
),
),
),
),
],
); );
} }
lib/widget/file_pick.dart
+3
View File
@@ -9,6 +9,9 @@ class FilePick {
return pickedImages.isNotEmpty ? pickedImages : null; return pickedImages.isNotEmpty ? pickedImages : null;
} }
static Future<XFile?> singleGalleryPick() =>
_picker.pickImage(source: ImageSource.gallery);
static Future<XFile?> cameraPick() => static Future<XFile?> cameraPick() =>
_picker.pickImage(source: ImageSource.camera); _picker.pickImage(source: ImageSource.camera);