First designs for ui
This commit is contained in:
verboomp
@@ -1,15 +1,260 @@
|
||||
import 'dart:convert' show base64Decode;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:go_router/go_router.dart';
|
||||
|
||||
import 'package:intl/intl.dart';
|
||||
|
||||
import 'package:fotodocumentation/controller/base_controller.dart';
|
||||
import 'package:fotodocumentation/l10n/app_localizations.dart';
|
||||
import 'package:fotodocumentation/controller/customer_controller.dart';
|
||||
import 'package:fotodocumentation/dto/customer_dto.dart';
|
||||
import 'package:fotodocumentation/pages/ui_utils/component/general_error_widget.dart';
|
||||
import 'package:fotodocumentation/pages/ui_utils/component/page_header_widget.dart';
|
||||
import 'package:fotodocumentation/pages/ui_utils/component/waiting_widget.dart';
|
||||
import 'package:fotodocumentation/pages/ui_utils/general_style.dart';
|
||||
import 'package:fotodocumentation/utils/di_container.dart';
|
||||
import 'package:fotodocumentation/utils/global_router.dart';
|
||||
|
||||
class CustomerWidget extends StatefulWidget {
|
||||
const CustomerWidget({super.key});
|
||||
final int customerId;
|
||||
const CustomerWidget({super.key, required this.customerId});
|
||||
|
||||
@override
|
||||
State<CustomerWidget> createState() => _CustomerWidgetState();
|
||||
}
|
||||
|
||||
class _CustomerWidgetState extends State<CustomerWidget> {
|
||||
CustomerController get _customerController => DiContainer.get();
|
||||
GeneralStyle get _generalStyle => DiContainer.get();
|
||||
|
||||
late Future<CustomerDto?> _dto;
|
||||
late DateFormat _dateFormat;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_dateFormat = DateFormat('dd MMMM yyyy');
|
||||
_dto = _customerController.get(id: widget.customerId);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return const Placeholder();
|
||||
return Scaffold(
|
||||
body: Container(
|
||||
color: _generalStyle.pageBackgroundColor,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(top: 8.0, left: 50.0, right: 50.0, bottom: 8.0),
|
||||
child: _body(context),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Widget _body(BuildContext context) {
|
||||
return FutureBuilder<CustomerDto?>(
|
||||
future: _dto,
|
||||
builder: (BuildContext context, AsyncSnapshot<CustomerDto?> snapshot) {
|
||||
if (snapshot.connectionState != ConnectionState.done) {
|
||||
return const WaitingWidget();
|
||||
}
|
||||
if (snapshot.hasData) {
|
||||
CustomerDto? dto = snapshot.data;
|
||||
|
||||
return _mainWidget(dto);
|
||||
} else if (snapshot.hasError) {
|
||||
var error = snapshot.error;
|
||||
return (error is ServerError) ? GeneralErrorWidget.fromServerError(error) : GeneralErrorWidget(error: snapshot.error.toString());
|
||||
}
|
||||
return const WaitingWidget();
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _mainWidget(CustomerDto? dto) {
|
||||
if (dto == null) {
|
||||
return Text(
|
||||
AppLocalizations.of(context)!.customerWidgetNotFound,
|
||||
style: TextStyle(
|
||||
fontFamily: _generalStyle.fontFamily,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 20,
|
||||
color: _generalStyle.secondaryWidgetBackgroundColor,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
var subText = AppLocalizations.of(context)!.customerWidgetCustomerNumberPrefix(dto.customerNumber);
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
PageHeaderWidget(text: dto.name, subText: subText),
|
||||
_backButton(context),
|
||||
const SizedBox(height: 24),
|
||||
Expanded(
|
||||
child: _customerWidget(dto),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _customerWidget(CustomerDto dto) {
|
||||
var dtos = dto.pictures;
|
||||
|
||||
return Card(
|
||||
margin: EdgeInsets.zero,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
_tableHeaderRow(context),
|
||||
Divider(thickness: 2, height: 1, color: _generalStyle.secondaryWidgetBackgroundColor),
|
||||
Expanded(
|
||||
child: ListView.separated(
|
||||
padding: const EdgeInsets.only(top: 8.0),
|
||||
itemCount: dtos.length,
|
||||
itemBuilder: (BuildContext context, int index) {
|
||||
return _tableDataRow(context, dtos[index]);
|
||||
},
|
||||
separatorBuilder: (BuildContext context, int index) => Divider(color: _generalStyle.secondaryWidgetBackgroundColor),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _tableHeaderRow(BuildContext context) {
|
||||
final headerStyle = TextStyle(
|
||||
fontFamily: _generalStyle.fontFamily,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 20,
|
||||
color: _generalStyle.secondaryWidgetBackgroundColor,
|
||||
);
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(
|
||||
flex: 1,
|
||||
child: Align(
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
AppLocalizations.of(context)!.customerWidgetHeaderFoto,
|
||||
style: headerStyle,
|
||||
),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
flex: 3,
|
||||
child: Align(
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
AppLocalizations.of(context)!.customerWidgetHeaderComment,
|
||||
style: headerStyle,
|
||||
),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
flex: 2,
|
||||
child: Align(
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
AppLocalizations.of(context)!.customerWidgetHeaderUploadDate,
|
||||
style: headerStyle,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _tableDataRow(BuildContext context, PictureDto dto) {
|
||||
final dataStyle = TextStyle(
|
||||
fontFamily: _generalStyle.fontFamily,
|
||||
fontSize: 16.0,
|
||||
color: _generalStyle.secondaryTextLabelColor,
|
||||
);
|
||||
|
||||
final dateStr = _dateFormat.format(dto.pictureDate);
|
||||
return InkWell(
|
||||
onTap: () => _actionSelect(context, dto),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(
|
||||
flex: 1,
|
||||
child: Align(
|
||||
alignment: Alignment.centerLeft,
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxWidth: 70, maxHeight: 70),
|
||||
child: Image.memory(
|
||||
base64Decode(dto.image),
|
||||
fit: BoxFit.contain,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
flex: 3,
|
||||
child: Align(
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(dto.comment ?? "", style: dataStyle),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
flex: 2,
|
||||
child: Align(
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(dateStr, style: dataStyle),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Future<void> _actionSelect(BuildContext context, PictureDto dto) async {
|
||||
context.go("${GlobalRouter.pathPicture}/${dto.id}");
|
||||
}
|
||||
|
||||
Widget _backButton(BuildContext context) {
|
||||
return ElevatedButton.icon(
|
||||
onPressed: () => context.go(GlobalRouter.pathHome),
|
||||
icon: Icon(
|
||||
Icons.chevron_left,
|
||||
color: _generalStyle.secondaryTextLabelColor,
|
||||
size: 24,
|
||||
),
|
||||
label: Text(
|
||||
AppLocalizations.of(context)!.backButtonLabel,
|
||||
style: TextStyle(
|
||||
fontFamily: _generalStyle.fontFamily,
|
||||
fontWeight: FontWeight.normal,
|
||||
fontSize: 16,
|
||||
color: _generalStyle.secondaryTextLabelColor,
|
||||
),
|
||||
),
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: Colors.white,
|
||||
elevation: 0,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user