How to solve stack widget problem in flutter pageview?

Question

Im developing a quotes app as a beginner in flutter.I had used a stack widget to use both image and text in the center of my screen.And added "pageview widget" to have multiple page in my app.But the problem im facing is,whenever im trying to swipe the page,image get swiped but the text stayed the same.I mean the fist page "Text", still showing in the middle of 2nd page.Moreover i cant drag to the next page while touching the letter,its only being done via touching above or under the letter.I just wants to have a simple multipage app with text and image. How can i solve this Problem?

class OverviewScreen extends StatefulWidget {
const OverviewScreen({key, Key,}) : super(key: key);
@override
_OverviewScreenState createState() => _OverviewScreenState();
}

class _OverviewScreenState extends State<OverviewScreen> {
PageController pageController =PageController(initialPage: 0);

@override
Widget build(BuildContext context) {
return MaterialApp(
  home:Scaffold(
    extendBodyBehindAppBar: true,
    appBar: AppBar(
        title: Text("Hu   R   Rehman",
        style: TextStyle(fontFamily: "MonteCarlo"),),
        centerTitle: true,
      leading: Icon(Icons.menu),

      shape:RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(bottom: Radius.circular(16))
      ),
    backgroundColor: Colors.transparent,
      elevation: 0,

    ),
    body:Center(
      child: Stack(
        alignment: Alignment.center,
        children: [
          PageView(
            controller: pageController,
            children: [
              Image(
                image:AssetImage('Image/soc1.jpg'),
                fit:BoxFit.cover,
                width: double.infinity,
                height: double.infinity,
              ),
          
             p1()
            ],

          ),
          const Text('Text'
            ,style: TextStyle(fontSize: 31.0,
                fontFamily:"MonteCarlo",
                  color: Colors.white,
                fontWeight: FontWeight.w700 )
            ),
           ],

          ),
         )


           ),
         );
        }
      }

Here p1() is the second page

 class p1 extends StatefulWidget {
 @override
 _p1State createState() => _p1State();
  }

 class _p1State extends State<p1> {
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
  home: Scaffold(
    backgroundColor: Colors.blueGrey,

  ),
  );
  }
  }

Answer 1

If you take a look at widget tree, There are two widgets PageView and Text placed as Stack Children, and according to widget priority render Text widget will be at the top. Also, it is independent from PageView, and there will be no effect on this Text widget by changing Pageview.

let say you wish to part it on 1st child of PageView, you can move it there by wrapping with stack like this

  body: Center(
            child: Stack(
              alignment: Alignment.center,
              children: [
                PageView(
                  controller: pageController,
                  children: [
                    Stack(
                      alignment: Alignment.center,
                      children: [
                        Image(
                          image: AssetImage('Image/soc1.jpg'),
                          fit: BoxFit.cover,
                          width: double.infinity,
                          height: double.infinity,
                        ),
                        const Text(
                          'Text',
                          style: TextStyle(
                            fontSize: 31.0,
                            fontFamily: "MonteCarlo",
                            color: Colors.white,
                            fontWeight: FontWeight.w700,
                          ),
                        ),
                      ],
                    ),
                    p1()
                  ],
                ),
              ],
            ),
          )

Does it solve your issue?

Answer 2

Try putting Stack inside PageView children.

PageView(controller: pageController, children: [
      Stack(
        alignment: Alignment.center,
        children: [
          Image(
            image: AssetImage('Image/soc1.jpg'),
            fit: BoxFit.cover,
            width: double.infinity,
            height: double.infinity,
          ),
          const Text('Text',
              style: TextStyle(
                  fontSize: 31.0,
                  fontFamily: "MonteCarlo",
                  color: Colors.white,
                  fontWeight: FontWeight.w700)),
        ],   
      ),     
      p1(),
    ],
    );