UNOV/tablet-app
1
0
Fork 0
mirror of https://bitbucket.org/FransoletThomas/tablet-app.git synced 2025-12-06 08:31:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Slider + change image layout in marker view (cover instead of contain)

Browse Source
This commit is contained in:
Thomas Fransolet 2021-07-19 18:06:21 +02:00
parent 880f717004
commit 65d6c648cd
3 changed files with 189 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
lib/Screens/MainView/main_view.dart
View File

@ -86,7 +86,7 @@ class _MainViewWidget extends State<MainViewWidget> {
child: Container( child: Container(
/*width: 125, /*width: 125,
height: 125,*/ height: 125,*/
decoration: boxDecoration(sectionSelected), decoration: boxDecoration(sectionSelected, true),
), ),
), ),
), ),
@ -126,11 +126,11 @@ class _MainViewWidget extends State<MainViewWidget> {
), ),
), ),
Padding( Padding(
padding: const EdgeInsets.only(left: 15.0, right: 15.0, top: 15.0), padding: sectionSelected.type != SectionType.slider ? const EdgeInsets.only(left: 15.0, right: 15.0, top: 15.0) : const EdgeInsets.only(top: 15.0),
child: Container( child: Container(
width: size.width, width: size.width,
height: size.height * 0.85, height: size.height * 0.85,
decoration: sectionSelected.type != SectionType.video && sectionSelected.type != SectionType.web ? BoxDecoration( decoration: sectionSelected.type != SectionType.video && sectionSelected.type != SectionType.web && sectionSelected.type != SectionType.slider && sectionSelected.type != SectionType.map ? BoxDecoration(
color: kBackgroundLight, color: kBackgroundLight,
shape: BoxShape.rectangle, shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(30.0), borderRadius: BorderRadius.circular(30.0),
@ -151,10 +151,10 @@ class _MainViewWidget extends State<MainViewWidget> {
], ],
), ),
), ),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, floatingActionButtonLocation: FloatingActionButtonLocation.endTop,
floatingActionButton: Container( floatingActionButton: Container(
height: 130.0, height: 150.0,
width: 130.0, width: 150.0,
child: FittedBox( child: FittedBox(
child: FloatingActionButton.extended( child: FloatingActionButton.extended(
onPressed: () { onPressed: () {
@ -184,10 +184,9 @@ class _MainViewWidget extends State<MainViewWidget> {
child: FutureBuilder( child: FutureBuilder(
future: getSections(appContext), future: getSections(appContext),
builder: (context, AsyncSnapshot<dynamic> snapshot) { builder: (context, AsyncSnapshot<dynamic> snapshot) {
print('helloo test');
if (snapshot.connectionState == ConnectionState.done) { if (snapshot.connectionState == ConnectionState.done) {
if (snapshot.data == null) { if (snapshot.data == null) {
return Text("ERROR CALL 0498/07.95.35"); return Text("ERROR");
} }
else { else {
return GridView.builder( return GridView.builder(
@ -202,7 +201,7 @@ class _MainViewWidget extends State<MainViewWidget> {
}); });
}, },
child: Container( child: Container(
decoration: boxDecoration(snapshot.data[index]), decoration: boxDecoration(snapshot.data[index], false),
padding: const EdgeInsets.all(25), padding: const EdgeInsets.all(25),
margin: EdgeInsets.symmetric(vertical: 25, horizontal: 25), margin: EdgeInsets.symmetric(vertical: 25, horizontal: 25),
child: Align( child: Align(
@ -265,14 +264,14 @@ class _MainViewWidget extends State<MainViewWidget> {
} }
} }
boxDecoration(SectionDTO section) { boxDecoration(SectionDTO section, bool isSelected) {
return BoxDecoration( return BoxDecoration(
color: kBackgroundLight, color: kBackgroundLight,
shape: BoxShape.rectangle, shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(30.0), borderRadius: BorderRadius.circular(30.0),
image: section.imageSource != null ? new DecorationImage( image: section.imageSource != null ? new DecorationImage(
fit: BoxFit.cover, fit: BoxFit.cover,
colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.6), BlendMode.dstATop), colorFilter: !isSelected? new ColorFilter.mode(Colors.black.withOpacity(0.35), BlendMode.dstATop) : null,
image: new NetworkImage( image: new NetworkImage(
section.imageSource, section.imageSource,
), ),

26
lib/Screens/Map/marker_view.dart
View File

@ -105,17 +105,29 @@ class _MarkerInfoWidget extends State<MarkerViewWidget> {
items: mapContext.getSelectedMarker().images.map<Widget>((i) { items: mapContext.getSelectedMarker().images.map<Widget>((i) {
return Builder( return Builder(
builder: (BuildContext context) { builder: (BuildContext context) {
return Container( return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: MediaQuery.of(context).size.width, width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0), borderRadius: BorderRadius.circular(20.0),
border: Border.all(width: 0.3, color: kSecondGrey), border: Border.all(width: 0.3, color: kSecondGrey),
), image: i.imageSource != null ? new DecorationImage(
child: Image.network( fit: BoxFit.cover,
image: new NetworkImage(
i.imageSource, i.imageSource,
fit: BoxFit.contain ),
) ): null,
boxShadow: [
BoxShadow(
color: kBackgroundSecondGrey,
spreadRadius: 0.3,
blurRadius: 3,
offset: Offset(0, 1.1), // changes position of shadow
),
],
),
),
); );
}, },
); );

144
lib/Screens/Slider/slider_view.dart
View File

@ -1,7 +1,10 @@
import 'dart:convert'; import 'dart:convert';
import 'package:carousel_slider/carousel_slider.dart'; import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:managerapi/api.dart'; import 'package:managerapi/api.dart';
import 'package:provider/provider.dart';
import 'package:tablet_app/app_context.dart';
import 'package:tablet_app/constants.dart'; import 'package:tablet_app/constants.dart';
class SliderViewWidget extends StatefulWidget { class SliderViewWidget extends StatefulWidget {
@ -14,11 +17,13 @@ class SliderViewWidget extends StatefulWidget {
class _SliderViewWidget extends State<SliderViewWidget> { class _SliderViewWidget extends State<SliderViewWidget> {
SliderDTO sliderDTO; SliderDTO sliderDTO;
CarouselController sliderController;
int currentIndex = 1;
@override @override
void initState() { void initState() {
print(widget.section.data); sliderController = CarouselController();
sliderDTO = SliderDTO.fromJson(jsonDecode(widget.section.data)); sliderDTO = SliderDTO.fromJson(jsonDecode(widget.section.data));
print(sliderDTO);
sliderDTO.images.sort((a, b) => a.order.compareTo(b.order)); sliderDTO.images.sort((a, b) => a.order.compareTo(b.order));
@ -27,24 +32,31 @@ class _SliderViewWidget extends State<SliderViewWidget> {
@override @override
void dispose() { void dispose() {
sliderController = null;
super.dispose(); super.dispose();
} }
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size; Size size = MediaQuery.of(context).size;
final appContext = Provider.of<AppContext>(context);
return Padding( return Stack(
padding: const EdgeInsets.only(top: 75), children: [
child: Center( Column(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [ children: [
if(sliderDTO.images != null && sliderDTO.images.length > 0) if(sliderDTO.images != null && sliderDTO.images.length > 0)
CarouselSlider( CarouselSlider(
carouselController: sliderController,
options: CarouselOptions( options: CarouselOptions(
height: size.height *0.3, onPageChanged: (int index, CarouselPageChangedReason reason) {
setState(() {
currentIndex = index + 1;
});
},
height: MediaQuery.of(context).size.height * 0.8,
enlargeCenterPage: true, enlargeCenterPage: true,
reverse: false, reverse: false,
), ),
@ -53,20 +65,130 @@ class _SliderViewWidget extends State<SliderViewWidget> {
builder: (BuildContext context) { builder: (BuildContext context) {
return Container( return Container(
width: MediaQuery.of(context).size.width, width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
margin: EdgeInsets.symmetric(horizontal: 5.0), margin: EdgeInsets.symmetric(horizontal: 5.0),
decoration: BoxDecoration( decoration: BoxDecoration(
color: kBackgroundGrey,
borderRadius: BorderRadius.circular(10.0), borderRadius: BorderRadius.circular(10.0),
border: Border.all(width: 0.3, color: kSecondGrey), //border: Border.all(width: 0.3, color: kSecondGrey),
), ),
child: Image.network( child: Column(
//crossAxisAlignment: CrossAxisAlignment.center,
//mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
height: MediaQuery.of(context).size.height * 0.6,
width: MediaQuery.of(context).size.width * 0.72,
decoration: BoxDecoration(
color: kBackgroundLight,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(20.0),
image: i.source_ != null ? new DecorationImage(
fit: BoxFit.cover,
image: new NetworkImage(
i.source_, i.source_,
fit: BoxFit.contain ),
): null,
boxShadow: [
BoxShadow(
color: kBackgroundSecondGrey,
spreadRadius: 0.5,
blurRadius: 5,
offset: Offset(0, 1.5), // changes position of shadow
),
],
),
child: Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Text(i.title.firstWhere((translation) => translation.language == appContext.getContext().language).value, textAlign: TextAlign.center, style: TextStyle(fontSize: 35, color: kBackgroundLight)),
)),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Container(
width: MediaQuery.of(context).size.width *0.65,
height: MediaQuery.of(context).size.height *0.25,
decoration: BoxDecoration(
color: kBackgroundLight,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
color: kBackgroundSecondGrey,
spreadRadius: 0.3,
blurRadius: 4,
offset: Offset(0, 2), // changes position of shadow
),
],
),
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Text(i.description.firstWhere((translation) => translation.language == appContext.getContext().language).value, textAlign: TextAlign.center, style: TextStyle(fontSize: 15)),
),
),
),
),
),
],
) )
); );
}, },
); );
}).toList(), }).toList(),
), ),
],
),
Positioned(
top: MediaQuery.of(context).size.height * 0.35,
right: 60,
child: InkWell(
onTap: () {
sliderController.nextPage(duration: new Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
},
child: Icon(
Icons.chevron_right,
size: 150,
color: kMainRed,
),
)
),
Positioned(
top: MediaQuery.of(context).size.height * 0.35,
left: 60,
child: InkWell(
onTap: () {
sliderController.previousPage(duration: new Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
},
child: Icon(
Icons.chevron_left,
size: 150,
color: kMainRed,
),
)
),
if(sliderDTO.images != null && sliderDTO.images.length > 0)
Padding(
padding: const EdgeInsets.only(bottom: 0),
child: Align(
alignment: Alignment.bottomCenter,
child: InkWell(
onTap: () {
sliderController.previousPage(duration: new Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
},
child: Text(
currentIndex.toString()+'/'+sliderDTO.images.length.toString(),
style: TextStyle(fontSize: 30, fontWeight: FontWeight.w500),
),
)
),
),
// Description // Description
/*Container( /*Container(
height: sliderDTO.images != null && sliderDTO.images.length > 0 ? size.height *0.3 : size.height *0.6, height: sliderDTO.images != null && sliderDTO.images.length > 0 ? size.height *0.3 : size.height *0.6,
@ -92,8 +214,6 @@ class _SliderViewWidget extends State<SliderViewWidget> {
), ),
),*/ ),*/
] ]
),
),
); );
} }
} }