i want to change floating action button icon & on pressed functionality when page changed

Question

I want a function when the page scrolled or any page selected through bottom navigation the floating action button change icon and its functionality.

• Example... My screen has four pages with a scrolling system and similar attached to bottom navigation...

when I scrolled the left side second page showed on screen, but the floating action bar has no change... similar to when scrolled page no. three and four...

1. i want when i was on first page floting action button do when on pressed, 2. when iam on second page the icon will change and do something with second screen contact when pressed. similar to 3rd and 4th page...

the code is this...

import 'package:advance_book/pages/calender.dart';
import 'package:advance_book/pages/more.dart';
import 'package:advance_book/pages/notes.dart';
import 'package:advance_book/pages/search.dart';
import 'package:flutter/material.dart';


class AppBottomNav extends StatefulWidget {
  const AppBottomNav({Key? key}) : super(key: key);

  @override
  _AppBottomNavState createState() => _AppBottomNavState();
}

class _AppBottomNavState extends State<AppBottomNav> {
  int currentIndex = 0;

  var pages = [PageOne(), PageSecond(), PageThird(),  PageFourth() ];
  final _appPageController = PageController();


  setBottomBarIndex(index) { 
    setState(() { 
      currentIndex = index;
       }
       );
    
    _appPageController.animateToPage ( index,duration: const Duration(milliseconds: 500),  curve: Curves.ease);
  
}



  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    return Scaffold(
     
      // backgroundColor: Colors.white, //withAlpha(100),
      body: 
      PageView(
        scrollDirection: Axis.horizontal,
        children: pages,
        onPageChanged: (index) {
          setState(() {
            currentIndex = index;
          });
        },
        controller: _appPageController,
      ),
      bottomNavigationBar: Container(
        color: const Color(0xffe5e5e5),
        width: size.width,
        height: 60,
        child: Stack(
          overflow: Overflow.visible,
          children: [
            CustomPaint(
              size: Size(size.width, 60),
              painter: BNBCustomPainter(),
            ),
            Center(
              heightFactor: 0.1,
              child: 
              // FloatActionButtion(),
              FloatingActionButton(
                  backgroundColor: const Color(0xff049789),
                  child:
                  const Icon((Icons.add), color: Colors.white,), // Analyze Button
                  elevation: 0.1,
                  onPressed: () {}),
            ),
            
            
            Container(
              width: size.width,
              height: 60,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  IconButton(
                    icon: Icon(
                      Icons.assignment_rounded,
                      color: currentIndex == 0
                          ? const Color(0xff049789)
                          : const Color(0xff696969),
                    ),
                    onPressed: () {
                      setBottomBarIndex(0);
                    },
                    splashColor: Colors.white,
                  ),
                  IconButton(
                      icon: Icon(
                        Icons.calendar_month_sharp,
                        color: currentIndex == 1
                            ? const Color(0xff049789)
                          : const Color(0xff696969),
                      ),
                      onPressed: () {
                        setBottomBarIndex(1);
                      }),
                  Container(
                    width: size.width * 0.20,
                  ),
                  IconButton(
                      icon: Icon(
                        Icons.search,
                        color: currentIndex == 2
                            ? const Color(0xff049789)
                          : const Color(0xff696969),
                      ),
                      onPressed: () {
                        setBottomBarIndex(2);
                      }),
                  IconButton(
                      icon: Icon(
                        Icons.menu,
                        color: currentIndex == 3
                            ? const Color(0xff049789)
                          : const Color(0xff696969),
                      ),
                      onPressed: () {
                        setBottomBarIndex(3);
                      }),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  void _onTappedBar(int value) {
    setState(() {
      currentIndex = value;
    });
    _appPageController.jumpToPage(value);
  }
}

class BNBCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color =  const Color(0xffe3e3e3)
      ..style = PaintingStyle.fill;

    Path path = Path();
    path.moveTo(0, 0); // Start
    path.quadraticBezierTo(size.width * 0.20, 0, size.width * 0.35, 0);
    path.quadraticBezierTo(size.width * 0.40, 0, size.width * 0.42, 5);
    path.arcToPoint(Offset(size.width * 0.58, 4),
        radius: const Radius.circular(1.0), clockwise: false);
    path.quadraticBezierTo(size.width * 0.58, 0, size.width * 0.62, 0);
    path.quadraticBezierTo(size.width * 0.80, 0, size.width, 0);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    // path.close();
    path.lineTo(0, 0);
    canvas.drawShadow(path, Colors.black, 7, true);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

Answer 1

you can use switch case to select Widget for button

Try this example:

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(),
      floatingActionButton: switchFoatingActionButton(index),
    );
  }

  Widget switchFoatingActionButton(int index) {
    Widget newButton = Container();
    switch (index) {
      case 0:
        newButton = FloatingActionButton(
            backgroundColor: const Color(0xff049789),
            child: const Icon(
              (Icons.add),
              color: Colors.white,
            ), // Analyze Button
            elevation: 0.1,
            onPressed: () {});
        break;
      case 1:
        newButton = FloatingActionButton(
            backgroundColor: const Color(0xff049789),
            child: const Icon(
              (Icons.person),
              color: Colors.white,
            ), // Analyze Button
            elevation: 0.1,
            onPressed: () {});
        break;
      case 2:
        newButton = FloatingActionButton(
            backgroundColor: const Color(0xff049789),
            child: const Icon(
              (Icons.person),
              color: Colors.white,
            ), // Analyze Button
            elevation: 0.1,
            onPressed: () {});
        break;
    }
    return newButton;
  }
}