Add padding on either side of button

Question

I am trying to add padding to either side of my button below, however, the padding I currently have is only affecting the text within the button itself.

Whenever I try to add padding for the entire button, it throws errors about me having more than one padding

How can I rectify?

final registerButton = Material(
      borderRadius: BorderRadius.circular(3.0),
      color: Color(0xff33333D),
      child: MaterialButton(
        minWidth: mq.size.width / .2,
        padding: EdgeInsets.fromLTRB(10.0, 15.0, 10.0, 15.0),
        child: Text(
          "Sign Up",
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 15.0,
            color: Color(0xffffffff),
            fontWeight: FontWeight.bold,
          ),
        ),
        onPressed: () async {
          try {
            User user =
                (await FirebaseAuth.instance.createUserWithEmailAndPassword(
              email: _emailController.text,
              password: _passwordController.text,
            ))
                    .user;
            if (user != null) {
              user.updateProfile(displayName: _nameController.text);
              Navigator.of(context).pushNamed(AppRoutes.home);
            }
          } catch (e) {
            print(e); // when something is wrong, these reset every anwser
            _nameController.text = "";
            _passwordController.text = "";
            _repasswordController.text = "";
            _emailController.text = "";
            // TODO: alertdialog with error
          }
        },
      ),
    );

Edit: Full Source Code

class SignUp extends StatefulWidget {
  @override
  _SignUpState createState() => _SignUpState();
}

FirebaseAuth auth = FirebaseAuth.instance;

class _SignUpState extends State<SignUp> {
  final _formKey = GlobalKey<FormState>();
  TextEditingController _nameController = TextEditingController();
  TextEditingController _emailController = TextEditingController();
  TextEditingController _passwordController = TextEditingController();
  TextEditingController _repasswordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    final mq = MediaQuery.of(context);

    final logo = Container(
      height: MediaQuery.of(context).size.height * 0.25,
      width: MediaQuery.of(context).size.width,
      child: Image.asset(
        "assets/SignUp_Photo.jpg",
        fit: BoxFit.cover,
      ),
    );

    final text = Column(
      children: <Widget>[
        Padding(
          padding: EdgeInsets.fromLTRB(85.0, 0.0, 85.0, 5.0),
        ),
        Row(
          children: <Widget>[
            Text(
              "Sign Up",
              style: Theme.of(context).textTheme.subtitle1.copyWith(
                    color: Color(0xff33333D),
                    fontSize: 45,
                    fontFamily: 'Avenir',
                    fontWeight: FontWeight.w900,
                  ),
            ),
          ],
        )
      ],
    );

final registerButton = Material(
      borderRadius: BorderRadius.circular(3.0),
      color: Color(0xff33333D),
      child: MaterialButton(
        minWidth: mq.size.width / .2,
        padding: EdgeInsets.fromLTRB(10.0, 15.0, 10.0, 15.0),
        child: Text(
          "Sign Up",
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 15.0,
            color: Color(0xffffffff),
            fontWeight: FontWeight.bold,
          ),
        ),
        onPressed: () async {
          try {
            User user =
                (await FirebaseAuth.instance.createUserWithEmailAndPassword(
              email: _emailController.text,
              password: _passwordController.text,
            ))
                    .user;
            if (user != null) {
              user.updateProfile(displayName: _nameController.text);
              Navigator.of(context).pushNamed(AppRoutes.home);
            }
          } catch (e) {
            print(e); // when something is wrong, these reset every anwser
            _nameController.text = "";
            _passwordController.text = "";
            _repasswordController.text = "";
            _emailController.text = "";
            // TODO: alertdialog with error
          }
        },
      ),
    );

    final bottom = Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        registerButton,
        Padding(
          padding: EdgeInsets.all(9),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Text(
              "Terms and Conditions",
              style: Theme.of(context).textTheme.subtitle1.copyWith(
                    color: Color(0xff33333D),
                  ),
            ),
            MaterialButton(
              onPressed: () {
                Navigator.of(context).pushNamed(AppRoutes.authLogin);
              },
              child: Text(
                "Login",
                style: Theme.of(context).textTheme.subtitle1.copyWith(
                      color: Color(0xff33333D),
                    ),
              ),
            ),
          ],
        ),
      ],
    );

    return Scaffold(
      backgroundColor: Color(0xffffffff),
      body: Form(
        key: _formKey,
        child: SingleChildScrollView(
          child: Container(
            height: mq.size.height,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                logo,
                text,
                fields,
                Padding(
                  padding: EdgeInsets.only(bottom: 150),
                  child: bottom,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

'Padding' always gets added inside an element. Since your button has Text as its child, the padding gets added around the text. If you want space around your button, then what you are looking for is to add margin.

You can add margin to it by wrapping the button in a Container widget with a margin property inside.

Container(
  margin: EdgeInsets.all(8.0),
  child: //yourbutton
)

Answer 2

Instead of:

final bottom = Column(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: <Widget>[
    registerButton,
    Padding(padding: EdgeInsets.all(9)),
    Row(...),
  ],
),

You probably want:

final bottom = Column(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: <Widget>[
    registerButton,
    const SizedBox(height: 9.0),
    Row(...),
  ],
),

If you want some space between your button and the next Row.

Or, maybe this:

final bottom = Column(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: <Widget>[
    Padding(
      padding: const EdgeInsets.all(9)
      child: registerButton,
    ),
    Row(...),
  ],
),

if you want to add 9.0 padding all-around your button.

---

In your particular case:

final bottom = Column(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: <Widget>[
    Padding(
      padding: EdgeInsets.all(16.0),
      child: registerButton,
    ),
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: Text(
            "Terms and Conditions",
            style: Theme.of(context).textTheme.subtitle1.copyWith(
                  color: Color(0xff33333D),
                ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: MaterialButton(
            onPressed: () {},
            child: Text(
              "Login",
              style: Theme.of(context).textTheme.subtitle1.copyWith(
                    color: Color(0xff33333D),
                  ),
            ),
          ),
        ),
      ],
    ),
  ],
);