एक टैबबार और नेवी बार दोनों में, मैं चाहता हूं कि चयनित टैब बाकी बार के लिए एक अलग पृष्ठभूमि रखे।

उदाहरण के लिए: https://imgur.com/a/jxD8MTg

क्या यह स्पंदन में संभव है?

0
Bollie 24 जुलाई 2019, 12:55

2 जवाब

सबसे बढ़िया उत्तर

यदि आप स्टेटफुल विजेट का उपयोग कर रहे हैं, तो आप वर्तमान इंडेक्स की स्थिति को ऑन टैप विधि में सेट कर सकते हैं

  @override
  void initState() {
    super.initState();
    currentIndex = 0;
  }


  BottomNavigationBar(
            backgroundColor: Colors.white,
            type: BottomNavigationBarType.fixed,
            items: <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                backgroundColor: currentIndex == 0 ? Colors.green : Colors.black,
                title: Text('0'),
              ),
              BottomNavigationBarItem(
                backgroundColor: currentIndex == 1 ? Colors.green : Colors.black,
                title: Text('1'),
              ),
            ],
            currentIndex: currentIndex,
            onTap: (int index) {
                  setState(() {
                    currentIndex = index;
                });
                _navigateToPage(index);
            },
          );


0
Markus Hein 24 जुलाई 2019, 15:45
import 'package:flutter/material.dart';

class ChangeBottomNavBarTextColor extends StatefulWidget {
  @override
  ChangeBottomNavBarTextColorState createState() {
    return new ChangeBottomNavBarTextColorState();
  }
}

class ChangeBottomNavBarTextColorState
    extends State<ChangeBottomNavBarTextColor> {
  String text = 'Home';


  var curIndex = 0;

  _onTap(int index) {
    setState(() {
      curIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Change Bottom Nav Bar Text Color Example"),
      ),
      body: Center(
        child: Text(text,
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
            )),
      ),
      bottomNavigationBar: BottomNavigationBar(
        selectedItemColor: Colors.red,
        currentIndex: curIndex,
        type: BottomNavigationBarType.fixed,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
            ),
            title: Text("Home", style: TextStyle(color: Colors.teal)),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.favorite,
            ),
            title: Text("Favorite", style: TextStyle(color: Colors.pink)),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.person,
            ),
            title: Text("Profile", style: TextStyle(color: Colors.brown)),
          ),
          BottomNavigationBarItem(
            activeIcon: Icon(
              Icons.info,
              color: Colors.red,
            ),
            icon: Icon(
              Icons.settings,
            ),
            title: Text("Settings", style: TextStyle(color: Colors.amber)),
          ),
        ],
        onTap: _onTap,
      ),
    );
  }
}

आप ऐसा कुछ उपयोग कर सकते हैं। जब आप क्लिक करते हैं, तो _onTap फ़ंक्शन currentIndex बदल जाएगा। तब selectedItemColor चयनित अनुक्रमणिका के रंग को परिभाषित करेगा। आप जो चाहें रंगों के साथ खेल सकते हैं।

0
Furkan Aydın 24 जुलाई 2019, 16:37