How do I make overlaying buttons-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

Have you tried using the Stack Widget to create the overlay design?

Documentation: https://api.flutter.dev/flutter/widgets/Stack-class.html

This video also explains how to create such designs: https://www.youtube.com/watch?v=eegl7of4g-o&ab_channel=MitchKoko