How to create a Button with two separated Texts and background colors in Flutter?

Question

I'm trying to recreate this button:

The button has two different background colors and a Text in each section. The "click" is unique, so it doesn't matter which side the user will click.

I tried this code, but the containers aren't covering the entire area of the button.

EDIT: complete widget tree below

Card(
                elevation: 3.0,
                shadowColor: Colors.grey.shade50,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10.0)),
                child: Container(
                 
                  child: Column(
                    children: [
                      Text("${data["teams"]}"),
                      Row(

                        children: [
                          Expanded(
                            child: TextButton(
                              onPressed: () {  },
                              child: Row(

                                children: [
                                  Container(
                                    color: Colors.redAccent,
                                    child: Text("1"),
                                  ),
                                  Container(color: Colors.white,)
                                ],
                              ),
                            )
                          ),
                          Expanded(
                              child: TextButton(
                                onPressed: () {  },
                                child: Row(
                                  children: [
                                    Expanded(
                                      child: Container(
                                        color: Colors.redAccent,
                                        child: Text("X"),
                                      ),
                                    ),
                                    Expanded(
                                      child: Container(color: Colors.white,),
                                    )
                                  ],
                                ),
                              )
                          ),
                          Expanded(
                              child: TextButton(
                                onPressed: () {  },
                                child: Row(
                                  children: [
                                    Expanded(
                                      child: Container(
                                        color: Colors.redAccent,
                                        child: Text("2"),
                                      ),
                                    ),
                                    Expanded(
                                      child: Container(color: Colors.white,),
                                    )
                                  ],
                                ),
                              )
                          ),
                        ],
                      )

                    ],
                  )
                )

            );

Md. Yeasin Sheikh · Accepted Answer · 2022-07-19 15:59:19Z

2

You can wrap row with clickable widget like InkWell, or GestureDetector to get tap event

SizedBox(
  height: kToolbarHeight,
  width: 200,
  child: ClipRRect(
    borderRadius: BorderRadius.circular(12),
    child: GestureDetector(
      onTap: () {},
      child: Row(
        children: [
          Flexible(
            flex: 4,
            child: Container(
              alignment: Alignment.center,
              color: Colors.cyanAccent,
              child: Text("1"),
            ),
          ),
          Flexible(
            flex: 6,
            child: Container(
              alignment: Alignment.center,
              color: Colors.white,
              child: Text("1.24"),
            ),
          )
        ],
      ),
    ),
  ),
)

  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Card(
                elevation: 3.0,
                shadowColor: Colors.grey.shade50,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10.0)),
                child: Container(
                    child: Column(
                  children: [
                    Text("{data[]}"),
                    Row(
                      children: [
                        Expanded(
                            child: TextButton(
                          onPressed: () {},
                          child: Row(
                            children: [
                              Container(
                                color: Colors.redAccent,
                                child: Text("1"),
                              ),
                              Container(
                                color: Colors.white,
                              )
                            ],
                          ),
                        )),
                        Expanded(
                            child: TextButton(
                          onPressed: () {},
                          child: Row(
                            children: [
                              Expanded(
                                child: Container(
                                  color: Colors.redAccent,
                                  child: Text("X"),
                                ),
                              ),
                              Expanded(
                                child: Container(
                                  color: Colors.white,
                                ),
                              )
                            ],
                          ),
                        )),
                        Expanded(child: myButton()),
                      ],
                    )
                  ],
                )))
          ],
        ),
      ),
    );
  }

  ClipRRect myButton() {
    return ClipRRect(
      borderRadius: BorderRadius.circular(12),
      child: GestureDetector(
        onTap: () {},
        child: Row(
          children: [
            Flexible(
              flex: 4,
              child: Container(
                alignment: Alignment.center,
                color: Colors.cyanAccent,
                child: Text("1"),
              ),
            ),
            Flexible(
              flex: 6,
              child: Container(
                alignment: Alignment.center,
                color: Colors.white,
                child: Text("1.24"),
              ),
            )
          ],
        ),
      ),
    );
  }

edited Jul 19, 2022 at 15:59

answered Jul 19, 2022 at 14:10

Md. Yeasin Sheikh

64.8k7 gold badges50 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

faccio Over a year ago

My button has no fixed size but it is wrapped in Expanded. Will this work anyways?

Md. Yeasin Sheikh Over a year ago

Hope it would, but if you could provide more about parent widget, It would be easy to test it out.

faccio Over a year ago

I've just added the entire widget tree

Md. Yeasin Sheikh Over a year ago

Does this produce error on your test case.

faccio Over a year ago

I need to use Expanded because I have 3 button in a row, so I have to remove SizedBox. And if I remove it, it produce

RenderBox was not laid out: RenderPhysicalShape#815a6 relayoutBoundary=up16 'package:flutter/src/rendering/box.dart': Failed assertion: line 1979 pos 12: 'hasSize'

|

Pierre Monier · Accepted Answer · 2022-07-19 13:59:23Z

0

You can solve this by adding the property crossAxisAlignment to CrossAxisAlignment.stretch in your row:

Row(
         crossAxisAlignment: CrossAxisAlignment.stretch
         children: [
              Expanded(
                   child: Container(
                         color: Colors.redAccent,
                         child: Text("1"),
                         ),
                        ),
              Expanded(
                  child: Container(color: Colors.white,),
                      )
                   ]
                ),

answered Jul 19, 2022 at 13:59

Pierre Monier

6773 silver badges11 bronze badges

3 Comments

faccio Over a year ago

The following error is shown :

RenderBox was not laid out: RenderPhysicalShape#a8e29 relayoutBoundary=up16 'package:flutter/src/rendering/box.dart': Failed assertion: line 1979 pos 12: 'hasSize'

Pierre Monier Over a year ago

hum I see, your Button should have an infinite height, so setting crossAxisAlignment: CrossAxisAlignment.stretch throws this. Try to wrap your Button in a SizedBox with a static width and height. If you can't do that my solution isn't going to be perfect

faccio Over a year ago

I have 3 button in a row that are wrapped with Expanded so it can't be static in my usecase. Thank you anyway!

Collectives™ on Stack Overflow

How to create a Button with two separated Texts and background colors in Flutter?

2 Answers 2

10 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related