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

user_14446610 0
Viewed 2835

I have 3 ToggleButtons and I'm trying to figure out how to change the color of the selected button's border. As you can see in my picture, the green button on the left has a very hard to see light blue border around it since it is the selected button. I would like to know how I can change this color and also how I can round the border's corners.

enter image description here

If it helps, 'CryptoCard' is made with the Card class.

Here is my code:

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))
flutter-layout flutter styling
2 Answers

ToggleButton has a property selectedBorderColor which you can use to set the border color of your selected button. You can use a custom widget to give rounded border to each individual button.

enter image description here

Please see the code below :

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

I'm sure it is not the best but here is my code for this maybe it will help someone out there. if you need only need one selected button to be colorized in different colour like this

enter image description here enter image description here enter image description here

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

then

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),
                  ),
                ),
              ],
            ),
user_91423530
Related