Use this code example:
result:
[![flutter page view with next previous button][1]][1]
import 'dart:ui';
import 'package:flutter/material.dart';
void main() {
setPathUrlStrategy();
runApp(const MyApp2());
}
class MyApp2 extends StatefulWidget {
const MyApp2({Key? key}) : super(key: key);
@override
State<MyApp2> createState() => _MyApp2State();
}
class _MyApp2State extends State<MyApp2> {
var pageController = PageController();
late num currentPage = pageController.initialPage;
var titleController = PageController();
var pageTitles = [
"1. Login Page",
"2. Profile Page",
"3. Products Page",
"4. Settings Page",
];
@override
void initState() {
super.initState();
pageController.addListener(() {
currentPage = pageController.page ?? 0;
if (currentPage is int) {
setState(() => {}); //for hiding next or previous button when we are in last or first page
}
titleController.position.correctPixels(pageController.offset *
titleController.position.viewportDimension /
pageController.position.viewportDimension);
titleController.position.notifyListeners();
});
}
void nextPage() {
pageController
.animateToPage(
(pageController.page ?? 0).toInt() + 1,
duration: kThemeAnimationDuration,
curve: Curves.decelerate,
)
.then((value) => setState(() => {})); //for hiding next button when we are in last page
}
void previousPage() {
pageController
.animateToPage(
(pageController.page ?? 0).toInt() - 1,
duration: kThemeAnimationDuration,
curve: Curves.decelerate,
)
.then((value) => setState(() => {})); //for hiding previous button when we are in first page
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
scrollBehavior: ScrollConfiguration.of(context)
.copyWith(dragDevices: {PointerDeviceKind.mouse, PointerDeviceKind.trackpad, PointerDeviceKind.touch}),
home: Scaffold(
appBar: AppBar(
backgroundColor: const Color(0xff221D28),
title: Row(
children: [
if (currentPage == 0) //hide previous button
const SizedBox(width: 32)
else
InkResponse(
onTap: previousPage,
child: const Icon(Icons.chevron_left, color: Colors.white, size: 32),
),
Expanded(
child: SizedBox(
height: kToolbarHeight,
child: IgnorePointer(
child: PageView.builder(
controller: titleController,
itemCount: pageTitles.length,
itemBuilder: (c, i) => Center(
child: Text(pageTitles[i], style: const TextStyle(color: Colors.white)),
),
),
),
),
),
if (currentPage == pageTitles.length - 1) //hide next button
const SizedBox(width: 32)
else
InkResponse(
onTap: nextPage,
child: const Icon(Icons.chevron_right, color: Colors.white, size: 32),
),
],
),
),
body: PageView.builder(
controller: pageController,
itemCount: pageTitles.length,
itemBuilder: (c, i) => Center(child: Text(pageTitles[i])),
),
),
);
}
}
[1]: https://i.stack.imgur.com/Lwg7R.gif
**Step 1: Create Dialog**
showAlertDialog(BuildContext context){
AlertDialog alert=AlertDialog(
content: new Row(
children: [
CircularProgressIndicator(),
Container(margin: EdgeInsets.only(left: 5),child:Text("Loading" )),
],),
);
showDialog(barrierDismissible: false,
context:context,
builder:(BuildContext context){
return alert;
},
);
}
**Step 2: Call it**
showAlertDialog(context);
await firebaseAuth.signInWithEmailAndPassword(email: email, password: password);
Navigator.pop(context);
> Example Dialog and login form
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
class DynamicLayout extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return new MyWidget();
}
}
showAlertDialog(BuildContext context){
AlertDialog alert=AlertDialog(
content: new Row(
children: [
CircularProgressIndicator(),
Container(margin: EdgeInsets.only(left: 5),child:Text("Loading" )),
],),
);
showDialog(barrierDismissible: false,
context:context,
builder:(BuildContext context){
return alert;
},
);
}
class MyWidget extends State<DynamicLayout>{
Color color = Colors.indigoAccent;
String title='app';
GlobalKey<FormState> globalKey=GlobalKey<FormState>();
String email,password;
login() async{
var currentState= globalKey.currentState;
if(currentState.validate()){
currentState.save();
FirebaseAuth firebaseAuth=FirebaseAuth.instance;
try {
showAlertDialog(context);
AuthResult authResult=await firebaseAuth.signInWithEmailAndPassword(
email: email, password: password);
FirebaseUser user=authResult.user;
Navigator.pop(context);
}catch(e){
print(e);
}
}else{
}
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar:AppBar(
title: Text("$title"),
) ,
body: Container(child: Form(
key: globalKey,
child: Container(
padding: EdgeInsets.all(10),
child: Column(children: <Widget>[
TextFormField(decoration: InputDecoration(icon: Icon(Icons.email),labelText: 'Email'),
// ignore: missing_return
validator:(val){
if(val.isEmpty)
return 'Please Enter Your Email';
},
onSaved:(val){
email=val;
},
),
TextFormField(decoration: InputDecoration(icon: Icon(Icons.lock),labelText: 'Password'),
obscureText: true,
// ignore: missing_return
validator:(val){
if(val.isEmpty)
return 'Please Enter Your Password';
},
onSaved:(val){
password=val;
},
),
RaisedButton(color: Colors.lightBlue,textColor: Colors.white,child: Text('Login'),
onPressed:login),
],)
,),)
),
);
}
}
> Example from Ui
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/KXkVJ.jpg
