Automatically changing pages using the PageView widget

Why PageView?

Coding our app!

Here is how my files look like
import 'package:flutter/material.dart';

class Page1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0,
),
body: Center(
child: Text(
'Page 1',
style: TextStyle(
color: Colors.black,
fontSize: 20
),
),
),
);
}
}
import 'package:medium_article1/pages/Page1.dart';
import 'package:medium_article1/pages/Page2.dart';
import 'package:medium_article1/pages/Page3.dart';
import 'package:flutter/material.dart';


class PageViewScreen extends StatefulWidget {
@override
_PageViewScreenState createState() => _PageViewScreenState();
}

class _PageViewScreenState extends State<PageViewScreen> {

PageController pageController = PageController();
int currentIndex = 0;
var currentTabs = [
Page1(),
Page2(),
Page3()
];

@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView(
children: currentTabs,
controller: pageController,
onPageChanged: (int index) {
setState(() {
currentIndex = index;
});
},
),
);
}
}
import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.white,
),
body: Center(
child: Text(
'Sign In Screen',
style: TextStyle(
color: Colors.black,
fontSize: 25
),
),
),
);
}
}
import 'dart:async';
@override
void initState() {
super.initState();
Timer.periodic(Duration(seconds: 3), (Timer timer) {
if (currentIndex < 2) {
currentIndex++;
pageController.animateToPage(
currentIndex,
duration: Duration(milliseconds: 350),
curve: Curves.easeIn,
);
} else {
currentIndex = 2;
}
});
}
@override
void dispose() {
pageController.dispose();
super.dispose();
}
import 'dart:async';
import 'package:medium_article1/pages/Page1.dart';
import 'package:medium_article1/pages/Page2.dart';
import 'package:medium_article1/pages/Page3.dart';
import 'package:flutter/material.dart';


class PageViewScreen extends StatefulWidget {
@override
_PageViewScreenState createState() => _PageViewScreenState();
}

class _PageViewScreenState extends State<PageViewScreen> {

PageController pageController = PageController();
int currentIndex = 0;
var currentTabs = [
Page1(),
Page2(),
Page3()
];

@override
void initState() {
super.initState();
Timer.periodic(Duration(seconds: 3), (Timer timer) {
if (currentIndex < 2) {
currentIndex++;
pageController.animateToPage(
currentIndex,
duration: Duration(milliseconds: 350),
curve: Curves.easeIn,
);
} else {
currentIndex = 2;
}
});
}

@override
void dispose() {
pageController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView(
children: currentTabs,
controller: pageController,
onPageChanged: (int index) {
setState(() {
currentIndex = index;
});
},
),
);
}
}
import 'package:flutter/material.dart';
import 'package:medium_article1/screens/SignIn.dart';

class Page3 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Center(
child: Text(
'Page 3',
style: TextStyle(
color: Colors.black,
fontSize: 20
),
),
),
MaterialButton(
onPressed: () {
Navigator.pushReplacement(
context, MaterialPageRoute(builder: (c) => SignIn()));
},
child: Text(
'SignIn Page'
),
)
],
),
);
}
}

Final Output

Output on my physical device

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store