I used this code to use GestureDetector for swiping between pages, but it doesn't work smoothly. I tried different boundaries. Sometimes it gets better, but generally it is not satisfying. Any suggestions?

GestureDetector(
              behavior: HitTestBehavior.translucent,
              onPanUpdate: (details) {
                if (details.delta.dx > -10) {
                  setState(() {
                    if (0 < widget.current_index) {
                      widget.current_index--;
                      print(widget.current_index);
                    }
                  });
                }
                if (details.delta.dx < 10) {
                  setState(() {
                    if (widget.current_index < widget.number_of_photos - 1) {
                      widget.current_index  ;
                    }
                  });

Here is the complete widget, I defined the gesture detector for swiping the images that are in the box decoration. I can't change images one by one mostly, it jumps to one of the next (or previous) images suddenly.

class Pet_Info extends StatefulWidget {
  var id;
  var name;
  var category;
  var status;
  var tags;
  List<dynamic> photoURL;
  var number_of_photos;
  int current_index = 0;

  Pet_Info(
      {this.id,
      this.name,
      this.category,
      this.status,
      required this.photoURL,
      this.number_of_photos,
      this.tags,
      Key? key})
      : super(key: key);

  @override
  State<Pet_Info> createState() => _Pet_InfoState();
}
class _Pet_InfoState extends State<Pet_Info> {
  final controller = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.indigo,
          title: const Text('Pet Info'),
          leading: GestureDetector(
            child: const Icon(
              Icons.arrow_back_ios,
              color: Colors.white,
            ),
            onTap: () {
              // Navigator.pop(context);
              Navigator.pushAndRemoveUntil(
                context,
                MaterialPageRoute(
                  builder: (BuildContext context) => const HomePage(),
                ),
                (route) => false,
              );},),),
        body: Column(
          children: [
            SizedBox(height: 80),
            GestureDetector(
              behavior: HitTestBehavior.translucent,
              onPanUpdate: (details) {
                if (details.delta.dx > -10) {
                  setState(() {
                    if (0 < widget.current_index) {
                      widget.current_index--;
                    }
                  });
                }
                if (details.delta.dx < 10) {
                  setState(() {
                    if (widget.current_index < widget.number_of_photos - 1) {
                      widget.current_index  ;
                    }});}},
              child: Column(
                children: [
                  Container(
                    padding: EdgeInsets.all(5),
                    child: Column(children: [
                      (widget.name == null)
                          ? const Text("Null")
                          : Text(
                              widget.name,
                              style: const TextStyle(
                                  fontSize: 24, fontWeight: FontWeight.bold),
                            ),
                      SizedBox(height: 10),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          (widget.category == null)
                              ? const Text("Null")
                              : Text(widget.category,
                                  style: TextStyle(fontSize: 17)),
                          const Text(" | "),
                          (widget.status.isEmpty)
                              ? const Text("Null")
                              : Text(
                                  widget.status,
                                  style: TextStyle(
                                      fontSize: 17,
                                      color: (widget.status == 'available')
                                          ? Colors.green
                                          : (widget.status == 'pending')
                                              ? const Color.fromARGB(
                                                  255, 255, 174, 0)
                                              : Colors.red),
                                ),],),]),),
                  SizedBox(
                    height: 250,
                    width: 250,
                    child: Card(
                      child: Container(
                        decoration: (widget.photoURL.length != 0)
                            ? BoxDecoration(
                                image: DecorationImage(
                                    alignment: Alignment.bottomCenter,
                                    image: image(widget
                                            .photoURL[widget.current_index])
                                        .image,
                                    fit: BoxFit.cover),
                              )
                            : const BoxDecoration(
                                image: DecorationImage(
                                    alignment: Alignment.bottomCenter,
                                    image: NetworkImage(
                                        "https://cdn-cziplee-estore.azureedge.net//cache/no_image_uploaded-253x190.png"),
                                    fit: BoxFit.scaleDown),
                              ),
                        child: Text(""),),),),
                  AnimatedSmoothIndicator(
                    activeIndex: widget.current_index,
                    count: widget.number_of_photos,
                    effect: ExpandingDotsEffect(),
                  ),
                  SizedBox(
                    height: 30,),
                ],),),],));
  }
}

CodePudding user response：

Put the condition outside of setState, that way it rebuilds only when necessary. This might not be the only issue, but it's a glaring one to start with. If it doesn't help I might look into it more.

if (widget.current_index < widget.number_of_photos - 1) {
  setState(()=> widget.current_index  )
}

CodePudding user response：

Try swipe. Wrap the widget with this library instead of gesture detector