I am trying to render circular borderRadius inside animated container. It renders on a Container's shadow but not on the actual container. any Suggestions?
Here's my code:
Main.dart
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Stack(
children: [Menu(), HomeScreen()],
),
),
);
}
}
HomeScreen.Dart
I've commented the line of code which is not rendering.
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
double xOffset = 0;
double yOffset = 0;
double scaleFactor = 1;
bool _isMenuOpen = false;
@override
Widget build(BuildContext context) {
return AnimatedContainer(
transform: Matrix4.translationValues(xOffset, yOffset, 0)
..scale(scaleFactor)
..rotateY(_isMenuOpen ? -0.5 : 0),
duration: Duration(milliseconds: 250),
decoration: BoxDecoration(
boxShadow: [BoxShadow(color: Colors.black38, offset: Offset(-80,0), spreadRadius: -40)],
borderRadius: BorderRadius.circular(_isMenuOpen ? 40 : 0.0), //.. this line of code is not rendering
),
child: Stack(
children: <Widget>[
AppBar(
title: Text(
'Menu Widget',
style: GoogleFonts.kaushanScript(color: Colors.black),
),
backgroundColor: Colors.white,
leading: _isMenuOpen
? IconButton(
icon: Icon(Icons.close, color: Colors.black),
onPressed: () {
setState(() {
xOffset = 0;
yOffset = 0;
scaleFactor = 1;
_isMenuOpen = false;
});
})
: IconButton(
icon: Icon(
Icons.more_horiz,
color: Colors.black,
),
onPressed: () {
setState(() {
xOffset = 270;
yOffset = 110;
scaleFactor = 0.7;
_isMenuOpen = true;
});
}),
),
HomePageLayout(),
],
));
}
}
[1
The container is inside Menu Dash board. It the Mini HomeScreen on the right, borderRadius is square instead of circular.