Flutter PageView with transparent background
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
Hamza Sharuf
Updated on December 20, 2022Comments
-
Hamza Sharuf over 1 year
I'm trying to make use of the
PageView
widget. I placed thePageView
in aColumn
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 thePageView
.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?-
stacktrace2234 over 2 yearsYou can try to use Opacity (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(...),)
-
cvsrt over 2 yearsMaybe this answer can help you. stackoverflow.com/a/56963124/9458753
-