CODEWITHSUNDEEP
flutterdart
user8385652
user8385652

Reputation: 109

Flutter: How to align inner Button to left side of outer Button

im trying to place the inner grey Button inside the red Button, but cant find a way to align it to the left side of the red button.

Excuse my bad code, im new to flutter.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home: MainApp(),
));

class MainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.fromLTRB(50, 100, 50, 0),
        child: SizedBox(
          child: ButtonTheme(
            height: 70,
            child: FlatButton(
              child: SizedBox(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    ButtonTheme(
                      height: 70,
                      child: FlatButton(
                        child: Text(""),
                        shape: new RoundedRectangleBorder(
                          borderRadius: new BorderRadius.circular(13.0),
                        ),
                        onPressed: () {},
                        color: Colors.grey,
                      ),
                    ),
                  ],
                ),
              ),
              shape: new RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(13.0),
              ),
              onPressed: () {},
              color: Colors.red,
            ),
          ),
        ),
      ),
    );
  }
}

This is what im getting, and im trying to get rid of the red space on the left side of the innner Button.

enter image description here

Upvotes: 0

Views: 1082

Answers (1)

loushou
loushou

Reputation: 1512

Like others have pointed out, we are not sure of your motivation for having a button inside of a button.... however, if you actually need this for some reason, here is the solution:

SizedBox(
  child: ButtonTheme(
    height: 70,
    child: FlatButton(
      padding: EdgeInsets.zero, // ADD THIS LINE
      child: SizedBox(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            ButtonTheme(
              height: 70,
              child: FlatButton(
                child: Text(""),
                shape: new RoundedRectangleBorder(
                  borderRadius: new BorderRadius.circular(13.0),
                ),
                onPressed: () {},
                color: Colors.grey,
              ),
            ),
          ],
        ),
      ),
      shape: new RoundedRectangleBorder(
        borderRadius: new BorderRadius.circular(13.0),
      ),
      onPressed: () {},
      color: Colors.red,
    ),
  ),
);

Basically, FlatButton() has a padding parameter, which is used to control this spacing that you are referring to, as well as the 0-width space above and below the grey button and the equivalent space on the right side of the button. Passing in EdgeInsets.zero makes sure there is no padding on any interior side of the button.

Hope this helps

Upvotes: 1

Related Questions