replaced pageview with nested navigator for better UX

lib/src/ui/login/welcome.dart

@@ -17,10 +17,9 @@ class Welcome extends StatelessWidget {
         body: Container(
       width: MediaQuery.of(context).size.width,
       padding: EdgeInsets.only(
-          top: topPadding,
-          bottom: bottomPadding + 10.0,
-          left: 15.0,
-          right: 15.0),
+        top: topPadding,
+        bottom: bottomPadding + 10.0,
+      ),
       child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           crossAxisAlignment: CrossAxisAlignment.center,
@@ -33,7 +32,27 @@ class Welcome extends StatelessWidget {
                   child: Text("Beep",
                       style: Theme.of(context).accentTextTheme.display3)),
             ]),
-            Expanded(child: OtpPage()),
+            Expanded(
+                child: Navigator(
+              initialRoute: "welcome/hello",
+              onGenerateRoute: (RouteSettings settings) {
+                WidgetBuilder builder;
+                switch (settings.name) {
+                  case "welcome/hello":
+                    builder = (BuildContext _) => WelcomePage();
+                    break;
+                  case "welcome/login":
+                    builder = (BuildContext _) => LoginPage();
+                    break;
+                  case "welcome/otp":
+                    builder = (BuildContext _) => OtpPage();
+                    break;
+                  default:
+                    throw Exception("Invalid route: ${settings.name}");
+                }
+                return MaterialPageRoute(builder: builder, settings: settings);
+              },
+            )),
           ]),
       decoration: BoxDecoration(
         gradient: LinearGradient(

lib/src/ui/login/widgets/login_page.dart

@@ -9,30 +9,34 @@ class LoginPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
-      Padding(
-          padding: EdgeInsets.only(top: 10.0, bottom: 20.0),
-          child: SvgPicture.asset(phoneSvg,
-              height: MediaQuery.of(context).size.height / 5)),
-      Column(
-          mainAxisSize: MainAxisSize.min,
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: <Widget>[
-            Text("First things first.",
-                textAlign: TextAlign.left,
-                style: Theme.of(context).accentTextTheme.display3),
-            Text(
-                "Enter your phone number, to connect to your existing Beep account.",
-                style: Theme.of(context)
-                    .accentTextTheme
-                    .title
-                    .copyWith(fontWeight: FontWeight.w400)),
-            Padding(padding: EdgeInsets.only(top: 20.0), child: PhoneInput()),
-          ]),
-      Spacer(),
-      TextButton(
-          text: "Continue",
-          onClickCallback: () => Navigator.pushNamed(context, '/otp')),
-    ]);
+    return Padding(
+        padding: EdgeInsets.only(left: 15.0, right: 15.0),
+        child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
+          Padding(
+              padding: EdgeInsets.only(top: 10.0, bottom: 20.0),
+              child: SvgPicture.asset(phoneSvg,
+                  height: MediaQuery.of(context).size.height / 5)),
+          Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: <Widget>[
+                Text("First things first.",
+                    textAlign: TextAlign.left,
+                    style: Theme.of(context).accentTextTheme.display3),
+                Text(
+                    "Enter your phone number, to connect to your existing Beep account.",
+                    style: Theme.of(context)
+                        .accentTextTheme
+                        .title
+                        .copyWith(fontWeight: FontWeight.w400)),
+                Padding(
+                    padding: EdgeInsets.only(top: 20.0), child: PhoneInput()),
+              ]),
+          Spacer(),
+          TextButton(
+              text: "Continue",
+              onClickCallback: () =>
+                  Navigator.pushNamed(context, 'welcome/otp')),
+        ]));
   }
 }

lib/src/ui/login/widgets/otp_page.dart

