Flutter : How to use router on dialog

Question

First i have a button to open a dialog

When clicking on repeat i want to user navigator push a page on dialog like this

How can't i do that with flutter? Thanks for your help!

Answer 1

You can use PageView.builder with PageController to achieve your expected result. I'm sharing a reference example you can modify it as per your need.

class WelcomeScreen extends StatefulWidget {
  @override
  _WelcomeScreenState createState() => _WelcomeScreenState();
}

class _WelcomeScreenState extends State<WelcomeScreen> {
  PageController _controller = PageController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Pagination Example"),
      ),
      body: Padding(
        padding: EdgeInsets.all(24.0),
        child: Center(
          child: PageView.builder(
              controller: _controller,
              itemCount: 2,
              itemBuilder: (context, index) => Scaffold(
                    appBar: AppBar(
                      title: Text("Page $index"),
                      leading: index == 1
                          ? IconButton(
                              onPressed: () {
                                _controller.previousPage(
                                    duration: Duration(milliseconds: 100),
                                    curve: Curves.ease);
                              },
                              icon: Icon(Icons.arrow_back),
                            )
                          : null,
                    ),
                    body: Column(
                      children: [
                        Text("Content of Page $index"),
                        Visibility(
                          visible: index == 1 ? false : true,
                          child: ElevatedButton(
                              onPressed: () {
                                _controller.nextPage(
                                    duration: Duration(milliseconds: 100),
                                    curve: Curves.ease);
                              },
                              child: Text("Next Page")),
                        )
                      ],
                    ),
                  )),
        ),
      ),
    );
  }
}