CODEWITHSUNDEEP
flutterdartflutter-layout
user19555634
user19555634

Reputation:

How do I make overlaying buttons

I have created the following design layout with Adobe XD: enter image description here

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?

Upvotes: 0

Views: 206

Answers (1)

Gregory Conrad
Gregory Conrad

Reputation: 1597

Something like this ought to work:

result

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

Upvotes: 0

Related Questions