@@ -9,44 +9,45 @@ class OtpPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
-      Padding(
-          padding: EdgeInsets.only(top: 10.0, bottom: 20.0),
-          child: SvgPicture.asset(phoneSvg,
-              height: MediaQuery.of(context).size.height / 5)),
-      Column(
-          mainAxisSize: MainAxisSize.min,
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: <Widget>[
-            Text("Almost there.",
-                textAlign: TextAlign.left,
-                style: Theme.of(context).accentTextTheme.display3),
-            Text(
-                "I've sent an authentication code via SMS to your device, enter it below.",
-                style: Theme.of(context)
-                    .accentTextTheme
-                    .title
-                    .copyWith(fontWeight: FontWeight.w400)),
-            Padding(
-                padding: EdgeInsets.only(top: 20.0),
-                child: Center(
-                    child: PinCodeTextField(
-                        highlight: true,
-                        highlightColor: Colors.white,
-                        /*hideCharacter: true,*/
-                        pinBoxDecoration: (Color color) {
-                          return BoxDecoration(
-                              color: Color(0x10000000),
-                              borderRadius:
-                                  BorderRadius.all(Radius.circular(5.00)));
-                        },
-                        pinTextStyle:
-                            Theme.of(context).accentTextTheme.display3))),
-          ]),
-      Spacer(),
-      TextButton(
-          text: "Done",
-          onClickCallback: () => Navigator.pushNamed(context, '/home')),
-    ]);
+    return Padding(
+        padding: EdgeInsets.only(left: 15.0, right: 15.0),
+        child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
+          Padding(
+              padding: EdgeInsets.only(top: 10.0, bottom: 20.0),
+              child: SvgPicture.asset(phoneSvg,
+                  height: MediaQuery.of(context).size.height / 5)),
+          Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: <Widget>[
+                Text("Almost there.",
+                    textAlign: TextAlign.left,
+                    style: Theme.of(context).accentTextTheme.display3),
+                Text(
+                    "I've sent an authentication code via SMS to your device, enter it below.",
+                    style: Theme.of(context)
+                        .accentTextTheme
+                        .title
+                        .copyWith(fontWeight: FontWeight.w400)),
+                Padding(
+                    padding: EdgeInsets.only(top: 20.0),
+                    child: Center(
+                        child: PinCodeTextField(
+                            highlight: true,
+                            highlightColor: Colors.white,
+                            /*hideCharacter: true,*/
+                            pinBoxDecoration: (Color color) {
+                              return BoxDecoration(
+                                  color: Color(0x10000000),
+                                  borderRadius:
+                                      BorderRadius.all(Radius.circular(5.00)));
+                            },
+                            pinTextStyle:
+                                Theme.of(context).accentTextTheme.display3))),
+              ]),
+          Spacer(),
+          TextButton(
+              text: "Done", onClickCallback: () => Navigator.of(context).pop),
+        ]));
   }
 }

lib/src/ui/login/widgets/welcome_page.dart

@@ -8,21 +8,24 @@ class WelcomePage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
-      Spacer(),
-      SvgPicture.asset(welcomeSvg,
-          width: MediaQuery.of(context).size.width - 40.0),
-      Spacer(),
-      Text("Hi, there.", style: Theme.of(context).accentTextTheme.display4),
-      Padding(
-          padding: EdgeInsets.only(bottom: 20.0),
-          child: Text("Let's get you set up and ready to go!",
-              style: Theme.of(context).accentTextTheme.title,
-              textAlign: TextAlign.center)),
-      TextButton(
-          text: "Login",
-          onClickCallback: () => Navigator.pushNamed(context, "/login")),
-      TextButton(text: "Sign Up", onClickCallback: () => print("hello")),
-    ]);
+    return Padding(
+        padding: EdgeInsets.only(left: 15.0, right: 15.0),
+        child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
+          Spacer(),
+          SvgPicture.asset(welcomeSvg,
+              width: MediaQuery.of(context).size.width - 40.0),
+          Spacer(),
+          Text("Hi, there.", style: Theme.of(context).accentTextTheme.display4),
+          Padding(
+              padding: EdgeInsets.only(bottom: 20.0),
+              child: Text("Let's get you set up and ready to go!",
+                  style: Theme.of(context).accentTextTheme.title,
+                  textAlign: TextAlign.center)),
+          TextButton(
+              text: "Login",
+              onClickCallback: () =>
+                  Navigator.pushNamed(context, "welcome/login")),
+          TextButton(text: "Sign Up", onClickCallback: () => print("hello")),
+        ]));
   }
 }