Skip to content
This repository has been archived by the owner on Jan 6, 2025. It is now read-only.

Commit

Permalink
fix(capture): layout in landingscape during creation of collection
Browse files Browse the repository at this point in the history 
Wrapping the Column into a CustomScrollView to allow scrolling in landscape orientation.
Adding a Scrollbar to visually detect the ability to scroll.

Resolves #17
  • Loading branch information
@Thithip @luifr10
Thithip authored and luifr10 committed Mar 28, 2024
1 parent 1dbd1ed commit 79ff9a4
Showing 1 changed file with 155 additions and 142 deletions.
297 changes: 155 additions & 142 deletions lib/page/collection_creation_page.dart
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
part of panoramax;

class CollectionCreationPage extends StatefulWidget {
const CollectionCreationPage({Key? key, required this.imgList}) : super(key: key);
const CollectionCreationPage({required this.imgList, super.key});

final List<File> imgList;

Expand All @@ -14,7 +14,9 @@ class CollectionCreationPage extends StatefulWidget {
class _CarouselWithIndicatorState extends State<CollectionCreationPage> {
int _current = 0;
final CarouselController _carouselController = CarouselController();
final collectionNameTextController = TextEditingController(text: 'My collection ${DateFormat(DATE_FORMATTER).format(new DateTime.now())}');
final collectionNameTextController = TextEditingController(
text: 'My collection ${DateFormat(DATE_FORMATTER).format(DateTime.now())}',
);
final _formKey = GlobalKey<FormState>();

@override
Expand All @@ -23,164 +25,175 @@ class _CarouselWithIndicatorState extends State<CollectionCreationPage> {
super.dispose();
}

void goToHomePage(){
void goToHomePage() {
context.push(Routes.homepage, extra: availableCameras);
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: PanoramaxAppBar(context: context),
body: Form(
key: _formKey,
child:
Column(children: [
Padding(padding: const EdgeInsets.fromLTRB(16, 64, 16, 16),
child:
TextFormField(
decoration: InputDecoration(
border: UnderlineInputBorder(),
labelText: AppLocalizations.of(context)!.newSequenceNameField_placeholder,
appBar: PanoramaxAppBar(context: context),
body: Form(
key: _formKey,
child: Scrollbar(
child: CustomScrollView(
slivers: [
SliverFillRemaining(
hasScrollBody: false,
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(16, 64, 16, 16),
child: TextFormField(
decoration: InputDecoration(
border: const UnderlineInputBorder(),
labelText: AppLocalizations.of(context)!.newSequenceNameField_placeholder,
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter some text';
}
return null;
},
controller: collectionNameTextController,
)),
Flexible(
fit: FlexFit.tight,
child: CarouselSlider(
items: buildImageSlider(),
carouselController: _carouselController,
options: CarouselOptions(
autoPlay: true,
enlargeCenterPage: true,
aspectRatio: 2.0,
onPageChanged: (index, reason) {
setState(() {
_current = index;
});
},
),
),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter some text';
}
return null;
},
controller: collectionNameTextController,
)
),
Expanded(
child: CarouselSlider(
items: buildImageSlider(),
carouselController: _carouselController,
options: CarouselOptions(
autoPlay: true,
enlargeCenterPage: true,
aspectRatio: 2.0,
onPageChanged: (index, reason) {
setState(() {
_current = index;
});
}),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: widget.imgList.asMap().entries.map((entry) {
return GestureDetector(
onTap: () => _carouselController.animateToPage(entry.key),
child: Container(
width: 12.0,
height: 12.0,
margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 4.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: (Theme.of(context).brightness == Brightness.dark
? Colors.white
: Colors.black)
.withOpacity(_current == entry.key ? 0.9 : 0.4)),
),
);
}).toList(),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 64, 0, 32),
child: LoadingBtn(
height: 50,
borderRadius: 8,
animate: true,
width: MediaQuery.of(context).size.width * 0.45,
loader: Container(
padding: const EdgeInsets.all(10),
width: 40,
height: 40,
child: const CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: widget.imgList.asMap().entries.map(
(entry) {
return GestureDetector(
onTap: () => _carouselController.animateToPage(entry.key),
child: Container(
width: 12.0,
height: 12.0,
margin: const EdgeInsets.symmetric(
vertical: 8.0,
horizontal: 4.0,
),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: (Theme.of(context).brightness == Brightness.dark ? Colors.white : Colors.black)
.withOpacity(
_current == entry.key ? 0.9 : 0.4,
),
),
),
);
},
).toList(),
),
),
child: Text(AppLocalizations.of(context)!.newSequenceSendButton),
onTap: (startLoading, stopLoading, btnState) async {
if (_formKey.currentState!.validate() && btnState == ButtonState.idle) {
startLoading();
// call your network api
await submitNewCollection(collectionName: collectionNameTextController.text, picturesToUpload: widget.imgList);
stopLoading();
}
},
Padding(
padding: const EdgeInsets.fromLTRB(0, 64, 0, 32),
child: LoadingBtn(
height: 50,
borderRadius: 8,
animate: true,
width: MediaQuery.of(context).size.width * 0.45,
loader: Container(
padding: const EdgeInsets.all(10),
width: 40,
height: 40,
child: const CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
),
),
child: Text(AppLocalizations.of(context)!.newSequenceSendButton),
onTap: (startLoading, stopLoading, btnState) async {
if (_formKey.currentState!.validate() && btnState == ButtonState.idle) {
startLoading();
// call your network api
await submitNewCollection(
collectionName: collectionNameTextController.text,
picturesToUpload: widget.imgList,
);
stopLoading();
}
},
),
),
],
),
),
),
]),
)
);
],
),
),
));
}

