Flutter PageView is not working like disabled

Question

I was trying to make the carousel in Flutter but unfortunately, PageView have some problem while I was working on it

class Carousel extends StatelessWidget {
  Corousel({Key key}) : super(key: key);
  PageController controller = PageController(initialPage: 2);

  @override
  Widget build(BuildContext context) {
    return Padding(padding: EdgeInsets.all(30),
      child:Stack(alignment: AlignmentDirectional.bottomCenter,
    children: [
      CorouselController(controller: controller,),
      CorouselGalary(controller: controller)
    ],
    ),
    );
  }
}
class CorouselController extends StatelessWidget{
  PageController controller=PageController();
  CorouselController({Key key,this.controller}):super(key: key);
  _scrollRight(){
    if(controller.hasClients){
      debugPrint(controller.position.toString());
    }else{
      debugPrint("not connected");
    }
  }
  _scrollLeft(){
    if(controller.hasClients){
      debugPrint(controller.position.toString());
    }else{
      debugPrint("not connected");
    }
  }
  @override
  Widget build(BuildContext context) {
   return Row(children: [
     IconButton( icon: Icon(Icons.chevron_left_sharp),color: Color(0xff000000),onPressed: (){
       _scrollLeft();
     },),
     Expanded(
       child: Container(
         color: Color(0x00000000),alignment: AlignmentDirectional.bottomCenter,
         child: Icon(Icons.album_outlined),
       ),
     ),
     IconButton( icon: Icon(Icons.chevron_right_sharp),color: Color(0xff000000),onPressed: (){
       _scrollRight();
     }),
   ],);
  }
}
class CorouselGalary extends StatelessWidget{
  PageController controller=PageController();
  CorouselGalary({Key key,this.controller}):super(key: key);

  @override
  Widget build(BuildContext context) {
   return PageView(
     physics:AlwaysScrollableScrollPhysics(),
     dragStartBehavior: DragStartBehavior.down,
     scrollDirection: Axis.horizontal,
     controller: controller,
     children: const <Widget>[
       Center(
         child: Text('First Page'),
       ),
       Center(
         child: Text('Second Page'),
       ),
       Center(
         child: Text('Third Page'),
       )
     ],
   );
  }
}

Output looks like this

like the IconButtons act like disabled even pageView does respond to gesture. but if I try this

return Padding(padding: EdgeInsets.all(30),
     child:Stack(alignment: AlignmentDirectional.bottomCenter,
   children: [
     CorouselController(controller: controller,),
     //CorouselGalary(controller: controller)
   ],//just remove page view from stack
   ),
   );

Button respond back to mouse movement

There must be some problem with PageView, how should I resolve it?

Answer 1

Elements in stack always try to cover up the whole size of the widgets. My assumption is that the galary class is covering the whole page and doesn't let you click the buttons. (maybe the color of galary is transparent?).

Instead of stack, can you try to put it in a horizontal column Like: [button, galary, button] Probably it might fix your issue.

I am not sure of the answer. But giving it a try won't harm I suppose.

PS: I don't get have access to comment. So, please consider this as comment.

Edit:

For your understanding why you are not able to access the buttons

Container(
     color: Colors.blue,
     child: PageView()
),

Try changing the above like this (limited width) - you will find the buttons and able to access them

Container(
     width: 500,
     color: Colors.blue,
     child: PageView()
),

Below is an example I tried in DartPad

import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Carousel();
  }
}

class Carousel extends StatelessWidget {
  Carousel({Key key}) : super(key: key);
  final PageController controller = PageController(initialPage: 2);

  @override
  Widget build(BuildContext context) {
    return Padding(padding: EdgeInsets.all(30),
      child:Stack(alignment: AlignmentDirectional.bottomCenter,
    children: [
      CorouselController(controller: controller,),
      CorouselGalary(controller: controller)
    ],
    ),
    );
  }
}
class CorouselController extends StatelessWidget{
  final PageController controller;
  CorouselController({Key key,this.controller}):super(key: key);
  _scrollRight(){
    if(controller.hasClients){
      debugPrint(controller.position.toString());
    }else{
      debugPrint("not connected");
    }
  }
  _scrollLeft(){
    if(controller.hasClients){
      debugPrint(controller.position.toString());
    }else{
      debugPrint("not connected");
    }
  }
  @override
  Widget build(BuildContext context) {
   return Row(children: [
     IconButton( icon: Icon(Icons.chevron_left_sharp),color: Color(0xff000000),onPressed: (){
       _scrollLeft();
     },),
     Expanded(
       child: Container(
         color: Color(0x00000000),alignment: AlignmentDirectional.bottomCenter,
         child: Icon(Icons.album_outlined),
       ),
     ),
     IconButton( icon: Icon(Icons.chevron_right_sharp),color: Color(0xff000000),onPressed: (){
       _scrollRight();
     }),
   ],);
  }
}
class CorouselGalary extends StatelessWidget{
  final PageController controller;
  CorouselGalary({Key key,this.controller}):super(key: key);

  @override
  Widget build(BuildContext context) {
   return Container(
     width: 500,
     color: Colors.blue,
     child: PageView(
     physics:AlwaysScrollableScrollPhysics(),
     dragStartBehavior: DragStartBehavior.down,
     scrollDirection: Axis.horizontal,
     controller: controller,
     children: const <Widget>[
       Center(
         child: Text('First Page'),
       ),
       Center(
         child: Text('Second Page'),
       ),
       Center(
         child: Text('Third Page'),
       )
     ],
   ),
   );
  }
}