Stretch a Border inside Button - flutter

Question

I want to make a button with two rounded borders inside each other.
It should look like this
But currently it looks like this
I tried to set a BoxDecoration to a Container and tried to expand the Container with Expanded or SizedBox.expand but it just doesn't stretch
return FittedBox(
child: RaisedButton(
padding: EdgeInsets.all(2),
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(color: Colors.red, width: 3)
),
child: Padding(
padding: EdgeInsets.all(3),
child: Expanded(
child: Container(
child: Text("Text"),
decoration: BoxDecoration(
border: Border.all(color: Colors.blue, width: 3),
borderRadius: BorderRadius.circular(10),
),
),
)
)
)
);
Is there a better way to do draw a border inside a button?

Answer 1

Use GestureDetector flutter to get the button work, and use
Container()
Center()
to achieve your aforementioned design. Also, read about BoxDecoration class. It will help you in great extent. Rest you will get to know from the below code itself.
Code
GestureDetector(
onTap: () => print('Hello'),
child: Container(
height: MediaQuery.of(context).size.height * 0.1,
width: MediaQuery.of(context).size.width * 0.2,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.0),
// play with width to get the width of the border
border: Border.all(color: Colors.red, width: 5.0),
// play with blurRadius, and offset for the shadow
boxShadow: [BoxShadow(color: Colors.grey, blurRadius: 9.0, offset: Offset(5.0, 5.0))]
),
child: Container(
// play with margin for inside border
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12.0),
// play with width to get the width of the border
border: Border.all(color: Colors.blue, width: 5.0)
),
child: Center(
child: Text('Text', textAlign: TextAlign.center)
)
)
)
)
Result

Answer 2

Remove the FittedBox and wrap the inner Container with a SizedBox.expand:
RaisedButton(
padding: EdgeInsets.all(2),
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(color: Colors.red, width: 3)),
child: Padding(
padding: EdgeInsets.all(3),
child: SizedBox.expand(
child: Container(
child: Center(child: Text("Text")),
decoration: BoxDecoration(
border: Border.all(color: Colors.blue, width: 3),
borderRadius: BorderRadius.circular(10),
),
),
)))
Result: