I am using PageView in my Flutter app. I want to change the color of a box according to which page, I am. I want to use setState to change the color of boxes whenever the pages are changing. So, when I am using onPageChanged function and trying to use setState inside it, it is giving me the mentioned error.
Also, I whenever I am using the controller and current variables inside _NotificationTabState, I am getting similar errors -
error: The instance member 'current' can't be accessed in an initializer. (implicit_this_reference_in_initializer at [passenger_flutter_app] lib\notification\notification_tab.dart:30)
This above error in line 29, current=pageNum; or whenever i am trying to give value to the variable.
Here is my code -
import 'package:flutter/material.dart';
import 'package:persistent_bottom_nav_bar/persistent-tab-view.dart';
class NotificationTab extends StatefulWidget {
@override
_NotificationTabState createState() => _NotificationTabState();
}
late PageController? _controller = PageController(
initialPage: 0,
);
int current=0;
class _NotificationTabState extends State<NotificationTab> {
List<String> notifications = [
'One',
'Two',
'Three',
'Four',
'Five'
];
PageView pageView = PageView(
controller: _controller,
onPageChanged: (pageNum) {
setState(() {
current=pageNum;
});
},
children: [
Container(height: 100, width: 200, color: Colors.blue,),
Container(height: 100, width: 200, color: Colors.red,),
Container(height: 100, width: 200, color: Colors.green,),
Container(height: 100, width: 200, color: Colors.blueGrey,),
],
);
@override
Widget build(BuildContext context) {
return Column(
children: [
Padding(
padding: EdgeInsets.only(left: 10.0, top: 10.0, bottom: 15.0),
child: Row(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: InkWell(
child: Container(
height: MediaQuery.of(context).size.height*0.04,
width: MediaQuery.of(context).size.width*0.15,
decoration: BoxDecoration(
border: Border.all(
color: current==0 ? Colors.orange : Colors.grey,
)
),
),
onTap: () {
_controller?.jumpToPage(0);
setState(() {
current=0;
});
},
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: InkWell(
child: Container(
height: MediaQuery.of(context).size.height*0.04,
width: MediaQuery.of(context).size.width*0.15,
decoration: BoxDecoration(
border: Border.all(
color: current==1 ? Colors.orange : Colors.grey,
)
),
),
onTap: () {
_controller?.jumpToPage(1);
setState(() {
current=1;
});
},
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: InkWell(
child: Container(
height: MediaQuery.of(context).size.height*0.04,
width: MediaQuery.of(context).size.width*0.15,
decoration: BoxDecoration(
border: Border.all(
color: current==2 ? Colors.orange : Colors.grey,
)
),
),
onTap: () {
_controller?.jumpToPage(2);
setState(() {
current=2;
});
},
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: InkWell(
child: Container(
height: MediaQuery.of(context).size.height*0.04,
width: MediaQuery.of(context).size.width*0.15,
decoration: BoxDecoration(
border: Border.all(
color: current==3 ? Colors.orange : Colors.grey,
)
),
),
onTap: () {
_controller?.jumpToPage(3);
setState(() {
current=3;
});
print("\n \n \n \n $current \n \n \n \n");
},
),
),
],
),
),
SingleChildScrollView(
child: Container(
child: pageView,
height: MediaQuery.of(context).size.height*0.736,
width: MediaQuery.of(context).size.width,
),
)
],
);
}
}