How do I make overlaying buttons

Question

I have created the following design layout with Adobe XD:

Now I don't know how to make the buttons overlay like that (so that the register button overlays the sign in or something like that.

A friend of mine meant that I should make my own button widget, but I also don't know how I would do it, so they are overlaying.

Does someone know how I could achieve this?

Does this answer your question? [Flutter - Button Group style and position](https://stackoverflow.com/questions/59411532/flutter-button-group-style-and-position) — OMi Shah, Oct 11 '22 at 15:30
No it doesn't because I want this effect of both buttons being rounded but one overlapping the other. — , Oct 11 '22 at 15:39

score 0 · Accepted Answer · answered Oct 11 '22 at 16:10

Something like this ought to work:

Container(
        decoration: BoxDecoration(
          color: Colors.grey.shade200,
          border: Border.all(
            width: 2.0,
            color: Colors.grey.shade500,
          ),
          borderRadius: BorderRadius.all(Radius.circular(12.0)),
        ),
        child: Row(mainAxisSize: MainAxisSize.min, children: [
          Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(12.0)),
            ),
            child: TextButton(child: Padding(padding: EdgeInsets.all(8),child: Text('Register')), onPressed: (){}),
          ),
          TextButton(child: Padding(padding: EdgeInsets.all(8),child: Text('Sign In')), onPressed: (){}),
        ]),
        ),

(I threw this together really quickly in DartPad so sorry about the bad formatting.)

How do I make overlaying buttons

1 Answers1