Remove default padding between FilledButton and Container

Question

I am starting on Flutter and I have a small UI issue that I cannot find a way to fix.

There is a small margin between the button and the container that I would like to remove.

Below is my code:

Widget _signInOrSignUpSelector() {
    return Container(
        //height: 105,
        decoration: BoxDecoration(
          color: FoodlooseColors.cOrange.withOpacity(0.3),
          borderRadius: BorderRadius.circular(45),
        ),
        child: Center(
            child: Row(children: [
          Expanded(child: _signInSelectorButton()),
          Expanded(
            child: _signUpSelectorButton(),
          )
        ])));
  }

  Widget _signInSelectorButton() {
    return FilledButton(
      onPressed: () {
        setState(() {
          isLogin = !isLogin;
        });
      },
      style: FilledButton.styleFrom(
        backgroundColor: isLogin ? FoodlooseColors.cOrange : Colors.transparent,
      ),
      child: const Text("Sign-In"),
    );
  }

  Widget _signUpSelectorButton() {
    return FilledButton(
        onPressed: () {
          setState(() {
            isLogin = !isLogin;
          });
        },
        style: FilledButton.styleFrom(
          backgroundColor:
              isLogin ? Colors.transparent : FoodlooseColors.cOrange,
        ),
        child: const Text("Sign-Up"));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: double.infinity,
        width: double.infinity,
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
                padding: const EdgeInsets.only(left: 10, right: 10),
                child: _signInOrSignUpSelector()),
            _entryField('email', _emailController),
            _entryField('password', _passwordController),
            _errorMessage(),
            _submitButton(),
          ],
        ),
      ),
    );
  }

Any idea how to remove the extra padding ?

Answer 1

When you want children widgets to fill Row and Column. You need to use CrossAxisAlignment and MainAxisAlignment properties. So it provide how children widget align in parent widget. Please check these documents. MainAxisAlignment and CrossAxisAlignment

I have adjusted your code that will stretch in vertical as you needed.

@override
Widget build(BuildContext context) {
return Scaffold(
  body: Container(
    height: double.infinity,
    width: double.infinity,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch, << Here
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Padding(
            padding: const EdgeInsets.only(left: 10, right: 10),
            child: _signInOrSignUpSelector()),
      ],
    ),
  ),
);
}

Widget _signInOrSignUpSelector() {
return Container(
    height: 50, << Here
    decoration: BoxDecoration(
      color: Colors.blue.withOpacity(0.3),
      borderRadius: BorderRadius.circular(45),
    ),
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.stretch, <<Here
      children: [
        Expanded(child: _signInSelectorButton()),
        Expanded(child: _signUpSelectorButton())
      ],
    ));
}