How to evenly space each container of toggle button to fit screen and make selected container be rounded in flutter

Question

I want to create toggle buttons and evenly space each element in the list of toggle buttons and make each selected button rounded like this,

I've tried using boxconstraints property, width property, margin property and the rest, But this is what I'm getting, I've tried every other thing but I can't get it, this is what I'm getting

This is the code I'm using

    import 'package:flutter/material.dart';

class TestingScreen extends StatefulWidget {
  @override
  State<TestingScreen> createState() => _TestingScreenState();
}

class _TestingScreenState extends State<TestingScreen> {
  List<bool> _isSelected = [true, false, false, false];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 24, vertical: 100),
        child: Row(
          children: [
            Text(
              'Time',
              style: TextStyle(
                color: Colors.black,
                fontSize: 16,
                fontWeight: FontWeight.w400,
              ),
            ),
            ToggleButtons(
              color: Color(0xff001666),
              fillColor: Color(0xff001666),
              selectedColor: Colors.white,
              children: [
                ToggleButton(name: '1D'),
                ToggleButton(name: '1W'),
                ToggleButton(name: '1M'),
                ToggleButton(name: '1Y'),
              ],
              isSelected: _isSelected,
              onPressed: (int newIndex) {
                setState(() {
                  for (int i = 0; i < _isSelected.length; i++) {
                    if (i == newIndex) {
                      _isSelected[i] = true;
                    } else {
                      _isSelected[i] = false;
                    }
                    print(_isSelected);
                  }
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

class ToggleButton extends StatelessWidget {
  final String name;
  const ToggleButton({Key? key, required this.name}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width * 0.1,
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(12)),
      padding: EdgeInsets.symmetric(vertical: 4),
      alignment: Alignment.center,
      child: Text(
        name,
        style: TextStyle(
          fontSize: 16,
          fontWeight: FontWeight.w400,
        ),
      ),
    );
  }
}

Answer 1

You can add renderBorder: false, property to remove the ash colored border and borderRadius: BorderRadius.circular(15), to make the round circled border in the outside and make the shape you can use constraints: const BoxConstraints.expand(height: 25,width: 34), to get the the exact size of the height and the width. enter image description here

but to get the exact result you have to use Inkwell() or ElvatedButton() or IconButton() bcz there isnt any property to use the borderRadius: BorderRadius.circular(15), for the each of the icons in the buttons as showed in the picture. Hope it will work for you.