Question 75944 in Flutter Question posted in
The official Flutter documentation can be found here.

Detect Left or Right Swipe and Call Function Every Valid Swipe In PageView Using Flutter

I want to call a function on every valid page swipe.

  1. At first i am shown ‘A’.

enter image description here

  1. Then If i drag the page in horizontal of small amount then it shows some part of next page like above picture…

Till now it is OK, I also want this.

Here Is My Code

homepage.dart

import 'package:flutter/material.dart';

List<String> dataList = ["A", "B", "C", "D", "E", "F", "G"];
int pointer = (-1);

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("THIS IS APPBAR"),
      ),
        body: PageView.builder(
            itemCount: dataList.length,
            itemBuilder: (BuildContext context, int index) {
              print("Page No. $index");
              return MyPage(index: index,);
            })
    );
  }
}

class MyPage extends StatelessWidget {
  final int index;

  const MyPage({super.key, required this.index});

  @override
  Widget build(BuildContext context) {
    pointer += 1;
    return Scaffold(
      body: Container(
        margin: const EdgeInsets.all(15.0),
        padding: const EdgeInsets.all(3.0),
        decoration: BoxDecoration(
            border: Border.all(color: Colors.blueAccent)
        ),
        child: Center(
          child: Text(dataList[pointer], style: const TextStyle(fontSize: 30),),
        ),
      ),
    );

  }
}

main.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'my_provider.dart';
import 'home_page.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

BUT, in next swipe it shows me ‘C’ instead of ‘B’ on next valid swipe (as pointer value is increased).

As well as in output it shows me Page No. 0 Page No. 0 Page No. 1 but i am at page 0.

How to do this in smooth way.. Thank you

Tags:

2

Answers


  1. 0

    I’m Try To Solve You problem

    Here is Code:

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

List<String> dataList = ["A", "B", "C", "D", "E", "F", "G"];

int pointer = 0;

class Swipefunctions extends StatefulWidget {
  const Swipefunctions({Key? key}) : super(key: key);
  @override
  State<Swipefunctions> createState() => _SwipefunctionsState();
}

class _SwipefunctionsState extends State<Swipefunctions> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("THIS IS APPBAR"),
        ),
        body: PageView.builder(
            onPageChanged: (int index) {
              print("prinetd");
              setState(() {
              pointer++;
              pointer=index;
              });
            },
            itemCount: dataList.length,
            itemBuilder: (BuildContext context, int index) {
              return MyPage(index: index,);
            })
    );
  }
}

class MyPage extends StatefulWidget {
  final int index;

  const MyPage({super.key, required this.index});

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {



  @override
  Widget build(BuildContext context) {
    print("pointer at $pointer");
    return Scaffold(
      body: Container(
        margin: const EdgeInsets.all(15.0),
        padding: const EdgeInsets.all(3.0),
        decoration: BoxDecoration(
            border: Border.all(color: Colors.blueAccent)
        ),
        child: Center(
          child: Text(dataList[pointer], style: const TextStyle(fontSize: 30),),
        ),
      ),
    );

  }
}

    Video Link

    Login or Signup to reply.
  2. 0 
    import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

List<String> dataList = ["A", "B", "C", "D", "E", "F", "G"];

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("THIS IS APPBAR"),
      ),
        body: PageView.builder(
            itemCount: dataList.length,
            itemBuilder: (BuildContext context, int index) {
              return MyPage(index: index,);
            })
    );
  }
}

class MyPage extends StatelessWidget {
  final int index;

  const MyPage({super.key, required this.index});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        margin: const EdgeInsets.all(15.0),
        padding: const EdgeInsets.all(3.0),
        decoration: BoxDecoration(
            border: Border.all(color: Colors.blueAccent)
        ),
        child: Center(
          child: Text(dataList[index], style: const TextStyle(fontSize: 30),),
        ),
      ),
    );

  }
}

    Have edited your code, please check.
    Hope this helps

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search