I want to put part of the container on another

Question

I need to implement two buttons. which needs to be partially placed on another button. So the content changes after when the button changes. I'm stuck on placing these buttons. Help me !

Here is what I have done so far.

 Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Container(
              height: 50,
              width: 75,
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      Color.fromRGBO(250, 250, 250, 1),
                      Color.fromRGBO(250, 250, 250, 1)
                    ],
                  ),
                  borderRadius: BorderRadius.all(Radius.circular(50)),
                  boxShadow: [
                    BoxShadow(
                        color: Colors.grey,
                        blurRadius: 20.0,
                        // spreadRadius: 5.0,
                        offset: Offset(0, 10.0))
                  ]),
              child: Center(
                child: Text(
                  'Posts',
                  style: TextStyle(
                      color: Colors.black, fontWeight: FontWeight.bold,fontFamily: 'Montserrat'),
                ),
              ),
            ),
            Container(
              height: 50,
              width: 95,
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [Color(0xFFf45d27), Color(0xFFf5851f)],
                  ),
                  borderRadius: BorderRadius.all(Radius.circular(50))),
              child: Center(
                child: Text(
                  'Events',
                  style: TextStyle(
                      color: Colors.white, fontFamily: 'Montserrat',fontWeight: FontWeight.bold),
                ),
              ),
            )
          ],
        ),
      ),

I want the output to be like this.

Answer 1

int viewChoice = 0; /*This is the selection of button to maintain design of button*/

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Text(
            'Toolbar Title',
            style: TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.bold /*fontSize,etc*/),
          ),
          actions: [
            IconButton(
                icon: Icon(Icons.account_circle),
                onPressed: () {
                  //Todo when pressed
                }),
          ]),
      body: Container(
        padding:EdgeInsets.only(top:20),
        child: Container(
          height:50.0,
                  margin: EdgeInsets.only(left: 25.0, right: 25.0),
                  alignment: Alignment.topCenter,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(14.0),
                      border: Border.all(color: Colors.black, width: 1.0)),
                  child: Row(mainAxisSize: MainAxisSize.min, children: [
                    Expanded(
                      child: Container(
                        decoration: BoxDecoration(
                          gradient: viewChoice == 0
                              ? LinearGradient(
                                  colors: [Colors.blueAccent, Colors.blue],
                                )
                              : null,
                          borderRadius: BorderRadius.circular(13.0),
                          border: viewChoice == 0
                              ? Border.all(color: Colors.black, width: 1.0)
                              : null,
                        ),
                        child: FlatButton(
                          color: Colors.transparent,
                          onPressed: () {
                            setState(() {
                              viewChoice = 0;
                            });
                          },
                          child: Text(
                            'Button 1',
                            /*style as your requirement*/
                          ),
                        ),
                      ),
                    ),
                    Expanded(
                      child: Container(
                        decoration: BoxDecoration(
                          gradient: viewChoice == 1
                              ? LinearGradient(
                                  colors: [Colors.blueAccent, Colors.blue],
                                )
                              : null,
                          borderRadius: BorderRadius.circular(13.0),
                          border: viewChoice == 1
                              ? Border.all(color: Colors.black, width: 1.0)
                              : null,
                        ),
                        child: FlatButton(
                          onPressed: () {
                            setState(() {
                              viewChoice = 1;
                            });
                          },
                          child: Text(
                            'Button 2',
                            /*style as your requirement*/
                          ),
                        ),
                      ),
                    ),
                  ]),
                ),
        )
    );
  }

Answer 2

maybe you can try like this? copy paste into dartpad to see the result

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("First Page"),
      ),
      body: Center(
        child: Container(
          height: 50,
          width: 200,
          decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [
                  Color.fromRGBO(250, 250, 250, 1),
                  Color.fromRGBO(250, 250, 250, 1)
                ],
              ),
              borderRadius: BorderRadius.all(Radius.circular(50)),
              boxShadow: [
                BoxShadow(
                    color: Colors.grey,
                    blurRadius: 20.0,
                    // spreadRadius: 5.0,
                    offset: Offset(0, 10.0))
              ]),
          child: Stack(
            //change this to move position
            alignment: Alignment.center,
            children: <Widget>[
              Container(),
              Row(
                //change this to move position
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  //right container
                  Container(
                    height: 50,
                    width: 100,
                    decoration: BoxDecoration(
                        gradient: LinearGradient(
                          colors: [Color(0xFFf45d27), Color(0xFFf5851f)],
                        ),
                        borderRadius: BorderRadius.all(Radius.circular(50))),
                    child: Center(
                      child: Text(
                        'Events',
                        style: TextStyle(
                            color: Colors.white,
                            fontFamily: 'Montserrat',
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                  ),
                  //left container
                  Container(
                    height: 50,
                    width: 100,
                    child: Center(
                      child: Text(
                        'Events',
                        style: TextStyle(
                            color: Colors.black,
                            fontFamily: 'Montserrat',
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                  )
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

but the answer from Shekar will work too

Answer 3

You can use Stack for it.

something like this

Center(
        child: Container(
          height:30,
          width:50,
          child:Stack(
          alignment:Alignment.centerLeft,
        children:<Widget>[
        //the bottom widget
          Align(alignment:Alignment.centerRight,child: 
          Container(width:50,color:Colors.red),),
          //the top widget
           Align(alignment:Alignment.centerLeft,child: Container(width:30,color:Colors.black.withOpacity(.5)),),
        ]),),
      ),