How to select single toggle switch in itemBuilder?

Question

I use itemBuilder to buid items with toggles and item name,the number of items depends on the length of string array,my problem is when I click anyone of the toggle,all of the toggles will active

how to make them active individually?

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class stateGenerateAreaSelectItemWidget extends StatefulWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp();
  }

  @override
  State<StatefulWidget> createState() {
// TODO: implement createState
    return generateAreaSelectItemWidget();
  }
}

List<String> strs = [
  "Area0",
  "Area1",
  "Area2",
  "Area3",
  "Area4",
  "Area5",
  "Area6",
  "Area7",
];

class generateAreaSelectItemWidget
    extends State<stateGenerateAreaSelectItemWidget>
    with AutomaticKeepAliveClientMixin {
  final List<Map> SelectItem = List.generate(
          strs.length, (index) => {"id": index, "name": "SelectItem $index"})
      .toList();
  int _sliding = 0;
  @override
  bool get wantKeepAlive => true;
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
          resizeToAvoidBottomInset: true,
          body: Container(
            color: Color.fromARGB(255, 255, 0, 0),
            child: GridView.builder(
                gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                    maxCrossAxisExtent: 360,
                    childAspectRatio: 1.35,
                    crossAxisSpacing: 12,
                    mainAxisSpacing: 12),
                itemCount: SelectItem.length,
                itemBuilder: (BuildContext ctx, index) {
                  return Container(
                    width: 210,
                    decoration: new BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(20)),
                    child: Column(
                      children: [
                        Container(
                          width: 200,
                          height: 85,
                          decoration: new BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.only(
                                  topLeft: Radius.circular(20.0),
                                  topRight: Radius.circular(20.0))),
                          child: Align(
                            alignment: Alignment.center,
                            child: Text(strs[index]),
                          ),
                        ),
                        CupertinoSlidingSegmentedControl(
                            children: {
                              0: Text('OFF'),
                              1: Text('ON'),
                            },
                            groupValue: _sliding,
                            onValueChanged: (newValue) {
                              setState(() {
                                _sliding = newValue;
                              });
                            }),
                      ],
                    ),
                  );
                }),
          )),
    );
  }
}

Answer 1

child: GridView.builder(
          gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 360,
              childAspectRatio:1.35,
              crossAxisSpacing: 12,
              mainAxisSpacing: 12),
          itemCount: SelectItem.length,
          itemBuilder: (BuildContext ctx, index) {
            return Container(
              width:210 ,
              decoration: new BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(20)
              ),
              child:Column(
                children: [
                  Container(
                    width:200 ,
                    height: 85,
                    decoration: new BoxDecoration(
                        color: Colors.white,
                        borderRadius:BorderRadius.only(
                        topLeft: Radius.circular(20.0),topRight: Radius.circular(20.0) )
                    ),
                    child: Align(
                      alignment: Alignment.center,
                      child: Text(strs[index]),
                    ),
                  ),
                  CupertinoSlidingSegmentedControl(
                        children: {
                          0: Text('OFF'),
                          1: Text('ON'),
                        },
                        groupValue: _sliding,
                        onValueChanged: (newValue) {
                          setState(() {
                            _sliding = newValue;
                          });
                        }
                      ),     
                    ],
                  ),
               );
             }
          ),
        )
      ),
    );
  }
 }