flutter - 切换按钮， flutter : How to change border color and border radius

Question

我有 3 个 ToggleButtons，我想弄清楚如何更改所选按钮边框的颜色。正如您在我的图片中看到的那样，左侧的绿色按钮周围很难看到淡蓝色边框，因为它是选定的按钮。我想知道如何更改这种颜色以及如何绕过边框的角。

如果有帮助，“CryptoCard”是用 Card 类制作的。
这是我的代码:

Center(
                          child: ToggleButtons(
                              borderWidth: 0,
                              splashColor: Colors.yellow,
                              renderBorder: false,
                              children: <Widget>[
                                CryptoCard(
                                    selectedCurrency,
                                    snapshot.connectionState ==
                                            ConnectionState.waiting
                                        ? '---'
                                        : coinData[0],
                                    'Bitcoin'),
                                CryptoCard(
                                    selectedCurrency,
                                    snapshot.connectionState ==
                                            ConnectionState.waiting
                                        ? '---'
                                        : coinData[1],
                                    'Ethereum'),
                                CryptoCard(
                                    selectedCurrency,
                                    snapshot.connectionState ==
                                            ConnectionState.waiting
                                        ? '---'
                                        : coinData[2],
                                    'Litecoin'),
                              ],
                              onPressed: (int index) {
                                setState(() {
                                  for (int buttonIndex = 0;
                                      buttonIndex < isSelectedCrypto.length;
                                      buttonIndex++) {
                                    if (buttonIndex == index) {
                                      isSelectedCrypto[buttonIndex] = true;
                                      selectedCrypto =
                                          cryptoAbbreviation[buttonIndex];
                                      print("selectedCrypto");
                                      print(selectedCrypto);
                                    } else {
                                      isSelectedCrypto[buttonIndex] = false;
                                    }
                                  }
                                });

                                futureData = getData();
                              },
                              isSelected: isSelectedCrypto))

Answer 1

ToggleButton 有一个 selectedBorderColor 属性，您可以使用它来设置所选按钮的边框颜色。您可以使用自定义小部件为每个单独的按钮提供圆形边框。

请看下面的代码:

import 'package:flutter/material.dart';

final Color darkBlue = const Color.fromARGB(255, 18, 32, 47);
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<bool> isSelected = List.generate(6, (index) => false);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ToggleButtons(
          children: [
            CustomIcon(
              icon: const Icon(Icons.ac_unit),
              isSelected: isSelected[0],
              bgColor: const Color(0xfff44336),
            ),
            CustomIcon(
              icon: const Icon(Icons.call),
              isSelected: isSelected[1],
              bgColor: const Color(0xffE91E63),
            ),
            CustomIcon(
              icon: const Icon(Icons.cake),
              isSelected: isSelected[2],
              bgColor: const Color(0xff9C27B0),
            ),
            CustomIcon(
              icon: const Icon(Icons.add),
              isSelected: isSelected[3],
              bgColor: const Color(0xff673AB7),
            ),
            CustomIcon(
              icon: const Icon(Icons.accessibility),
              isSelected: isSelected[4],
              bgColor: const Color(0xff3F51B5),
            ),
            CustomIcon(
              icon: const Icon(Icons.analytics),
              isSelected: isSelected[5],
              bgColor: const Color(0xff2196F3),
            ),
          ],
          onPressed: (int index) {
            setState(() {
              for (int buttonIndex = 0;
                  buttonIndex < isSelected.length;
                  buttonIndex++) {
                if (buttonIndex == index) {
                  isSelected[buttonIndex] = !isSelected[buttonIndex];
                } else {
                  isSelected[buttonIndex] = false;
                }
              }
            });
          },
          isSelected: isSelected,
          selectedColor: Colors.amber,
          renderBorder: false,
          fillColor: Colors.transparent,
        ),
      ),
    );
  }
}

class CustomIcon extends StatefulWidget {
  final Icon icon;
  final bool isSelected;
  final Color bgColor;

  const CustomIcon(
      {Key key,
      this.icon,
      this.isSelected = false,
      this.bgColor = Colors.green})
      : super(key: key);
  @override
  _CustomIconState createState() => _CustomIconState();
}

class _CustomIconState extends State<CustomIcon> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 47,
      height: 47,
      decoration: BoxDecoration(
        border: widget.isSelected
            ? Border.all(
                color: const Color(0xffC5CAE9),
              )
            : null,
        borderRadius: const BorderRadius.all(
          Radius.circular(10),
        ),
      ),
      child: Center(
        child: Container(
          height: 32,
          width: 32,
          decoration: BoxDecoration(
            color: widget.bgColor,
            borderRadius: const BorderRadius.all(
              Radius.circular(5),
            ),
          ),
          child: widget.icon,
        ),
      ),
    );
  }
}