Skip to content

Instantly share code, notes, and snippets.

@Boghdady
Created February 19, 2020 12:15
Show Gist options
  • Save Boghdady/757a17092bbc9f5f9ea42b71611fcb27 to your computer and use it in GitHub Desktop.
Save Boghdady/757a17092bbc9f5f9ea42b71611fcb27 to your computer and use it in GitHub Desktop.
Image Gallary inside NestedScrollView
import 'dart:ffi';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';
import 'package:dots_indicator/dots_indicator.dart';
class MoreScreen extends StatefulWidget {
@override
_MoreScreenState createState() => _MoreScreenState();
}
class _MoreScreenState extends State<MoreScreen> {
final imageList = [
'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQMvxHn70yeyMLaA9lFnPkMWyN7IbchycwSMua0WORdKlLgK6zh',
'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcReJ5OkkzcDa0gB_ArKb13XaEmFL39NTUpzLiqrty8XvkO9pzF2',
'https://resocoder.com/wp-content/uploads/2019/04/thumbnail-1.png',
'https://kprofiles.com/wp-content/uploads/2019/11/D6aGkQlUcAAgf_n-533x800.jpg',
'https://support.apple.com/library/content/dam/edam/applecare/images/en_US/AppleArcade/ios13-iphone-xs-settings-game-center.png'
];
double currentIndexPage = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
print(innerBoxIsScrolled);
print(currentIndexPage);
return <Widget>[
SliverAppBar(
pinned: false,
expandedHeight: MediaQuery.of(context).size.height * 0.40,
flexibleSpace: FlexibleSpaceBar(
background: _buildImageGallery(),
),
),
];
},
body: _bodyContent(context),
),
);
}
Widget _buildImageGallery() {
return Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * 0.40,
width: MediaQuery.of(context).size.width,
child: ClipRect(
child: PhotoViewGallery.builder(
onPageChanged: (val) {
setState(() {
currentIndexPage = val.toDouble();
});
},
itemCount: imageList.length,
builder: (context, index) {
return PhotoViewGalleryPageOptions(
imageProvider: NetworkImage(
imageList[currentIndexPage.toInt()],
),
// Contained = the smallest possible size to fit one dimension of the screen
minScale: PhotoViewComputedScale.contained * 0.8,
// Covered = the smallest possible size to fit the whole screen
maxScale: PhotoViewComputedScale.covered * 2,
);
},
scrollPhysics: BouncingScrollPhysics(),
// Set the background color to the "classic white"
backgroundDecoration: BoxDecoration(
color: Theme.of(context).canvasColor,
),
loadingChild: Center(
child: CircularProgressIndicator(),
),
),
),
),
Column(
children: <Widget>[
SizedBox(height: MediaQuery.of(context).size.height * 0.38),
Center(
child: DotsIndicator(
dotsCount: imageList.length,
position: currentIndexPage,
decorator: DotsDecorator(
spacing: EdgeInsets.only(right: 4),
color: Colors.black54,
activeColor: Colors.teal,
size: Size(16.0, 5.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
activeSize: Size(16.0, 5.0),
activeShape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
),
),
),
],
),
],
)
],
);
}
// 2- body
Widget _bodyContent(BuildContext context) {
return Stack(
children: <Widget>[
SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
_buildFirstSection(),
_buildSectionTwo(),
],
),
),
),
],
);
}
Widget _buildFirstSection() {
return Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
width: 50,
padding: EdgeInsets.only(top: 0.0, bottom: 2.0, left: 6.0),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(6),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(
Icons.access_alarm,
size: 14,
color: Colors.white,
),
SizedBox(
width: 4.0,
),
Text(
'25',
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
],
),
),
SizedBox(width: 10),
Text(
'مو صلاح',
style: Theme.of(context).textTheme.title,
),
],
),
Text(
'In Sumnanuad (108 km)',
style: Theme.of(context).textTheme.subtitle,
),
Divider(
color: Colors.grey,
height: 6.0,
thickness: 0.2,
),
],
);
}
Widget _buildSectionTwo() {
return Container(
padding: EdgeInsets.only(right: 24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
'معلومات عني',
style: Theme.of(context).textTheme.title,
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
' jjdshjdshj',
),
SizedBox(
width: 16.0,
),
Icon(
Icons.home,
color: Colors.grey,
size: 24,
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
' jjdshjdshj',
),
SizedBox(
width: 16.0,
),
Icon(
Icons.accessibility,
color: Colors.grey,
size: 24,
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
' jjdshjdshj',
),
SizedBox(
width: 16.0,
),
Icon(
Icons.account_box,
color: Colors.grey,
size: 24,
),
],
),
],
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment