как выбрать один контейнер в цикле for в нескольких контейнерах

#flutter #dart

Вопрос:

я создал цикл for для создания контейнера для списка, если я нажму на контейнер, он выберет весь контейнер, пожалуйста, помогите

     class PrefPage extends StatefulWidget {
      @override
      _PrefPageState createState() => _PrefPageState();
    }
    
    class _PrefPageState extends State<PrefPage> {
      List<String> sel = [];
      bool isSelected = false;
      @override
      Widget build(BuildContext context) {
        var themeId = DynamicTheme.of(context)!.themeId;
        var kContColor = Color(0Xfff6f6f6);
    
        themeId == 0
            ? kContColor = Color(0Xfff6f6f6)
            : kContColor = Color(0xff272727);
        return Scaffold(
          bottomNavigationBar: Container(
            color: Theme.of(context).backgroundColor,
            padding: EdgeInsets.fromLTRB(10, 10, 30, 10),
            height: 80,
            child: Spring.bubbleButton(
              onTap: () {
                // Navigator.push(
                //     context, MaterialPageRoute(builder: (context) => Home()));
              },
              child: Text(
                "👉",
                style: TextStyle(fontSize: 30),
                textAlign: TextAlign.end,
              ),
            ),
          ),
          backgroundColor: Theme.of(context).backgroundColor,
          appBar: AppBar(
            centerTitle: false,
            leadingWidth: 0,
            elevation: 0,
            backgroundColor: Theme.of(context).backgroundColor,
            title: Text(
              "Swoken",
              style: GoogleFonts.niconne(
                textStyle: TextStyle(
                  fontSize: 30,
                  color: Theme.of(context).primaryColor,
                ),
              ),
            ),
          ),
          body: SingleChildScrollView(
            physics: BouncingScrollPhysics(),
            child: SafeArea(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    " What are your",
                    style: TextStyle(fontSize: 40, fontWeight: FontWeight.w100),
                  ),
                  Text(
                    " Interests ?",
                    style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  GridView.count(
                    scrollDirection: Axis.vertical,
                    physics: ScrollPhysics(),
                    childAspectRatio: 2.3,
                    crossAxisC`o`unt: 2,
                    padding: EdgeInsets.all(5),
                    shrinkWrap: true,
                    children: List.generate(
                      intr.length,
                      (index) {
                        return PrefCont(
                          child: AutoSizeText(
                            intr[index]["icon"]   "  "   intr[index]["title"],
                            minFontSize: 16,
                            maxLines: 1,
                            style: TextStyle(fontSize: 40),
                          ),
                        );
                      },
                    ),
                  )
                ],
              ),
            ),
          ),
        );
      }
    }


class PrefCont extends StatefulWidget {
  PrefCont({this.child});
  final child;

  @override
  _PrefContState createState() => _PrefContState();
}

class _PrefContState extends State<PrefCont> {
  List<String> sel = [];
  bool isSelected = false;

  @override
  Widget build(BuildContext context) {
    var themeId = DynamicTheme.of(context)!.themeId;
    var kContColor = Color(0Xfff6f6f6);

    themeId == 0
        ? kContColor = Color(0Xfff6f6f6)
        : kContColor = Color(0xff272727);
    return InkWell(
      onTap: () {
        setState(() {
          isSelected = !isSelected;
          if (isSelected == true) {
            for (PreferencesData pref in _dataSet)
              print(pref.icon   pref.title);
          }
        });
      },
      child: Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: isSelected ? kContInactColor : kContColor,
          borderRadius: BorderRadius.circular(10),
        ),
        margin: EdgeInsets.all(10),
        padding: EdgeInsets.all(10),
        child: widget.child,
      ),
    );
  }
}


List intr = [
  {"icon": "🚗", "title": "Racing"},
  {"icon": "👓", "title": "Retro"},
  {"icon": "🌎", "title": "Logic"},
  {"icon": "🎲", "title": "Puzzle"},
  {"icon": "📷", "title": "Hollywood"},
  {"icon": "🏓", "title": "Sports"},
  {"icon": "🌱", "title": "Nature"},
  {"icon": "👍🏼", "title": "Social"},
  {"icon": "‍💻", "title": "Programming"},
  {"icon": "🍵", "title": "Cooking"},
  {"icon": "⌚", "title": "Watches"},
  {"icon": "🚗", "title": "Racing"},
  {"icon": "👓", "title": "Retro"},
  {"icon": "🌎", "title": "Logic"},
  {"icon": "🎲", "title": "Puzzle"},
  {"icon": "📷", "title": "Hollywood"},
  {"icon": "🏓", "title": "Sports"},
  {"icon": "🌱", "title": "Nature"},
  {"icon": "👍🏼", "title": "Social"},
  {"icon": "‍💻", "title": "Programming"},
  {"icon": "🍵", "title": "Cooking"},
  {"icon": "⌚", "title": "Watches"},
];
 

…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………….

Комментарии:

1. поделитесь своим полным виджетом, похоже, вы создаете список внутри build метода.

2. я отредактировал и предоставил полный код, пожалуйста, проверьте

Ответ №1:

Я не совсем понимаю, как ты это делаешь. Попробуйте сделать это таким образом:

 class MyPage extends StatelessWidget {
  final random = math.Random();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          for (var i = 0; i < 5; i  )
            InkWell(
              onTap: () {},
              child: Container(
                color: Colors.accents[random.nextInt(10)].withOpacity(0.5),
                width: 100,
                height: 100,
                alignment: Alignment.center,
                child: Text('Container ${i   1}'),
              ),
            ),
        ],
      ),
    );
  }
}