Question 270626 in Flutter Question posted in
The official Flutter documentation can be found here.

How to set SegmentedButton BorderRadius zero in flutter?

How to set SegmentedButton BorderRadius zero in flutter?

SegmentedButton<int>(
        segments: const <ButtonSegment<int>>[
          ButtonSegment<int>(
            value: 0,
            label: Text('item1'),
          ),
          ButtonSegment<int>(
            value: 1,
            label: Text('item2'),
          ),
        ],
        selected: <int>{_selectedIndex},
        onSelectionChanged: (value) {
          setState(() {
            _selectedIndex = value.first;
          });
        },
        showSelectedIcon: false,
      )

get buttons with radius.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    From chatgpt I get the ansewer custom style

    SegmentedButton<int>(
        segments: const <ButtonSegment<int>>[
          ButtonSegment<int>(
            value: 0,
            label: Text('item1'),
          ),
          ButtonSegment<int>(
            value: 1,
            label: Text('item2'),
          ),
        ],
        selected: <int>{_selectedIndex},
        onSelectionChanged: (value) {
          setState(() {
            _selectedIndex = value.first;
          });
        },
        showSelectedIcon: false,
        style: ButtonStyle(
          shape: MaterialStateProperty.all<RoundedRectangleBorder>(
            const RoundedRectangleBorder(
              borderRadius: BorderRadius.zero,
            ),
          ),
        ),
      )

  2. 0

    To set the BorderRadius of a SegmentedButton to zero in Flutter, you can wrap the SegmentedButton widget with a Container and set the borderRadius property of the Container to zero. Here’s an example:

    Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.zero,
  ),
  child: SegmentedButton<int>(
    segments: const <ButtonSegment<int>>[
      ButtonSegment<int>(
        value: 0,
        label: Text('item1'),
      ),
      ButtonSegment<int>(
        value: 1,
        label: Text('item2'),
      ),
    ],
    selected: <int>{_selectedIndex},
    onSelectionChanged: (value) {
      setState(() {
        _selectedIndex = value.first;
      });
    },
    showSelectedIcon: false,
  ),
)

    In this example, the Container wraps the SegmentedButton, and the borderRadius property of the BoxDecoration is set to BorderRadius.zero, which sets the border radius to zero for all corners of the container. This effectively sets the border radius of the SegmentedButton to zero.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search