If you want to add sliding form steps in Flutter? Here is an option, you can wrap pages with Navigator widget something like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>(); return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Title')), body: SafeArea( child: WillPopScope( onWillPop: () async => !await _navigatorKey.currentState.maybePop(), child: Navigator( key: _navigatorKey, onGenerateRoute: (settings) { switch (settings.name) { case '/': return MaterialPageRoute(builder: (context) => HomePage()); break; case '/step1': return CupertinoPageRoute(builder: (context) => FormStep1()); break; case '/step2': return CupertinoPageRoute(builder: (context) => FormStep2()); break; } }, ), ), ), ), ); } } class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Container( color: Colors.green[200], child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('HomePage'), RaisedButton( onPressed: () => Navigator.pushNamed(context, '/step1'), child: Text('Start'), ), ], ), ); } } class FormStep1 extends StatelessWidget { @override Widget build(BuildContext context) { return Container( color: Colors.blue[200], child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('FormStep1'), RaisedButton( onPressed: () => Navigator.pushNamed(context, '/step2'), child: Text('Next'), ), ], ), ); } } class FormStep2 extends StatelessWidget { @override Widget build(BuildContext context) { return Container( color: Colors.yellow[200], child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('FormStep2'), RaisedButton(onPressed: () {}, child: Text('Next')), ], ), ); } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
