Search code examples
flutterdartonbackpressed

backpress takes user to the first image in list


I'm opening an image from the list of images in full screen mode but when I back press and come to the image list the page goes on top of the list and then I have to scroll down everytime.

Is there a way that when I backpress the image from full screen it goes to the image which was tapped for full screen rather then going on top of list.

image list page-

class _PageOneState extends State<PageOne> with AutomaticKeepAliveClientMixin<PageOne> {
  ScrollController scroller = ScrollController();
  @override
  bool get wantKeepAlive => true;
  List<dynamic> imageUrlList;
  getImageUrls() async {
    var url = 'https://simple.firebaseio.com/QWE.json';
    await http.get(url).then((res) {
      if (res.statusCode == 200) {
        var resData = json.decode(res.body);
        setState(() {
          imageUrlList = resData['URL'];
        });
      }
    });
  }
  @override
  void initState() {
    super.initState();
    getImageUrls();
  }
  @override
  void dispose() {
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    super.build(context); // need to call super method.
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      body:imageUrlList != nul       ?
      StaggeredGridView.countBuilder(
        key: UniqueKey(),
        padding: const EdgeInsets.all(8.0),
        crossAxisCount: 4,
        itemCount:  imageUrlList.length,
        itemBuilder: (BuildContext context,int index) {
          String imgPath =imageUrlList[index].toString();
          return new Material(
            elevation: 8.0,
            borderRadius:
            new BorderRadius.all(new Radius.circular(8.0)),
            child: new InkWell(
              onTap:() {Navigator.push(
                    context,new MaterialPageRoute(builder: (context) =>
                        new FullScreenImagePage(imgPath)));
              },
              child: new Hero(
                tag: imgPath,
                child: new FadeInImage(
                  image: new CachedNetworkImageProvider(imgPath),
                ),
              ),
            ),
          );
        },
        staggeredTileBuilder: (i) =>
        new StaggeredTile.count(2, i.isEven ? 2 : 3),
        mainAxisSpacing: 8.0,
        crossAxisSpacing: 8.0,
      )
          : new Center(
        child: new CircularProgressIndicator(),
      ),
);
  }
}

full screen page-

class FullScreenImagePage extends StatelessWidget {
  String imgPath;
  FullScreenImagePage(this.imgPath);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new SizedBox.expand(
        child: new Container(
          decoration: new BoxDecoration(gradient: backgroundGradient),
          child: new Stack(
            children: <Widget>[
              new Align(
                alignment: Alignment.center,
                child: new Hero(
                  tag: imgPath,
                  child: new Image.network(imgPath),
                ),
              ),
              new Align(
                alignment: Alignment.topCenter,
                child: new Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    new AppBar(
                      elevation: 0.0,
                      backgroundColor: Colors.transparent,
                      leading: new IconButton(
                        icon: new Icon(
                          Icons.close,
                          color: Colors.black,
                        ),
                        onPressed: () => Navigator.of(context).pop(),
                      ),),],),),],),),),); }

Solution

  • I'm not familiar with StaggeredGridView, but typically if you want to save the ScrollPosition of a scroll view widget, you give it a PageStorageKey (as opposed to the UniqueKey you are using).

    When the scroll view is rebuilt with the same PageStorageKey, it will fetch the previous scroll position and set it appropriately for the scroll view, bringing you back to the location you were at before you pushed to the new Route.

    You can read more about PageStorageKey here.