How to add page inside the body of main class like Android fragment in flutter

Question

I am new to Flutter. I worked before Native Android using Java. Now I am wanting to add a fragment in Flutter. I have made the drawer and body. Now how to run a page in the flutter body container when they click on drawer items like an android fragment.

My drawer Code:

drawer: SafeArea(
        child: Drawer(
          child: Container(
            color: Colors.white,
            child: ListView(
              children:  [
                DrawerHeader(
                  decoration: const BoxDecoration(
                    color: Colors.indigoAccent
                  ),
                  child: Column(
                      children: [
                        Container(
                          width: 70,
                          height: 70,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(50),
                              border: Border.all(
                              color: Colors.white,
                              width: 2.0),
                            image: const DecorationImage(
                            image: AssetImage('assets/images/logo_image.png'),
                             )
                          ),
                        ),
                        const SizedBox(height: 15,),
                        const Text("Image Cleaner",
                          style: TextStyle(
                              color: Colors.white,
                              fontWeight: FontWeight.bold, fontSize: 15,
                          ),),
                        const SizedBox(height: 2,),
                        const Text("support.imageclean@gmail.com",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 12,
                            decorationThickness: 15,
                          ),)
                    ],
                  ),
                ),
                ListBody(
                  children: [
                    ListTile(
                      leading: Icon(Icons.home),
                      title: Text('Home'),
                      onTap: () {
                        Navigator.of(context).pop();
                       
                      },
                    ),
                    ListTile(
                      leading: Icon(Icons.settings),
                      title: Text('Settings'),
                      onTap: () {
                        Navigator.of(context).pop();
                        
                      },
                    ),
                    ListTile(
                      leading: Icon(Icons.help),
                      title: Text('Help'),
                      onTap: () {
                        Navigator.of(context).pop();
                       
                      },
                    ),
                  ],
                )
              ],
            ),
          ),
        ),
      ),

In the body section, I just add a Container. I don't get enough information. Please if someone could help.

Answer 1

In Flutter everything is a Widget and you can achieve similar functionality to Android's fragments by using Flutter's Navigator and PageRoute classes. Here's an example of how you can create a drawer with pages that can be navigated using Flutter's Navigator:

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;

  final List<Widget> _pages = [
    Page1(),
    Page2(),
    Page3(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Drawer Example'),
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            ListTile(
              title: Text('Page 1'),
              onTap: () {
                setState(() {
                  _currentIndex = 0;
                  Navigator.pop(context);
                });
              },
            ),
            ListTile(
              title: Text('Page 2'),
              onTap: () {
                setState(() {
                  _currentIndex = 1;
                  Navigator.pop(context);
                });
              },
            ),
            ListTile(
              title: Text('Page 3'),
              onTap: () {
                setState(() {
                  _currentIndex = 2;
                  Navigator.pop(context);
                });
              },
            ),
          ],
        ),
      ),
      body: _pages[_currentIndex],
    );
  }
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Page 1'),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Page 2'),
    );
  }
}

class Page3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Page 3'),
    );
  }
}

In this example, we use a StatefulWidget called HomePage to keep track of the currently selected page index in the _currentIndex variable. The HomePage widget has a list of pages (_pages) which are displayed based on the selected index.

When a list tile in the drawer is tapped, we update the _currentIndex and call Navigator.pop(context) to close the drawer. This triggers a rebuild of the HomePage, and the selected page is displayed based on the updated _currentIndex.

You can modify the code and add more pages by extending the Page1, Page2, Page3 classes and adding them to the _pages list.

This approach allows you to create a similar navigation pattern to Android's fragments, where different pages are displayed based on user interaction.