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

Flutter – Change AppBar Title according to the appearance of ListView item

How to change AppBar Title according to the appearance of ListView item, I used inview_notifier_list to check the appearance of item but when placing inview_notifier_list inside SingleChildScrollView it works incorrectly

enter image description here
enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Here is my code:

     SingleChildScrollView(
      child: Column(
        children: [
          Padding(
            padding: EdgeInsets.all(10),
            child: ImageSlideshow(
              width: double.infinity,
              height: 200,
              initialPage: 0,
              indicatorColor: Colors.blue,
              indicatorBackgroundColor: Colors.grey,
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: Image.asset(
                    'assets/images/mon1.jpg',
                    fit: BoxFit.cover,
                  ),
                ),
                ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: Image.asset(
                    'assets/images/mon2.jpg',
                    fit: BoxFit.cover,
                  ),
                ),
                ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: Image.asset(
                    'assets/images/mon3.jpg',
                    fit: BoxFit.cover,
                  ),
                ),
              ],
              autoPlayInterval: 3000,
              isLoop: true,
            ),
          ),
          InViewNotifierList(
            physics: AlwaysScrollableScrollPhysics(),
            shrinkWrap: true,
            isInViewPortCondition:
                (double deltaTop, double deltaBottom, double vpHeight) {
              return deltaTop < 20 && deltaBottom > 20;
            },
            itemCount: 10,
            builder: ( context,  indexCat) {
              return InViewNotifierWidget(
                id: '$indexCat',
                builder: ( context,  isInView,  child) {
                  if(isInView){
                    WidgetsBinding.instance!.addPostFrameCallback((_) {
                      _showAppBarTitle.value = indexCat.toString();
                    });
                  }
                  print(isInView);
                  return Column(
                    children: [Container(
                      width: 100, height: 100, color: Colors.red,
                    ),
                      SizedBox(height: 50,),
                    ],
                  );
                },
              );
            },
          ),

        ],
      ),
    ),

  2. 0

    InViewList only works if you let it use its own ScrollController. If you would like to show a ImageSlideshow at the top of the list, you can do so by adding it to the top of the list like this:

    InViewNotifierList(
    isInViewPortCondition: (double deltaTop, double deltaBottom, double vpHeight) {
      return deltaTop < 20 && deltaBottom > 20;
    },
    // count of your items + 1
    itemCount: 10 + 1,
    builder: (context, i) {
      // Return the ImageSlideshow if it's the first item
      if (i == 0) {
        return Padding(
          padding: const EdgeInsets.all(10),
          child: ImageSlideshow(
            width: double.infinity,
            height: 200,
            initialPage: 0,
            indicatorColor: Colors.blue,
            indicatorBackgroundColor: Colors.grey,
            autoPlayInterval: 3000,
            isLoop: true,
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(10),
                child: Container(color: Colors.red),
              ),
              ClipRRect(
                borderRadius: BorderRadius.circular(10),
                child: Container(color: Colors.blue),
              ),
              ClipRRect(
                borderRadius: BorderRadius.circular(10),
                child: Container(color: Colors.orange),
              ),
            ],
          ),
        );
      }
      // Make up for increasing the itemCount by 1 by decrementing i
      i--;
      return InViewNotifierWidget(
        id: '$i',
        builder: (context, isInView, child) {
          if (isInView) {
            WidgetsBinding.instance.addPostFrameCallback((_) {
              yourMethodToUpdateTitleWithIndex(i);
            });
          }
          return Padding(
            padding: const EdgeInsets.only(bottom: 50.0),
            child: Container(
                width: 100,
                height: 100,
                color: Colors.red,
                child: Center(
                  child: Text("Item $i"),
                )),
          );
        },
      );
    },
  )

    BTW: The code is tested and fully functional.

    Feel free to reach out if you need any more help with implementing the solution 🙂

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

Back To Top
Search