如何从flutter中的自定义Widget获取价值？

我正在创建一个需要字符串列表并返回选定字符串的小部件

要多次使用..我创建了这个小部件名称过滤器面板

喜欢选择最喜欢的游戏、电影等

我已经解决了它放置在 showDialog 中，但在这里我不想使用显示对话框...

class FilterScreen extends StatelessWidget {
   FilterScreen({Key? key}) : super(key: key);

  List<String> games = ['Football', 'Cricket', 'Chess'];
  String selectedGame='Football';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [

        Text('Favourite Game : $selectedGame'//this must be changed on selection from filterpanel
        ),
          FilterPanel(list: games)//how to get value from this panel
      ],),
    );
  }
}

这是我的自定义小部件代码

import 'package:flutter/material.dart';

import 'customchip.dart';

class FilterPanel extends StatefulWidget {
  List<String> list;
  FilterPanel({Key? key, required this.list}) : super(key: key);

  @override
  State<FilterPanel> createState() => _FilterPanelState();
}

class _FilterPanelState extends State<FilterPanel> {
  int selectedIndex=0;
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          color: Colors.grey, borderRadius: BorderRadius.circular(9)),
      height: 30,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: List<Widget>.generate(
            widget.list.length, (index) => GestureDetector(
          onTap: (){
            setState(() {
              selectedIndex=index;
            });
          },
              child: CustomChip(
                title:widget.list[index],
                isSelected: index==selectedIndex,

              ),
            ),),
      ),
    );
  }
}

import 'package:flutter/material.dart';

class FilterScreen extends StatelessWidget {
  FilterScreen({Key? key}) : super(key: key);

  final List<String> games = ['Football', 'Cricket', 'Chess'];
  final ValueNotifier<String> selectedGame = ValueNotifier('Football');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ListenableBuilder(
              listenable: selectedGame,
              builder: (context, child) {
                return Text('Favourite Game : ${selectedGame.value}');
              }),
          FilterPanel(
              list: games,
              onSelected: (index) {
                selectedGame.value = games[index];
              }),
        ],
      ),
    );
  }
}

class FilterPanel extends StatefulWidget {
  final List<String> list;
  final void Function(int)? onSelected;

  const FilterPanel({
    Key? key,
    required this.list,
    this.onSelected,
  }) : super(key: key);

  @override
  State<FilterPanel> createState() => _FilterPanelState();
}

class _FilterPanelState extends State<FilterPanel> {
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Colors.grey, borderRadius: BorderRadius.circular(9)),
      height: 30,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: List<Widget>.generate(
          widget.list.length,
          (index) => GestureDetector(
            onTap: () {
              setState(() {
                selectedIndex = index;
                widget.onSelected?.call(index);
              });
            },
            child: Chip(
              label: Text(widget.list[index]),
              backgroundColor: index == selectedIndex ? Colors.red : Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

如果您的 Flutter 版本较低并且没有ListenableBuilder， 您可以使用AnimatedBuilder.

AnimatedBuilder(
    animation: selectedGame,
    builder: (context, child) {
         return Text('Favourite Game : ${selectedGame.value}');
}),