Flutter: how to make BoxShadow overflow sibling widgets? - flutter

Question

I have a Row with two Expanded widgets as its children. There is no space/padding between a children, therefore. Each of the children contains a Container (with box decoration), which in turn contains a FlatButton. When the FlatButton is highlighted, a BoxShadow appears around the Container.
For the second button, the shadow appears just fine, overflowing part of the first button. However, when the first button is being highlighted, the right side of the BoxShadow, which is supposed to be "over" the second button, gets clipped. I assume it's because the second button (and its respective ancestors) are after the first button in the widget tree, thus being "higher".
Here is the DartPad instance I made to demonstrate the issue: https://dartpad.dev/3e1eaa23c2848ada0104bded02e1510a
My question is essentially how I could achieve, with exactly the same layout, ie. no space between the buttons, that the shadow of each button appears over the other one. That is, the shadow of "Button1" in the example is the same as that of "Button2";
Thanks!

Answer 1

Hi You can check the edited code.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Generated App',
theme: new ThemeData(
primarySwatch: Colors.blue,
primaryColor: const Color(0xFF2196f3),
accentColor: const Color(0xFF2196f3),
canvasColor: const Color(0xFFfafafa),
),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('App Name'),
),
body: new Container(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Center(
child: new Row(
children: [
Expanded(
child: Container(
color: Colors.white,
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 5, 0),
child: Container(
decoration: BoxDecoration(boxShadow: [
BoxShadow(
color: Colors.transparent,
blurRadius: 5.0,
),
]),
child: TestButton("Button1")),
),
)),
Expanded(
child: Container(
color: Colors.white,
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 5, 0),
child: Container(
decoration: BoxDecoration(boxShadow: [
BoxShadow(
color: Colors.transparent,
blurRadius: 5.0,
),
]),
child: TestButton("Button2")),
),
))
],
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
))),
padding: const EdgeInsets.all(0.0),
alignment: Alignment.center,
),
);
}
}
class TestButton extends StatefulWidget {
#required
final String title;
TestButton(this.title);
#override
_TestButtonState createState() => _TestButtonState();
}
class _TestButtonState extends State<TestButton> {
bool isHighlighted = false;
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Container(
height: 50,
decoration: BoxDecoration(boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(isHighlighted ? 0.5 : 0.0),
spreadRadius: isHighlighted ? 5 : 0,
)
]),
child: FlatButton(
shape: ContinuousRectangleBorder(borderRadius: BorderRadius.zero),
splashColor: Colors.black12,
color: Colors.white,
hoverColor: Colors.black12,
highlightColor: Colors.black12,
mouseCursor: MouseCursor.uncontrolled,
child: Text(widget.title),
onPressed: () => null,
onHighlightChanged: (value) {
setState(() {
isHighlighted = value;
});
},
));
}
#override
void dispose() {
super.dispose();
}
}