ToggleButtons，Flutter：如何更改边框颜色和边框半径

Question

我有 3 个 ToggleButtons，我想知道如何更改所选按钮边框的颜色。正如您在我的图片中看到的那样，左侧的绿色按钮周围有一个很难看到的浅蓝色边框，因为它是被选中的按钮。我想知道如何更改此颜色以及如何使边框的角变圆。

如果有帮助，'CryptoCard'是用卡片class制作的。

这是我的代码：

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,
        ),
      ),
    );
  }
}

Answer 2

我确定它不是最好的，但这是我的代码，也许它会对外面的人有所帮助。如果你需要 只需要一个选定的按钮被着色 像这样的不同颜色

Color mColor = Color(0xFF6200EE),mColor0 = Color(0xFF6200EE),mColor1 = Color(0xFF6200EE);
final isSelected = <bool>[false, false, false];

然后

ToggleButtons(
              color: Colors.black.withOpacity(0.60),
              selectedColor: mColor,
              selectedBorderColor: mColor0,
              fillColor: mColor1.withOpacity(0.08),
              splashColor: Colors.grey.withOpacity(0.12),
              hoverColor: Color(0xFF6200EE).withOpacity(0.04),
              borderRadius: BorderRadius.circular(4.0),
              constraints: BoxConstraints(minHeight: 36.0),
              isSelected: isSelected,
              onPressed: (index) {
                // Respond to button selection
                setState(() {
                  isSelected[0] = false;
                  isSelected[1] = false;
                  isSelected[2] = false;
                  if (index == 0) {
                    mColor = Colors.blue;
                    mColor0 = Colors.blue;
                    mColor1 = Colors.blue;
                  }
                  if (index == 1) {
                    mColor = Colors.green;
                    mColor0 = Colors.green;
                    mColor1 = Colors.green;
                  }
                  if (index == 2) {
                    mColor = Colors.red;
                    mColor0 = Colors.red;
                    mColor1 = Colors.red;
                  }
                  isSelected[index] = !isSelected[index];
                });
              },
              children: [
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 16.0),
                  child: Text(
                    'BUTTON 1',
                    style: TextStyle(fontSize: 20),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 16.0),
                  child: Text(
                    'BUTTON 2',
                    style: TextStyle(fontSize: 20),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 16.0),
                  child: Text(
                    'BUTTON 3',
                    style: TextStyle(fontSize: 20),
                  ),
                ),
              ],
            ),

ToggleButtons，Flutter：如何更改边框颜色和边框半径

ToggleButtons, Flutter: How to change border color and border radius

styling

flutter

flutter-layout