178 lines
7.2 KiB
Dart
178 lines
7.2 KiB
Dart
import 'dart:convert';
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:manager_api/api.dart';
|
|
import 'package:mymuseum_visitapp/Components/Loading.dart';
|
|
import 'package:mymuseum_visitapp/Helpers/DatabaseHelper.dart';
|
|
import 'package:mymuseum_visitapp/Helpers/translationHelper.dart';
|
|
import 'package:mymuseum_visitapp/Models/articleRead.dart';
|
|
import 'package:mymuseum_visitapp/Models/visitContext.dart';
|
|
import 'package:mymuseum_visitapp/Services/apiService.dart';
|
|
import 'package:mymuseum_visitapp/app_context.dart';
|
|
import 'package:mymuseum_visitapp/constants.dart';
|
|
import 'package:provider/provider.dart';
|
|
|
|
class SectionCard extends StatelessWidget {
|
|
const SectionCard({
|
|
Key? key,
|
|
required this.itemIndex,
|
|
required this.itemCount,
|
|
required this.sectionDTO,
|
|
required this.press,
|
|
}) : super(key: key);
|
|
|
|
final int itemIndex;
|
|
final int itemCount;
|
|
final SectionDTO sectionDTO;
|
|
final void Function()? press;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
// It will provide us total height and width of our screen
|
|
Size size = MediaQuery.of(context).size;
|
|
final appContext = Provider.of<AppContext>(context);
|
|
VisitAppContext visitAppContext = appContext.getContext();
|
|
bool isOffline = (appContext.getContext() as VisitAppContext).configuration!.isOffline!;
|
|
|
|
return Container(
|
|
margin: EdgeInsets.only(
|
|
left: kDefaultPadding,
|
|
right: kDefaultPadding,
|
|
bottom: itemIndex+1 == itemCount ? kDefaultPadding : 0
|
|
),
|
|
height: 160,
|
|
decoration: const BoxDecoration(
|
|
boxShadow: [kDefaultShadow],
|
|
),
|
|
child: InkWell(
|
|
onTap: press,
|
|
child: Stack(
|
|
alignment: Alignment.bottomCenter,
|
|
children: <Widget>[
|
|
// Those are our background
|
|
Container(
|
|
height: 136,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(22),
|
|
color: itemIndex.isEven ? kBlue0 : kBlue1,
|
|
),
|
|
child: Container(
|
|
margin: const EdgeInsets.only(right: 10),
|
|
decoration: BoxDecoration(
|
|
color: visitAppContext.readArticles.any((element) => element.id == sectionDTO.id) ? kBackgroundGrey : Colors.white,
|
|
border: Border.all(
|
|
color: kBlue2,
|
|
width: 0.2,
|
|
),
|
|
borderRadius: BorderRadius.circular(22),
|
|
),
|
|
),
|
|
),
|
|
if(sectionDTO.imageId != null)
|
|
// section main image
|
|
Positioned(
|
|
top: kDefaultPadding +4.0,
|
|
right: -10,
|
|
child: /*Hero(
|
|
tag: '${sectionDTO.id}',
|
|
child:*/ Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: kDefaultPadding),
|
|
height: 136,
|
|
// image is square but we add extra 20 + 20 padding thats why width is 200
|
|
width: size.width*0.5,
|
|
child: FutureBuilder(
|
|
future: ApiService.getResource(appContext, sectionDTO.imageId!),
|
|
builder: (context, AsyncSnapshot<dynamic> snapshot) {
|
|
if (snapshot.connectionState == ConnectionState.done) {
|
|
return snapshot.data != null ? ClipRRect(
|
|
borderRadius: const BorderRadius.only(topRight: Radius.circular(20), bottomRight: Radius.circular(20)),
|
|
child: isOffline ?
|
|
Image.memory(
|
|
base64Decode(snapshot.data!.data!),
|
|
fit: BoxFit.cover
|
|
) :
|
|
Image.network(
|
|
sectionDTO.imageSource!,
|
|
fit: BoxFit.cover,
|
|
loadingBuilder: (BuildContext context, Widget child,
|
|
ImageChunkEvent? loadingProgress) {
|
|
if (loadingProgress == null) {
|
|
return child;
|
|
}
|
|
return Center(
|
|
child: CircularProgressIndicator(
|
|
color: kBlue1,
|
|
value: loadingProgress.expectedTotalBytes != null
|
|
? loadingProgress.cumulativeBytesLoaded /
|
|
loadingProgress.expectedTotalBytes!
|
|
: null,
|
|
),
|
|
);
|
|
},
|
|
),
|
|
) : const Text("");
|
|
} else if (snapshot.connectionState == ConnectionState.none) {
|
|
return Text(TranslationHelper.getFromLocale("noData", appContext.getContext()));
|
|
} else {
|
|
return Center(
|
|
child: SizedBox(
|
|
height: size.height * 0.15,
|
|
child: const Loading()
|
|
)
|
|
);
|
|
}
|
|
}
|
|
)
|
|
),
|
|
//),
|
|
),
|
|
// Section title and order
|
|
Positioned(
|
|
bottom: 0,
|
|
left: 0,
|
|
child: SizedBox(
|
|
height: 136,
|
|
// our image take 200 width, thats why we set out total width - 200
|
|
width: size.width - 200,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: <Widget>[
|
|
const Spacer(),
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: kDefaultPadding),
|
|
child: Text(
|
|
TranslationHelper.get(sectionDTO.title, appContext.getContext()),
|
|
style: Theme.of(context).textTheme.button,
|
|
),
|
|
),
|
|
// it use the available space
|
|
const Spacer(),
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: kDefaultPadding * 1.5, // 30 padding
|
|
vertical: kDefaultPadding / 4, // 5 top and bottom
|
|
),
|
|
decoration: const BoxDecoration(
|
|
color: kBlue2,
|
|
borderRadius: BorderRadius.only(
|
|
bottomLeft: Radius.circular(22),
|
|
topRight: Radius.circular(22),
|
|
),
|
|
),
|
|
child: Text(
|
|
"${sectionDTO.order!+1}",
|
|
//style: Theme.of(context).textTheme.button,
|
|
style: const TextStyle(color: Colors.white)
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|