Using Floating action button with PageView-CodePudding

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?

CodePudding user response：

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}")),
      ),
    );
  }
}

CodePudding user response：

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