example im trying to get

ive been try to replicate this in flutter where its two text buttons in a container with a check mark when clicked but ive been having trouble inserting the second button Container( margin: const EdgeInsets.all(20.0), padding: const EdgeInsets.all(0.0), decoration: BoxDecoration( border: Border.all(color: Colors.blueAccent, width: 3.0), borderRadius: BorderRadius.all(Radius.circular( 5.0) // <--- border radius here ), ), // child: Padding( padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), child: TextButton( style: ButtonStyle( overlayColor: MaterialStateProperty.resolveWith<Color>( (Set<MaterialState> states) { if (states.contains(MaterialState.pressed)) return Colors.blue; return null; }), shape: MaterialStateProperty.all<RoundedRectangleBorder>( RoundedRectangleBorder( borderRadius: BorderRadius.circular(25.0), side: BorderSide(color: Colors.white)))), onPressed: () {}, child: Text('TextButton with custom overlay colors'), )), ),

CodePudding user response：

Use a Column() widget as your container's child. It will allow you to stack two buttons on top of each other.

CodePudding user response：

try this build method :

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Center(
        child: Container(
          margin: const EdgeInsets.all(20.0),
          padding: const EdgeInsets.all(0.0),
          decoration: BoxDecoration(
            border: Border.all(color: Colors.blueAccent, width: 3.0),
            borderRadius: const BorderRadius.all(Radius.circular( 5.0) ), ),
          child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: [
                Padding(
                padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
                child: TextButton(
                  style: ButtonStyle(
                      overlayColor: MaterialStateProperty.resolveWith<Color>( (Set<MaterialState> states) {
                        if (states.contains(MaterialState.pressed)) {
                          return Colors.blue;
                        }
                        return Colors.red;
                      }),
                      shape: MaterialStateProperty.all<RoundedRectangleBorder>( RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(25.0),
                          side: BorderSide(color: Colors.white)))),
                  onPressed: () {},
                  child: Text('TextButton with custom overlay colors'),
                )
            ),
                const SizedBox(height: 10,),
                Padding(
                padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
                child: TextButton(
                  style: ButtonStyle(
                      overlayColor: MaterialStateProperty.resolveWith<Color>( (Set<MaterialState> states) {
                        if (states.contains(MaterialState.pressed)) {
                          return Colors.blue;
                        }
                        return Colors.red;
                      }),
                      shape: MaterialStateProperty.all<RoundedRectangleBorder>( RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(25.0),
                          side: BorderSide(color: Colors.white)))),
                  onPressed: () {},
                  child: Text('TextButton with custom overlay colors'),
                )
            )
              ]
          ),
        ),
    ),
    );
  }