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;
}
}
CodePudding user response：
try this:
currentIndex==0 ? FloatingActionButton(
backgroundColor: const Color(0xff049789),
child:
const Icon((Icons.add), color: Colors.white,), // Analyze Button
elevation: 0.1,
onPressed: () {}):currentIndex==1 FloatingActionButton(
backgroundColor: const Color(0xff049789),
child:
const Icon((Icons.person), color: Colors.white,), // Analyze Button
elevation: 0.1,
onPressed: () {}) : FloatingActionButton(
backgroundColor: const Color(0xff049789),
child:
const Icon((Icons.edit), color: Colors.white,), // Analyze Button
elevation: 0.1,
onPressed: () {}),
CodePudding user response：
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;
}
}