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

Using Floating action button with PageView – Flutter

I’m trying to use Flutter FAB in PageView, but since the FAB takes a variable that is initialized in the page 2, it creates an error.

So how can i show the FAB only after the second page?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The solution I used was to set a callback with the bool floating.

    on the home page:

    `

    bool floating = false;
showFAB(show) {
    setState(() {
      floating = show;
    });
  }`

    floatingActionButton:(floating) ? FloatingMenu(pageController: pageController) : null,

    then on the initState function of second page used the callback to change the bool value


  2. 0

    You can use PageView on top level, and use scaffold on every item.It can also be done by adding listener to the pageController.

    
class FabG extends StatefulWidget {
  const FabG({super.key});

  @override
  State<FabG> createState() => _FabGState();
}

class _FabGState extends State<FabG> {
  bool isFabActivePage = false;

  late final PageController controller = PageController()
    ..addListener(() {
      if (controller.hasClients && (controller.page ?? 0) < 2) { //your logic here
        isFabActivePage = false;
        setState(() {});
      } else if (isFabActivePage == false) {
        isFabActivePage = true;
        setState(() {});
      }
    });

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton:
          isFabActivePage ? FloatingActionButton(onPressed: () {}) : null,
      body: PageView.builder(
        controller: controller,
        itemBuilder: (context, index) => Center(child: Text("page ${index+1}")),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search