title: How to create a Button with two separated Texts and background colors in Flutter?
body: <p>I'm trying to recreate this button:<br />
  <a href="https://i.stack.imgur.com/6B4Bv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6B4Bv.jpg" alt="enter image description here" /></a></p>
  <p>The button has two different background colors and a Text in each section. The &quot;click&quot; is unique, so it doesn't matter which side the user will click.</p>
  <p>I tried this code, but the containers aren't covering the entire area of the button.</p>
  <p>EDIT: complete widget tree below</p>
  <pre class="lang-dart prettyprint-override"><code>Card(
                  elevation: 3.0,
                  shadowColor: Colors.grey.shade50,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10.0)),
                  child: Container(
                   
                    child: Column(
                      children: [
                        Text(&quot;${data[&quot;teams&quot;]}&quot;),
                        Row(
  
                          children: [
                            Expanded(
                              child: TextButton(
                                onPressed: () {  },
                                child: Row(
  
                                  children: [
                                    Container(
                                      color: Colors.redAccent,
                                      child: Text(&quot;1&quot;),
                                    ),
                                    Container(color: Colors.white,)
                                  ],
                                ),
                              )
                            ),
                            Expanded(
                                child: TextButton(
                                  onPressed: () {  },
                                  child: Row(
                                    children: [
                                      Expanded(
                                        child: Container(
                                          color: Colors.redAccent,
                                          child: Text(&quot;X&quot;),
                                        ),
                                      ),
                                      Expanded(
                                        child: Container(color: Colors.white,),
                                      )
                                    ],
                                  ),
                                )
                            ),
                            Expanded(
                                child: TextButton(
                                  onPressed: () {  },
                                  child: Row(
                                    children: [
                                      Expanded(
                                        child: Container(
                                          color: Colors.redAccent,
                                          child: Text(&quot;2&quot;),
                                        ),
                                      ),
                                      Expanded(
                                        child: Container(color: Colors.white,),
                                      )
                                    ],
                                  ),
                                )
                            ),
                          ],
                        )
  
                      ],
                    )
                  )
  
              );
  </code></pre>