How to set static gradient background for PageView in Flutter? - mobile

Question

Currently I have a PageView set up with 3 pages, scrollable from top to bottom, all with the same background gradient, yet with every page change I'm scrolling away the gradient. As you can imagine it looks somewhat unasthetic to see the beginning and end of the gradient while scrolling. I'd like it to stay put and not move.
That's where I'm lost.
I tried removing the gradient container from each page and put it into a positioned widget in the class that's being rendered, as shown below.
I tried simply returning a Container(being the gradient of my choice - "Background(null)"), and returning intropageview as a child of it.
class TestGenderSelection extends StatefulWidget {
_TestGenderSelection createState() => _TestGenderSelection();
}
class _TestGenderSelection extends State<TestGenderSelection> {
var account = Account();
#override
Widget build(BuildContext context) {
return Material(
child: Scaffold(
backgroundColor: Colors.transparent,
body: Stack(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 50.0,left: 20.0),
child: SvgPicture.asset(
"assets/images/rocker.svg",
width: 70,
height: 70,
alignment: Alignment.topLeft),
),
Padding(
padding: EdgeInsets.only(top: 20.0,left: 20.0),
child: Text(
"May I Assume your gender?\nYou tell me.",
style: TextStyle(
fontSize: 25,
fontFamily: "IntroBlackCaps",
fontWeight: FontWeight.w300,
color: Colors.white
),
),
),
Padding(
padding: const EdgeInsets.only(top: 250.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
InkWell(onTap: () { BamRemote.goToHome(context);print(account.username);},child: SvgPicture.asset("assets/images/baby-boy.svg",width: 150, height: 150,)),
InkWell(onTap: () => BamRemote.goToHome(context),child: SvgPicture.asset("assets/images/baby-girl.svg",width: 150, height: 150,)),
InkWell(onTap: () => BamRemote.goToHome(context),child: SvgPicture.asset("assets/images/newborn.svg",width: 150, height: 150,))
],),
)
],
),
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 20.0, bottom: 20.0),
child: Align(
alignment: Alignment.bottomRight,
child: InkWell(
onTap: () => introcontroller.previousPage(duration: Duration(milliseconds: 900), curve: Curves.linearToEaseOut),
child: RotatedBox(
quarterTurns: 1,
child: Icon(Icons.arrow_back_ios,color: Colors.white,size: 25.0,)),
))),
Padding(
padding: const EdgeInsets.only(right: 20.0, bottom: 20.0),
child: Align(
alignment: Alignment.bottomRight,
child: InkWell(
onTap: () => introcontroller.nextPage(duration: Duration(milliseconds: 900), curve: Curves.linearToEaseOut),
child: RotatedBox(
quarterTurns: 3,
child: Icon(Icons.arrow_back_ios,color: Colors.white,size: 25.0)),
)))]),
]),
),
);
}
}
final intropageview = PageView(
scrollDirection: Axis.vertical,
controller: introcontroller,
children: <Widget>[
TestSplashScreen(),
TestNameSelection(),
TestGenderSelection(),
//TestThemeSelection(),
],
);
class Intro extends StatelessWidget{
#override
Widget build(BuildContext context) {
// TODO: implement build
return Stack(
children: <Widget>[
Positioned(
top: 0.0,
child: Background(null)
),
intropageview,
],
);
}
}
I'm not getting any error messages. It simply renders the background black, as its the primary color in my theme, i'm guessing.

Answer 1

Solved it
Wrapped each Material with a Container and set each's color to Colors.transparent
Then returned the gradient Background with the pageview as a child.

Answer 2

Add the stack inside a container. You should use this under your Container.
decoration: BoxDecoration(
// Box decoration takes a gradient
gradient: LinearGradient(
// Where the linear gradient begins and ends
begin: Alignment.topRight,
end: Alignment.bottomLeft,
// Add one stop for each color. Stops should increase from 0 to 1
stops: [0.1, 0.4, 0.7, 1.0],
colors: [
// Colors are easy thanks to Flutter's Colors class.
const Color(0xff0D37C1),
Colors.deepPurpleAccent,
Colors.deepPurple,
Colors.purple,
],
),
),
finally You will have to change like this
class Intro extends StatelessWidget{
#override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
decoration: BoxDecoration(
// Box decoration takes a gradient
gradient: LinearGradient(
// Where the linear gradient begins and ends
begin: Alignment.topRight,
end: Alignment.bottomLeft,
// Add one stop for each color. Stops should increase from 0 to 1
stops: [0.1, 0.4, 0.7, 1.0],
colors: [
// Colors are easy thanks to Flutter's Colors class.
const Color(0xff0D37C1),
Colors.deepPurpleAccent,
Colors.deepPurple,
Colors.purple,
],
),
),
child: Stack(
children: <Widget>[
Positioned(
top: 0.0,
child: Background(null)
),
intropageview,
],
),
);
}
}