How to disable the button and set a circular progress indicator while loading in flutter in Material -> Material Button

Question

Here i have defined a bool value _isLoading = false and i Want to disable the button and show circular progress bar when the login process is actually happening.

login function is a async function which returns void.

The code used is :

final loginButton = Material(
      borderRadius: BorderRadius.circular(30),
      color: Colors.redAccent,
      child: MaterialButton(
          elevation: 5,
          color: Colors.redAccent,
          padding: EdgeInsets.fromLTRB(20, 15, 20, 15),
          minWidth: MediaQuery.of(context).size.width,
          disabledColor: Colors.redAccent.withOpacity(0.5),
          onPressed: (_isLoading)
              ? null
              : () {
                  setState(() {
                    _isLoading = true;
                  });
                  signIn(emailController.text.trim(), passwordController.text);
                  setState(() {
                    _isLoading = false;
                  });
                },
          child: (_isLoading)
              ? const Text(
                  "Login",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      fontSize: 20,
                      color: Colors.white,
                      fontWeight: FontWeight.bold),
                )
              : (const SizedBox(
                  width: 16,
                  height: 16,
                  child: CircularProgressIndicator(
                    color: Colors.white,
                    strokeWidth: 1.5,
                  )))),
    );

The output is

The disable color is overriding the parent and is not having borderRadius , and the loading is not stopping. Its running for ever.

I want a functionality Similar to stackoverflow's Post Question/Save Edits Button