remove padding from pageview pages

Question

I have a pageview to which I have set viewportFraction 0.8, but it has too large margins between pageview pages (attached a screenshot) and I would like to make them smaller

I also want the first page to have less indentation from the left edge, I tried to remove it through the page Shopping properties, but it turned out not to be

code:

controller = PageController(
      initialPage: currentIndex!,
      viewportFraction: 0.8,
    );

Expanded(
            child: PageView.builder(
              onPageChanged: (index) {
                setState(() {
                  currentIndex = index;
                });
              },
              controller: controller,
              physics: const ClampingScrollPhysics(),
              itemCount: 4,
              itemBuilder: (context, index) {
                var scale = currentIndex == index ? 1.0 : 0.8;
                return SizedBox(
                  width: MediaQuery.of(context).size.width * 0.861,
                  child: TweenAnimationBuilder(
                    tween: Tween(begin: scale, end: scale),
                    duration: const Duration(milliseconds: 350),
                    child: const PatientCard(),
                    builder: (context, double value, child) {
                      return Transform.scale(
                        scale: value,
                        child: child,
                      );
                    },
                  ),
                );
              },
            ),
          ),

Answer 1

padEnds is a property in pageview set it to false to remove padding to both ends of the list.