I want to do when I click on each chip, it will change the content of my body but I am using tab controller which I wrap with chip widget.

I also want to decorate my chip when it is selected and unselected. I try to declare my text for each widget using list array but I am stuck. Can someone help me. This is what I have been done so far

class YearTab extends StatefulWidget {
  const YearTab({
    Key? key,
  }) : super(key: key);

  @override
  State<YearTab> createState() => _YearTabState();
}

class _YearTabState extends State<YearTab>
    with SingleTickerProviderStateMixin {
  late TabController _controller;
  bool _selectedTab = false;

  List<Widget> list = const [
    Chip(label: Text('This year')),
    Chip(label: Text('2021')),
    Chip(label: Text('2020')),
    Chip(label: Text('2019')),
    Chip(label: Text('2018')),
  ];

  @override
  void initState() {
    super.initState();
    _controller = TabController(length: list.length, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
            color: AppColor.white,
            width: MediaQuery.of(context).size.width,
            child: TabBar(
                // unselectedLabelColor: Colors.yellow,
                // labelColor: Colors.red,
                physics: const BouncingScrollPhysics(),
                indicator: BoxDecoration(
                  border: Border.all(color: Colors.red),
                  borderRadius: BorderRadius.circular(10),
                  color: const Color.fromARGB(255, 176, 208, 255)
                  //  color: !widget.selected
                  // ?  Color.fromARGB(255, 176, 208, 255)
                  // : Colors.transparent
                ),
                controller: _controller,
                onTap: (index) {},
                isScrollable: true,
                tabs: list,
                )),
        SizedBox(
          height: MediaQuery.of(context).size.height * 2.2,
          child: TabBarView(
            controller: _controller,
            children: const [
              //Content for Demografi Pengguna
              Content1(),
              Content2(),
              Content3(),
              Content4(),
              Content5(),
            ],
          ),
        )
      ],
    );
  }
}

CodePudding user response：

Instead of Tabview ,you can use this :

dependencies:
  toggle_switch: ^2.0.1

Example:

    ToggleSwitch(
      minWidth: 90.0,
      initialLabelIndex: 1,
      cornerRadius: 20.0,
      activeFgColor: Colors.white,
      inactiveBgColor: Colors.grey,
      inactiveFgColor: Colors.white,
      totalSwitches: 2,
      labels: ['Tab1', 'Tab2'],
      icons: [FontAwesomeIcons.mars, FontAwesomeIcons.venus],
      activeBgColors: [[Colors.blue],[Colors.pink]],
      onToggle: (index) {
        print('switched to: $index');
//change the view as per index
      },
    ), 

CodePudding user response：

When you request a chip widget, it is called in initState() the first time you call the widget. You can initialize the array from there and get the data. Alternatively, you can call the widget by observing the array using the Stream structure using getX or Provider.

CodePudding user response：

i changed a few things

class YearTab extends StatefulWidget {
  const YearTab({
    Key? key,
  }) : super(key: key);

  @override
  State<YearTab> createState() => _YearTabState();
}

class _YearTabState extends State<YearTab> with SingleTickerProviderStateMixin {


  List<Widget> tabs = const [
    Chip(label: Text('This year')),
    Chip(label: Text('2021')),
    Chip(label: Text('2020')),
    Chip(label: Text('2019')),
    Chip(label: Text('2018')),
  ];



  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: tabs.length,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            indicatorColor: Theme.of(context).colorScheme.secondary,
            tabs: tabs,
          ),
        ),
        body: TabBarView(
          children: [
            //Content for Demografi Pengguna
            Container(
              color: Colors.blueAccent,
            ),
            Container(
              color: Colors.red,
            ),
            Container(
              color: Colors.green,
            ),
            Container(
              color: Colors.yellow,
            ),
            Container(
              color: Colors.grey,
            ),
          ],
        ),
      ),
    );
  }
}