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?

Answer 1

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.)