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

Issue on applying padding to pageview flutter

I have a pageview and when i added padding to the whole pageview and while scrolling when widget is about to finish the padding area the widget get removed from the screen view. This issue is not there if i remove padding. I also added clipbehaviour so that it clips to the both boundary while scrolling.

I need to have a continuous scrolling between pages.

enter image description here

Padding(
      padding: const EdgeInsets.all(20.0),
      child: PageView(
        controller: _pageController,
        padEnds: false,
        pageSnapping: false,
        clipBehavior:  Clip.none,
        children: [
          for (int idx = 0; idx < 10; idx++)
            Container(
              decoration: BoxDecoration(
                  color:Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0),

                  border: Border.all(color: Colors.blue)
              ),
             height: 150,
              width: double.infinity,
            ),
        ],
      ),
    )

NOTE : Issue is not there if i remove padding, but i need to have a continous scroll with applying padding.

Tags:

2

Answers


  1. 0

    Try changing the clipBehaviour to Clip.antiAlias

    I tried this and it worked well

    import 'dart:math' as math;

import 'package:flutter/material.dart';

class TempPage extends StatelessWidget {
  const TempPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: PageView(
          padEnds: false,
          pageSnapping: false,
          clipBehavior: Clip.antiAlias, // Here is the changed made
          children: [
            for (int idx = 0; idx < 10; idx++)
              Container(
                decoration: BoxDecoration(
                    color:
                        Color((math.Random().nextDouble() * 0xFFFFFF).toInt())
                            .withOpacity(1.0),
                    border: Border.all(color: Colors.blue)),
                height: 150,
                width: double.infinity,
              ),
          ],
        ),
      ),
    );
  }
}

    Other solution could be to add the padding to the page view children, like this

    PageView(
  padEnds: false,
  pageSnapping: false,
  clipBehavior: Clip.antiAlias,
  children: [
    for (int idx = 0; idx < 10; idx++)
      Container(
        decoration: BoxDecoration(
            color: Color((math.Random().nextDouble() * 0xFFFFFF).toInt())
                .withOpacity(1.0),
            border: Border.all(color: Colors.blue)),
        height: 150,
        width: double.infinity,
        padding: const EdgeInsets.all(20.0),
      ),
  ],
)
    Login or Signup to reply.
  2. 0

    If this is what you’re trying to achieve, then you can use ListView instead:

    ListView(
  scrollDirection: Axis.horizontal,
  children: [
    for (int idx = 0; idx < 10; idx++)
      Container(
        decoration: BoxDecoration(
            color: Color((math.Random().nextDouble() * 0xFFFFFF).toInt())
                .withOpacity(1.0),
            border: Border.all(color: Colors.blue)),
        height: 150,
        width: MediaQuery.sizeOf(context).width - 40,
      ),
  ],
)

    Demonstration

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

Back To Top
Search