Image Gallary inside NestedScrollView

ImageGallary.dart

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,
              ),
            ],
          ),
        ],
      ),
    );
  }
}