How Do I Get a TextButton to Take the Width of its Parent AlertDialog?

Question

I have tried for a few hours to solve this problem with no success, so I thought it would be worth saving a few hairs by asking Stackoverflow.

The Problem: I cannot get a TextButton to take the full width of its parent AlertDialog widget. When I tried to wrap the TextButton in a SizedBox with a width: double.infinity, it crashes when I push the button (this is supposed to be a way to get the button to take the full width according to the web).

The Intended effect: For the TextButton to take the width of the parent AlertDialog.

This is the minimum viable code that works for the problem (please note that I use the package google fonts, I hope that I've gotten rid of them all, but it's very late here.):

import 'package:flutter/material.dart';


 //  import 'package:google_fonts/google_fonts.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
return MaterialApp(
  theme: ThemeData(
    inputDecorationTheme: InputDecorationTheme(
      focusedBorder: UnderlineInputBorder(
        borderSide: BorderSide(
          color: Color(0xffB2413A),
        ),
      ),
    ),
  ),
  home: LoginScreen(),
);
  }
}
    
class LoginScreen extends StatelessWidget {
  const LoginScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;

    return Scaffold(
      body: Container(
        height: size.height,
        child: Center(child: LoginWidget()),
        decoration: BoxDecoration(
          color: Colors.black54,
          image: DecorationImage(
            image: AssetImage('assets/background_image.jpeg'),
            fit: BoxFit.cover,
            colorFilter: ColorFilter.mode(
                Colors.black.withOpacity(0.08), BlendMode.dstATop),
          ),
        ),
      ),
    );
  }
}

class LoginWidget extends StatelessWidget {
     
  @override
  Widget build(BuildContext context) {
    final _size = MediaQuery.of(context).size;
    final double _height = (_size.height) * 0.40;
    final double _width = _height * 0.8;

    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          child: Center(
            child: Text(
              'Login',
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 26,
                  fontWeight: FontWeight.bold),
            ),
          ),
          height: _size.height * 0.085,
          width: _width,
          decoration: BoxDecoration(
            color: Color(0xffB2413A),
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(15), topRight: Radius.circular(15)),
          ),
        ),
        Container(
          height: _size.height * 0.38,
          width: _width,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(15),
                bottomRight: Radius.circular(15)),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Padding(
                padding: const EdgeInsets.all(12.0),
                child: TextFieldAlertDialog(),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

class TextFieldAlertDialog extends StatelessWidget {
  _displayDialog(BuildContext context) async {
    return showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          titlePadding: EdgeInsets.all(0),
          actionsPadding: EdgeInsets.all(0),
          buttonPadding: EdgeInsets.all(0),
          
//TODO: THIS TEXTBUTTON WON'T TAKE THE SIZE OF ITS PARENT //.
          actions: <Widget>[
            SizedBox(
              width: double.infinity,
              child: TextButton(
                onPressed: () {},
                child: Text("Reset Password"),
               // style: TextButton.styleFrom(
                //  textStyle: GoogleFonts.rubik(fontSize: 25),
               //   primary: Colors.white,
               //   backgroundColor: Color(0xffB2413A),
              //  ),
              ),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: TextButton(
        child: Text(
          'FORGET PASSWORD',
         // style: GoogleFonts.rubik(
         //     color: Colors.black, fontSize: 18, fontWeight: FontWeight.w500),
        ),
        onPressed: () => _displayDialog(context),
      ),
    );
  }
}

Any help in solving this problem would be greatly appreciated.

I have added a screenshot of the crash report:

Question:

1. How do I get the button to take the full width of the parent AlertDialog?

Answer 1

I changed and modified the code, please try it. (Edited)

SizedBox(
          width: MediaQuery.of(context).size.width,//full width
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),//space from both sides
            child: TextButton(
              onPressed: () {},
              child: Text("Reset Password"),
              // style: TextButton.styleFrom(
              //  textStyle: GoogleFonts.rubik(fontSize: 25),
              //   primary: Colors.white,
              //   backgroundColor: Color(0xffB2413A),
              //  ),
            ),
          ),
        ),

[1]: https://i.stack.imgur.com/AsOWY.png [![Img of Demonstration][1]][1]