Flutter 如何在Flatter中制作定制和单选芯片或收音机Button

我必须对单个选择进行筛选，未经检查的芯片仅显示文本，而芯片选择则显示带有文本的图像，显示在图片中

---

您必须使用StatefulWidget来跟踪当前选定的索引。我已经编写了一个完整的演示（您必须完善UI，但它是功能性的）：

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
//此小部件是应用程序的根。
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振你好世界”，
主页：MyHomePage（），
);
}
}
类MyHomePage扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
//将显示在操作栏上的标题文本
标题：文本（“芯片演示”），
),
主体：容器(
边缘：边缘组。对称（水平：20，垂直：40），
身高：40，
孩子：芯片过滤器(
已选择：1，//选择第二个筛选器作为默认值
过滤器：[
过滤器（标签：“A-Z”，图标：图标。评估），
过滤器（标签：“H-L”，图标：Icons.ac_单位），
过滤器（标签：“反向”，图标：图标，包括所有图标），
],
),
),
);
}
}
// =============================================================================
///
///过滤实体
///
类过滤器{
///
///显示标签
///
最终字符串标签；
///
///选中时显示的图标
///
最终的Iconda图标；
常量过滤器（{this.label，this.icon}）；
}
// =============================================================================
///
///过滤器小部件
///
类ChipsFilter扩展StatefulWidget{
///
///过滤器的列表
///
最终列表过滤器；
///
///以0开头的默认选定索引
///
最终选定int；
ChipsFilter（{Key-Key，this.filters，this.selected}）：超级（Key:Key）；
@凌驾
_ChipsFilterState createState（）；
}
类芯片过滤状态扩展状态{
///
///当前选定的索引
///
int-selectedIndex；
@凌驾
void initState（）{
//定义[widget.selected]后，检查该值并将其设置为
//[已选择索引]
如果（widget.selected！=null&&
widget.selected>=0&&
widget.selected

您可以提供一些已有的代码！不客气！

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Hello World',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // The title text which will be shown on the action bar
        title: Text("Chips Demo"),
      ),
      body: Container(
        margin: EdgeInsets.symmetric(horizontal: 20, vertical: 40),
        height: 40,
        child: ChipsFilter(
          selected: 1, // Select the second filter as default
          filters: [
            Filter(label: "A - Z", icon: Icons.assessment),
            Filter(label: "H - L", icon: Icons.ac_unit),
            Filter(label: "Reverse", icon: Icons.all_inclusive),
          ],
        ),
      ),
    );
  }
}

// =============================================================================

///
/// Filter entity
///
class Filter {
  ///
  /// Displayed label
  ///
  final String label;

  ///
  /// The displayed icon when selected
  ///
  final IconData icon;

  const Filter({this.label, this.icon});
}

// =============================================================================

///
/// The filter widget
///
class ChipsFilter extends StatefulWidget {
  ///
  /// The list of the filters
  ///
  final List<Filter> filters;

  ///
  /// The default selected index starting with 0
  ///
  final int selected;

  ChipsFilter({Key key, this.filters, this.selected}) : super(key: key);

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

class _ChipsFilterState extends State<ChipsFilter> {
  ///
  /// Currently selected index
  ///
  int selectedIndex;

  @override
  void initState() {
    // When [widget.selected] is defined, check the value and set it as
    // [selectedIndex]
    if (widget.selected != null &&
        widget.selected >= 0 &&
        widget.selected < widget.filters.length) {
      this.selectedIndex = widget.selected;
    }

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView.builder(
        itemBuilder: this.chipBuilder,
        itemCount: widget.filters.length,
        scrollDirection: Axis.horizontal,
      ),
    );
  }

  ///
  /// Build a single chip
  ///
  Widget chipBuilder(context, currentIndex) {
    Filter filter = widget.filters[currentIndex];
    bool isActive = this.selectedIndex == currentIndex;

    return GestureDetector(
      onTap: () {
        setState(() {
          selectedIndex = currentIndex;
        });
      },
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 20),
        margin: EdgeInsets.only(right: 10),
        decoration: BoxDecoration(
          color: isActive ? Colors.blueAccent : Colors.white,
          border: Border.all(color: Colors.black),
          borderRadius: BorderRadius.circular(30),
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            if (isActive)
              Container(
                margin: EdgeInsets.only(right: 10),
                child: Icon(filter.icon),
              ),
            Text(
              filter.label,
              style: TextStyle(
                fontSize: 12,
              ),
            ),
          ],
        ),
      ),
    );
  }
}