title: How to navigate through pages of a pageview using RawMaterialButton in flutter?
body: <p>I have three pages(that are three steps a user should take to be authenticated). each page contains a form and a submit RawMaterialButton to get the response back from the server. currently, I am using materialpageroute to navigate between pages. I want to use a vertical pageview that includes all three pages and has a circular indicator and navigate between these three pages with the animation of the pageview, not materialpage route. 
  here is one of my pages:</p>
  
  <pre><code>class AuthOnePage extends StatefulWidget {
    @override
    State&lt;StatefulWidget&gt; createState() {
      return _AuthOnePageState();
    }
  }
  
  class _AuthOnePageState extends State&lt;AuthOnePage&gt; {
    final Map&lt;String, dynamic&gt; _formData = {
      'phone': '',
    };
    final GlobalKey&lt;FormState&gt; _formKey = GlobalKey&lt;FormState&gt;();
  
    Widget _buildPhoneTextField() {
      return Container(
        width: MediaQuery.of(context).size.width / 1.05,
        height: MediaQuery.of(context).size.height / 16,
        decoration: BoxDecoration(
          border: Border.all(color: CustomColors()),
          color: Colors.transparent,
          borderRadius: new BorderRadius.all(
            const Radius.circular(40.0),
          ),
        ),
        child: Row(
          children: &lt;Widget&gt;[
            Text(
              ' +98',
              style: TextStyle(fontSize: 22.0 , color: CustomColors().khakestari),
            ),
            SizedBox(
              width: 1.0,
            ),
            VerticalDivider(
              indent: 8.0,
            ),
            SizedBox(width: 4.0),
            Expanded(
              child: TextFormField(
                textDirection: TextDirection.rtl,
                textAlign: TextAlign.end,
                autofocus: true,
                style: TextStyle(fontSize: 22.0 , color: CustomColors().khakestari),
                decoration: InputDecoration(
                  filled: false,
                  isDense: true,
                  errorStyle: TextStyle(fontSize: 15.0 ,),
                  hintText: '',
                  hintStyle: TextStyle( fontSize: 22.0),
                  border: InputBorder.none,
                ),
                keyboardType: TextInputType.phone,
                validator: (String value) {
                  if (value.isEmpty ||
                      value.length &lt; 10 ||
                      !RegExp(r"^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$")
                          .hasMatch(value)) {
                    return '';
                  }
                },
                onSaved: (String value) {
                  _formData['phone'] = value;
                },
              ),
            ),
            Container(
              width: 50,
              height: 50,
              child: Icon(
                Icons.phone_iphone,
                color: CustomColors(),
              ),
            ),
          ],
        ),
      );
    }
  
    void _submitForm(Function authenticateFirst) async {
      if (!_formKey.currentState.validate()) {
        return;
      }
      _formKey.currentState.save();
      Map&lt;String, dynamic&gt; successInformation;
      successInformation = await authenticateFirst(_formData['phone']);
      if (successInformation['success']) {
        Navigator.pushReplacement(context,
            MaterialPageRoute(builder: (BuildContext context) {
          return AuthTwoPage();
        }));
      } else {
        showDialog(
          context: context,
          builder: (BuildContext context) {
            return AlertDialog(
              title: Text(''),
              content: Text(''),
              actions: &lt;Widget&gt;[
                FlatButton(
                  child: Text(''),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                )
              ],
            );
          },
        );
      }
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: GestureDetector(
          onTap: () {
            FocusScope.of(context).requestFocus(FocusNode());
          },
          child: Container(
            margin: EdgeInsets.all(10.0),
            child: Container(
              padding:
                  EdgeInsets.only(top: MediaQuery.of(context).size.height / 4.5),
                child: Column(
                  children: &lt;Widget&gt;[
                    Center(
                        child: Text(
                      '',
                      style:
                          TextStyle(fontSize: 40.0, fontFamily: 'IrYek'),
                    )),
                    SizedBox(height: MediaQuery.of(context).size.height / 7),
                    Form(
                      key: _formKey,
                      child: Column(
                        children: &lt;Widget&gt;[
                          _buildPhoneTextField(),
                          SizedBox(
                            height: 50.0,
                          ),
                          ScopedModelDescendant&lt;MainModel&gt;(
                            builder: (BuildContext context, Widget child,
                                MainModel model) {
                              return model.isLoading
                                  ? CircularProgressIndicator()
                                  : RawMaterialButton(
                                      highlightElevation: 40,
                                      onPressed: () =&gt;
                                          _submitForm(model.authenticateFirst),
                                      splashColor: Colors.white,
                                      shape: StadiumBorder(),
                                      child: Container(
                                        decoration: BoxDecoration(
                                            gradient: LinearGradient(
                                              colors: &lt;Color&gt;[
                                                Color(0xff4b66ea),
                                                Color(0xff4b66ea),
                                                Color(0xff4b66ea),
                                                Colors.blue
                                              ],
                                            ),
                                            boxShadow: [
                                              BoxShadow(
                                                color: Colors.black26,
                                                offset: Offset(0.0, 1.5),
                                                blurRadius: 1.5,
                                              ),
                                            ],
                                            borderRadius:
                                                BorderRadius.circular(40)),
                                        width: MediaQuery.of(context).size.width /
                                            1.05,
                                        height:
                                            MediaQuery.of(context).size.height /
                                                15,
                                        child: Center(
                                          child: Padding(
                                            padding: EdgeInsets.symmetric(
                                                vertical: 8.0, horizontal: 20.0),
                                            child: Text(
                                              '',
                                              style: TextStyle(
                                                  fontFamily: 'IrBold',
                                                  color: Colors.white,
                                                  fontSize: 20),
                                            ),
                                          ),
                                        ),
                                      ),
                                    );
                            },
                          ),
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),
  
      );
    }
  </code></pre>
  
  <p>here is my code for the pageview so far:</p>
  
  <pre><code>import 'package:flutter/material.dart';
  import 'dart:math';
  import 'package:flutter/foundation.dart';
  
  import './authone.dart';
  import './authtwo.dart';
  import './auththree.dart';
  
  
  
  /// An indicator showing the currently selected page of a PageController
  class DotsIndicator extends AnimatedWidget {
    DotsIndicator({
      this.controller,
    }) : super(listenable: controller);
  
    /// The PageController that this DotsIndicator is representing.
    final PageController controller;
  
    /// The number of items managed by the PageController
    final int itemCount =3 ;
  
    /// The color of the dots.
    ///
    /// Defaults to `Colors.white`.
    final Color color = Colors.amber[200];
  
    // The base size of the dots
    static const double _kDotSize = 8.0;
  
    // The increase in the size of the selected dot
    static const double _kMaxZoom = 2.0;
  
    // The distance between the center of each dot
    static const double _kDotSpacing = 25.0;
  
    Widget _buildDot(int index) {
      double selectedness = Curves.easeOut.transform(
        max(
          0.0,
          1.0 - ((controller.page ?? controller.initialPage) - index).abs(),
        ),
      );
      double zoom = 1.0 + (_kMaxZoom - 1.0) * selectedness;
      return new Container(
        width: _kDotSpacing,
        child: new Center(
          child: new Material(
            color: color,
            type: MaterialType.circle,
            child: new Container(
              width: _kDotSize * zoom,
              height: _kDotSize * zoom,
              ),
            ),
        ),
      );
    }
  
    Widget build(BuildContext context) {
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: new List&lt;Widget&gt;.generate(itemCount, _buildDot),
      );
    }
  }
  
  class AuthCollectionPage extends StatefulWidget {
    @override
    State createState() =&gt; new AuthCollectionPageState();
  }
  
  class AuthCollectionPageState extends State&lt;AuthCollectionPage&gt; {
    final _controller = new PageController(viewportFraction: 0.5);
  
    static const _kDuration = const Duration(milliseconds: 300);
  
    static const _kCurve = Curves.ease;
  
    final _kArrowColor = Colors.black.withOpacity(0.8);
  
    final List&lt;Widget&gt; _pages = &lt;Widget&gt;[
     AuthOnePage(),
     AuthTwoPage(),
     AuthThreePage()
    ];
  
    Widget _buildPageItem(BuildContext context, int index) {
      return new Page(page: _pages[index], idx: index);
    }
  
    @override
    Widget build(BuildContext context) {
      return new Scaffold(
        body: new IconTheme(
          data: new IconThemeData(color: _kArrowColor),
          child: new Stack(
            children: &lt;Widget&gt;[
              new PageView.builder(
                physics: new AlwaysScrollableScrollPhysics(),
                controller: _controller,
                itemCount: _pages.length,
                itemBuilder: (BuildContext context, int index) {
                  return _buildPageItem(context, index % _pages.length);
                },
              ),
              new Positioned(
                bottom: 0.0,
                left: 0.0,
                right: 0.0,
                child: new Container(
                  color: Colors.grey[800].withOpacity(0.5),
                  padding: const EdgeInsets.all(20.0),
                  child: new Center(
                    child: new DotsIndicator(
                      controller: _controller,
                      itemCount: _pages.length,
                      onPageSelected: (int page) {
                        _controller.animateToPage(
                          page,
                          duration: _kDuration,
                          curve: _kCurve,
                        );
                      },
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      );
    }
  }
  
  class Page extends StatelessWidget {
    final page;
    final idx;
  
    Page({
      @required this.page,
      @required this.idx,
    });
  
    onTap() {
      print("${this.idx} selected.");
    }
  
    @override
    Widget build(BuildContext context) {
      return new Padding(
        padding: const EdgeInsets.all(8.0),
        child: new Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: &lt;Widget&gt;[
            new Container(
              height: 200.0,
              child: new Card(
                child: new Stack(
                  fit: StackFit.expand,
                  children: &lt;Widget&gt;[
                    this.page,
                    new Material(
                      type: MaterialType.transparency,
                      child: new InkWell(onTap: this.onTap),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      );
    }
  }
  </code></pre>