1

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(),
          ],
        ));
  }
}

[11

The container is inside Menu Dash board. It the Mini HomeScreen on the right, borderRadius is square instead of circular.

orynnnnn
  • 101
  • 3
  • 13
  • 1
    it works just fine: `class Foo extends StatefulWidget { @override _FooState createState() => _FooState(); } class _FooState extends State { var r = 0.0; @override Widget build(BuildContext context) { return AnimatedContainer( duration: 1000.milliseconds, decoration: BoxDecoration( borderRadius: BorderRadius.circular(r), color: r == 0? Colors.orange : Colors.red, boxShadow: kElevationToShadow[2], ), child: GestureDetector( onTap: () => setState(() => r = (r == 0)? 32 : 0) ), ); } }` – pskink Jul 26 '20 at 04:07
  • and? is `BorderRadius` rendered? – pskink Jul 26 '20 at 05:21

0 Answers0