Make the ListView.builder() show a fraction of the next (or previous) element

Question

How can Make the ListView.builder() show a fraction of the next (or previous) element.

I have a ListView.builder() and it works fine but I want the user to know that there is a scrolling functionality and that they need to scroll.

How can achieve that?

My output:-

Expected output:-

How can achieve that?

Here is my code

    return FutureBuilder(
            future: categories,
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              return ListView.builder(
                  itemCount: snapshot.data.length,
                  scrollDirection: Axis.horizontal,
                  itemBuilder: (context, index) {
                    return GestureDetector(
                      child: Padding(
                        padding: const EdgeInsets.all(4.0),
                        child: Container(
                          child: Padding(
                            padding:
                                const EdgeInsets.fromLTRB(16.0, 7.0, 16.0, 10.0),
                            child: Text(
                              snapshot.data[index].name,
                              style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 18.0,
                                  fontWeight: FontWeight.bold),
                            ),
                          ),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(25.0),
                            color: colors[index],
                          ),
                        ),
                      ),
                      onTap: () => Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => Posts(
                                    type: PostsFetchByType.categories,
                                    categoryOrTagIds: [snapshot.data[index].id],
                                  ))),
                    );
                  });
            });

Answer 1

Create a scrollcontroller with an initial offfset:

scrollController = ScrollController(
   initialScrollOffset: 10 // put your value here
);

then add it to your ListViewBuilder:

return ListView.builder(
    ...
    controller: scrollController,
    ...
)

But since you want to show that it is scrollable, you can also have a look at adding scrolling bar by wrapping ListViewBuilder as follows:

Scrollbar(
    child: ListView.builder(...),
)