0

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,
          ),
        )
      ],
    );
  }
}
Shreyansh Sharma
  • 1,208
  • 2
  • 10
  • 27

0 Answers0