In my flutter project I used scroll_navigation but I want to change background of the selected item and I don't know how. It's been days I can't solve this problem. Please any help is highly appreciated.

like this if I select a icon the background become grey :

This is my code :

@override
    Widget build(BuildContext context) {
      return ScrollNavigation(
        bodyStyle: NavigationBodyStyle(
          background: Colors.white,
          borderRadius: BorderRadius.horizontal(left: Radius.circular(20)),
          scrollDirection: Axis.vertical,
        ),
        barStyle: NavigationBarStyle(
          position: NavigationPosition.left,
          elevation: 0.0,
          background: Colors.white,
        ),
        pages: [
          Container(color: Colors.blue[100]),
          Container(color: Colors.green[100]),
          Container(color: Colors.purple[100]),
          Container(color: Colors.amber[100]),
          Container(color: Colors.deepOrange[100])
        ],
        items: const [
          ScrollNavigationItem(icon: Icon(Icons.camera)),
          ScrollNavigationItem(icon: Icon(Icons.chat)),
          ScrollNavigationItem(icon: Icon(Icons.favorite)),
          ScrollNavigationItem(icon: Icon(Icons.notifications)),
          ScrollNavigationItem(icon: Icon(Icons.home))
        ],
      );
    }

CodePudding user response：

I think that ScrollNavigation package you are using is limited and you are not able to do that with it. Why don't you make your custom navigation that imitates that package and customize it according to your needs, something like this: class

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

  @override
  State<CustomScrollNavigation> createState() => _CustomScrollNavigationState();
}

class _CustomScrollNavigationState extends State<CustomScrollNavigation> {
  int selectedIndex = 0;
  void changeSelectedIndex(int index) {
    setState(() {
      selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    final containerWidth = MediaQuery.of(context).size.width * .3333;

    return SizedBox(
      width: MediaQuery.of(context).size.width,
      child: Stack(
        children: [
          Row(
            children: [
              Expanded(
                child: Container(
                  color: selectedIndex == 0 ? Colors.grey.shade300 : null,
                  child: IconButton(
                    onPressed: () => changeSelectedIndex(0),
                    icon: Icon(
                      Icons.note,
                      color: selectedIndex == 0 ? Colors.blue : null,
                    ),
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  color: selectedIndex == 1 ? Colors.grey.shade300 : null,
                  child: IconButton(
                    onPressed: () => changeSelectedIndex(1),
                    icon: Icon(
                      Icons.card_membership,
                      color: selectedIndex == 1 ? Colors.blue : null,
                    ),
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  color: selectedIndex == 2 ? Colors.grey.shade300 : null,
                  child: IconButton(
                    onPressed: () => changeSelectedIndex(2),
                    icon: Icon(
                      Icons.person,
                      color: selectedIndex == 2 ? Colors.blue : null,
                    ),
                  ),
                ),
              ),
            ],
          ),
          AnimatedPositioned(
            bottom: 0,
            left: selectedIndex * containerWidth,
            duration: const Duration(milliseconds: 200),
            child: Container(
              height: 3,
              width: containerWidth,
              decoration: const BoxDecoration(color: Colors.blue),
            ),
          ),
        ],
      ),
    );
  }
}