Flutter Question posted in
The official Flutter documentation can be found here.

On Flutter go_router how to change only content of special container?

I have a page in Flutter which has 3 different elements header, sidebar and main_content. Sidebar contains some text buttons login, customer, manager etc.

When someone clicks on the button on the sidebar i want to change only the content of the main_content. I dont want to replace whole screen. I just want to replace the content of main_content with another widget.

I am not sure if it can be done using flutter package go_router. Or I have to use state management for this case.

I tried Go_router shell routes. But i think it is made for different purpose.

enter image description here

Tags:

2

Answers


  1. 0

    This can be achieved with shellRoutes in go_router. But if you just want to change the content of the page, then you can follow this approach:

    class TestPage extends StatefulWidget {
  const TestPage({super.key});

  @override
  State<TestPage> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  int _selection = 0;

  List<Widget> content = [
    Container(height: double.infinity, color: Colors.grey),
    Container(height: double.infinity, color: Colors.green),
    Container(height: double.infinity, color: Colors.orange),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      drawer: Drawer(
        child: ListView.builder(
          itemCount: content.length,
          itemBuilder: (context, index) {
            return ListTile(
              onTap: () {
                setState(() {
                  _selection = index;
                });
              },
              title: Text("Option ${index + 1}"),
            );
          },
        ),
      ),
      body: content[_selection],
    );
  }
}

    demo

    Login or Signup to reply.
  2. 0

    Following my suggestion, you would initialize a variable named _currentMainContent with a type of Widget, setting it initially to a Placeholder widget. This variable would represent the main content area of your application.

    Whenever a user interacts with a side menu item, you would update the _currentMainContent variable to display the appropriate widget corresponding to the selected menu item. This approach allows for dynamic content switching within the main content area of your application.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search