Question 74904 in Flutter Question posted in
The official Flutter documentation can be found here.

PageView builder starts from first index – Flutter

I am working on a project which uses PageView builder. I want to open screens from the onClick index, but it always starts from index 0. How can I display them with current index with swipe up left and right both direction?

Here is my code-

GridView.builder(
                              itemCount: snapshot.data!.data.length,
                              itemBuilder: (BuildContext context, int index) {
                                return GestureDetector(
                                  onTap: () {
                                    showDialog(
                                        context: context,
                                        builder: (
                                            BuildContext context) {
                                          return PageView.builder(
                                            controller: _pageController,
                                            itemCount: snapshot.data!.data.length,
                                            scrollDirection: Axis.horizontal,
                                            reverse: false,
                                            //onPageChanged: (page) => setState(() => _activeImageIndex = page),
                                            itemBuilder: (BuildContext context, int index) {
                                              return Center(
                                                child: Padding(
                                                  padding: EdgeInsets.symmetric(horizontal: 4.0),
                                                  child: Container(
                                                    decoration: BoxDecoration(
                                                      borderRadius: BorderRadius.circular(10),
                                                      color: Colors.white,
                                                    ),
                                                    height: 300.h,
                                                    width: 1.sw,
                                                    child: Image.network(snapshot.data!.data[index].thumb, fit: BoxFit.cover,),
                                                  ),
                                                ),
                                              );
                                            },
                                          );
                                        });
                                  },
                                  child: Column(
                                      crossAxisAlignment: CrossAxisAlignment.stretch,
                                      children: <Widget>[
                                        Container(
                                          height: 150.h,
                                          decoration: BoxDecoration(
                                            borderRadius: BorderRadius.circular(10.r),
                                            image: DecorationImage(
                                                image: NetworkImage(
                                                    snapshot.data!.data[index].thumb.toString()
                                                ),
                                                fit: BoxFit.cover
                                            ),
                                          ),
                                        ),
                                        Container(
                                            padding: EdgeInsets.symmetric(vertical: 3.h, horizontal: 2.w),
                                            child: Align(alignment: Alignment.center,child: Text(snapshot.data!.data[index].prodName,
                                              style: TextStyle(color: kblue, fontSize: 15.sp, fontWeight: FontWeight.w400),),)
                                        )
                                      ]),
                                );
                              },
                            );
Tags:

2

Answers


  1. 0

    I think in the dialog, you should wrap StatefulBuilder to show changes using setState. Here you can see example.

    showDialog(
        context: context,
        builder: (
            BuildContext context) {
          return StatefulBuilder(builder: (context,setState){return PageView.builder(
            controller: _pageController,
            itemCount: snapshot.data!.data.length,
            scrollDirection: Axis.horizontal,
            reverse: false,
            onPageChanged: (page) => setState(() => _activeImageIndex = page),
            ..........
    Login or Signup to reply.
  2. 0

    Create a new Stateful Page CustomPageView with two variables int index and List imageList and make them required inside contructor:

    import 'package:flutter/material.dart';

class CustomPageView extends StatefulWidget {

  final int index;
  final List imageList;

  const CustomPageView({Key? key,
    required this.index,
    required this.imageList,
  }) : super(key: key);

  @override
  State<CustomPageView> createState() => _CustomPageViewState();
}

class _CustomPageViewState extends State<CustomPageView> {

  late PageController _pageController;

  @override
  void initState() {
    _pageController = PageController(initialPage: widget.index);
    //this is here the controller takes the index and scrolls to that Page
    super.initState();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView.builder(
        controller: _pageController,
        itemCount: widget.imageList.length,
        scrollDirection: Axis.horizontal,
        reverse: false,
        itemBuilder: (BuildContext context, index) {
          return Center(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 4.0),
              child: Container(
                height: 300,
                width: 100,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.white,
                ),
                child: Image.network(widget.imageList[index], fit: BoxFit.cover,),
              ),
            ),
          );
        },
      )
    );
  }
}

    and in showDialog simply import and return CustomPageView. also, pass the required parameters.

    return CustomPageView(index: index, imageList: snapshot.data!.data.thumb);

    hopefully it will work

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search