Flutter PageView with transparent background

Question

I'm trying to make use of the PageView widget. I placed the PageView in a Column so that It can only take 50% of the screen height.

The problem now is that I have an image background of the page underneath the PageView and I need it to have a transparent background so that the user can see the image background under the PageView.

I tried to set the children's background to Colors.transparent but It doesn't work because the container itself is not transparent.

PageView::build

@override
  Widget build(BuildContext context) {
    return PageView.builder(
      controller: pageController,
      itemBuilder: (context, index) {
        return Container(
            color: Colors.transparent,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                TrackAvatar(imageUrl: _list[index].url),
                Text(_list[index].name),
              ],
            ));
      },
      itemCount: 5,
    );
  }

How can I make the PageView widget transparent?

You can try to use Opacity (https://api.flutter.dev/flutter/widgets/Opacity-class.html). It has 2 attributes what you need: opacity & child. `opacity` can change between 0.0 and 1.0. Child will be your PageView. Something like this: `Opacity(opacity: 0.5, child: PageView.builder(...),)` — stacktrace2234, Aug 21 '21 at 14:33
Maybe this answer can help you. https://stackoverflow.com/a/56963124/9458753 — cvsrt, Aug 21 '21 at 14:33

score 1 · Accepted Answer · answered Aug 21 '21 at 15:08

PageView supports transparent background and doesn't require any workaround.

The problem is that I used the PageView inside a Scaffold with a background color set to white.

Changing the scaffold background into transparent solved the problem.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: PageView.builder(
        controller: pageController,
        itemBuilder: (context, index) {
          return Container(
              color: Colors.transparent,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  TrackAvatar(imageUrl: _list[index].url),
                  Text(_list[index].name),
                ],
              ));
        },
        itemCount: 5,
      )
    );
  }

Thanks for folks who tried to help

Flutter PageView with transparent background

PageView::build

1 Answers1