How can we animate an AnimatedPositioned widget to right of screen and hide it on button press?

I am having a lot of trouble getting a layer of my sidebar widget positioned properly on the right of the screen.

I've tried many different position property changes and haven't been able to get the sidebar on the right side yet. Furthermore, I keep getting errors for constraints not set as well as size not set. This is confusing since the container child does have size and the animated widget is giving a constraint... so I'm not sure how to go about this.

If I comment out all constraints of the AnimatedPositioned widget, then the sidebar does appear on the left. Any attempt to add a position results in an error.

The goal here is the blue sidebar on the right of the screen & when a button is pressed it disappears right off-screen and the page content then fills the entire screen width.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Center(
            child: MyWidget(),
          ),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool showSidebar = true;

  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;

    return SafeArea(
      child: Stack(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            mainAxisSize: MainAxisSize.max,
            children: [
              Expanded(
                child: SingleChildScrollView(
                  child: Column(
                    children: [
                      Container(
                        width: double.maxFinite,
                        height: 700,
                        color: Colors.red,
                      ),
                      Container(
                        width: double.maxFinite,
                        height: 700,
                        color: Colors.yellow,
                      ),
                    ],
                  ),
                ),
              ),
              // Invisible box to allow space for sidebar when shown or hidden
              (showSidebar) ? SizedBox(width: 43) : SizedBox(width: 0),
            ],
          ),
          // Sidebar box
          AnimatedPositioned(
            // left: 0, // (showSidebar) ? width - 43 : width,
            // width: 43,
            // top: 0,
            curve: Curves.ease,
            duration: const Duration(milliseconds: 500),
            child: Container(
              width: 43.0,
              color: Colors.blue,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: const [
                  SizedBox(height: 120.0),
                  Expanded(
                    child: Center(
                      child: RotatedBox(
                        quarterTurns: -1,
                        child: Text(
                          'EXAMPLE MENU BAR - PAGE 1',
                          style: TextStyle(
                              fontSize: 20.0, fontWeight: FontWeight.bold, color: Colors.white),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 5.0, top: 5.0, right: 4.0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                fakeButton(),
                Column(
                  children: [
                    fakeButton(),
                    fakeButton(),
                    fakeButton(),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // Fake buttons
  Widget fakeButton() {
    return GestureDetector(
      onTap: () => {
        setState(() {
          (showSidebar) ? showSidebar = false : showSidebar = true;
        })
      },
      child: SizedBox(
        height: 35,
        width: 35,
        child: Stack(
          children: const [
            Icon(
              Icons.circle,
              color: Colors.green,
              size: 35.0,
            ),
            Align(
              alignment: Alignment.center,
              child: Text(
                'HIDE',
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 9.0,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

You have to give a property right:0 and give the child container a height value and it should be the screen size.

Try this:

AnimatedPositioned(
    // left: 0, // (showSidebar) ? width - 43 : width,
    // width: 43,
    // top: 0,
    right: 0,
    curve: Curves.ease,
    duration: const Duration(milliseconds: 500),
    child: Container(
      width: 43.0,
      height: MediaQuery.of(context).size.height,
      color: Colors.blue,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: const [
          SizedBox(height: 120.0),
          Expanded(
            child: Center(
              child: RotatedBox(
                quarterTurns: -1,
                child: Text(
                  'EXAMPLE MENU BAR - PAGE 1',
                  style: TextStyle(
                      fontSize: 20.0, fontWeight: FontWeight.bold, color: Colors.white),
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  ),