Future<void> submitNewCollection({required String collectionName, required List<File> picturesToUpload}){
return CollectionsApi.INSTANCE.apiCollectionsCreate(newCollectionName: collectionName)
.then((createdCollection) {
debugPrint('Created Collection ${createdCollection}');
picturesToUpload.asMap().forEach((index, pictureToUpload) async {
await CollectionsApi.INSTANCE.apiCollectionsUploadPicture(
collectionId: createdCollection.id,
position: index + 1,
pictureToUpload: pictureToUpload
)
.then((value) {
debugPrint('Picture ${index + 1} uploaded');
})
.catchError((error) =>
throw Exception(error)
);
});
goToHomePage();
})
.catchError((error) =>
throw Exception(error)
);
Future<void> submitNewCollection({required String collectionName, required List<File> picturesToUpload}) {
return CollectionsApi.INSTANCE.apiCollectionsCreate(newCollectionName: collectionName).then((createdCollection) {
debugPrint('Created Collection $createdCollection');
picturesToUpload.asMap().forEach((index, pictureToUpload) async {
await CollectionsApi.INSTANCE
.apiCollectionsUploadPicture(
collectionId: createdCollection.id, position: index + 1, pictureToUpload: pictureToUpload)
.then((value) {
debugPrint('Picture ${index + 1} uploaded');
}).catchError((error) => throw Exception(error));
});
goToHomePage();
}).catchError((error) => throw Exception(error));
}

List<Widget> buildImageSlider() {
return widget.imgList
.map((item) => Container(
child: Container(
margin: EdgeInsets.all(5.0),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
child: Stack(
children: <Widget>[
Image.file(item, fit: BoxFit.cover, width: 1000.0),
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color.fromARGB(200, 0, 0, 0),
Color.fromARGB(0, 0, 0, 0)
],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
.map(
(item) => Container(
margin: const EdgeInsets.all(5.0),
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(5.0)),
child: Stack(
children: <Widget>[
Image.file(item, fit: BoxFit.cover, width: 1000.0),
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [Color.fromARGB(200, 0, 0, 0), Color.fromARGB(0, 0, 0, 0)],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
),
),
padding: EdgeInsets.symmetric(
vertical: 10.0, horizontal: 20.0),
child: Text(
'No. ${widget.imgList.indexOf(item) + 1} image',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.bold,
padding: const EdgeInsets.symmetric(
vertical: 10.0,
horizontal: 20.0,
),
child: Text(
'No. ${widget.imgList.indexOf(item) + 1} image',
style: const TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
),
),
),
],
)),
),
))
],
),
),
),
)
.toList();
}
}
}

0 comments on commit 79ff9a4

Please sign in to comment.