How to show up different widget on by clicking which are placed on the same page in flutter

Question

I want to refer to a different section of a particular stateful widget class which has many other differnt widgets in it. After a click on a button, it should slide down and show up a particular widget on the same page.

Expected Output:

What I have achieved so far is just the pages but could get the same output with that slide up transition

Here's my code snippet:

 Positioned(
                        top: 330,
                        left: 1300,
                        child: InkWell(
                          onTap: () {},
                          child: Card(
                            child: Container(
                              height: 100.h,
                              width: 60.h,
                              child: RotatedBox(
                                quarterTurns: 3,
                                child: Center(
                                  child: Text(
                                    'CONTACT?',
                                    style: blue,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),
                      ), 

Extracted widget:

class AboutUs extends StatelessWidget {
  const AboutUs({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 600.h,
      width: 1300.w,
      child: Stack(
        children: [
          Positioned(
            top: 10,
            //left: 0,
            child: Container(
              height: 400.h,
              width: 150.w,
              //color: Colors.green,
              child: Image.asset(
                'images/Rectangle 7.png',
                fit: BoxFit.fill,
              ),
            ),
          ),
          Positioned(
            top: 30,
            left: 60,
            child: Container(
              height: 300.h,
              width: 300.w,
              //color: Colors.green,
              child: Image.asset(
                'images/rect.png',
                fit: BoxFit.fill,
              ),
            ),
          ),
          Positioned(
            top: 20,
            left: 600,
            child: Text(
              'ABOUT US',
              style: TextStyle(
                  fontFamily: 'Poppins',
                  fontSize: 30,
                  color: AppColors.getLightYellow()),
            ),
          ),
          Positioned(
            top: 50,
            left: 600,
            child: Center(
              child: Container(
                height: 550.h,
                width: 450.w,
                child: Center(
                  child: Text(
                    'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna',
                    style: contact2,
                  ),
                ),
              ),
            ),
          ),
          Positioned(
            top: 370,
            left: 500,
            child: Container(
              height: 60.h,
              width: 800.w,
              color: AppColors.getLightBlue(),
            ),
          ),
          Positioned(
            top: 330,
            left: 1300,
            child: InkWell(
              onTap: () {},
              child: Card(
                child: Container(
                  height: 100.h,
                  width: 60.h,
                  child: RotatedBox(
                    quarterTurns: 3,
                    child: Center(
                      child: Text(
                        'HOW?',
                        style: blue,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

You could solve this problem by approaching in different ways. The easiest solution would be to create a "state" and include a "visible" widget. When you change the widget you replace the visible widget with the new widget that you want to show.

class _MyHomePageState extends State<MyHomePage> {
  Widget _visibleWidget = Text("Not the visible Widget");

  void _changeWidget() {
    setState(() {
      _visibleWidget = Icon(Icons.group);
    });
  }
  ...

https://codepen.io/md-weber/pen/eYzZBZz

Another solution would be the PageView widget. It allowes you to control different "page" widgets that you can show and replace.