transition between pages using indicators in the flutter - flutter

Question

I have 2 pages, on one of them I have placed the code which displays indexers, I want to swipe on indexes to pass between pages. I can't figure out how to set it up. I will be grateful for your help.
Container(
child: SmoothPageIndicator(
controller: _pageController,
count: _pages.length,
effect: JumpingDotEffect(
dotHeight: 16,
dotWidth: 16,
jumpScale: .7,
verticalOffset: 15,
),
onDotClicked: _onchanged
),
),
List of pages:
List<Widget> _pages = [
Form_scan(),
Form_ttn()
];
Image indecators
I will be grateful if someone helps me to go from the first page to the second (swipe right) with these indicators

Answer 1

Try out below code:-
import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:sizer/sizer.dart';
import 'package:livekeeping/Common/Constant.dart';
import 'package:livekeeping/Common/IconNames.dart';
import 'package:livekeeping/Common/Reusable.dart';
import 'package:livekeeping/Controller/Authentication/LoginWithOtpScreen.dart';
import 'package:lottie/lottie.dart';
class Onboarding extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return OnboardingState();
}
}
class OnboardingState extends State<Onboarding> {
int _current = 0;
Widget widgetChange = firstWidget();
var i = 0;
#override
void initState() {
super.initState();
}
#override
void dispose() {
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: double.maxFinite,
width: double.maxFinite,
child: Stack(
children: <Widget>[
PageView.builder(
onPageChanged: (pageIndex) {
setState(() {
_current = pageIndex;
});
},
itemCount: 4,
itemBuilder: (context, index) {
if (index == 0) {
return firstWidget();
} else if (index == 1) {
return secondWidget();
} else if (index == 2) {
return thirdWidget();
} else {
return fourthWidget();
}
},
),
Positioned(
bottom: 120,
left: 0,
right: 0,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [1, 2, 3, 4].map((url) {
int index = [1, 2, 3, 4].indexOf(url);
return Container(
width: 8.0,
height: 8.0,
margin:
EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: _current == index
? Color.fromRGBO(0, 0, 0, 0.9)
: Color.fromRGBO(0, 0, 0, 0.4),
),
);
}).toList(),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 30.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
ButtonTheme(
height: 45,
minWidth: 150,
child: new Center(
child: RaisedButton(
color: AppTextStyle.mainThemeColor(),
onPressed: () {
Navigator.of(context).pushAndRemoveUntil(
CupertinoPageRoute(
builder: (context) => Login()),
(route) => false);
},
child: new Text(
"Get Started".toUpperCase(),
style: GoogleFonts.openSans(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w500,
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50)),
)),
),
],
),
)
],
),
),
);
}
}
class firstWidget extends StatefulWidget {
#override
_firstWidgetState createState() => _firstWidgetState();
}
class _firstWidgetState extends State<firstWidget>{
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Stack(
children: [
Container(
height: double.maxFinite,
width: double.maxFinite,
child: Image.asset(
SplashBG, // You can put your Background image as well
fit: BoxFit.cover,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 45.0.h,
width: 75.0.w,
child: Image.asset(Icon1),
),
],
),
],
),
],
);
}
}
class secondWidget extends StatefulWidget {
#override
_secondWidgetState createState() => _secondWidgetState();
}
class _secondWidgetState extends State<secondWidget>{
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Stack(
children: [
Container(
height: double.maxFinite,
width: double.maxFinite,
child: Image.asset(
SplashBG, // You can put your Background image as well
fit: BoxFit.cover,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 45.0.h,
width: 75.0.w,
child: Image.asset(Icon2),
),
],
),
],
),
],
);
}
}
class thirdWidget extends StatefulWidget {
#override
_thirdWidgetState createState() => _thirdWidgetState();
}
class _thirdWidgetState extends State<thirdWidget> {
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Stack(
children: [
Container(
height: double.maxFinite,
width: double.maxFinite,
child: Image.asset(
SplashBG, // You can put your Background image as well
fit: BoxFit.cover,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 45.0.h,
width: 75.0.w,
child: Image.asset(Icon3),
),
],
),
],
),
],
);
}
}
class fourthWidget extends StatefulWidget {
#override
_fourthWidgetState createState() => _fourthWidgetState();
}
class _fourthWidgetState extends State<fourthWidget> {
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Stack(
children: [
Container(
height: double.maxFinite,
width: double.maxFinite,
child: Image.asset(
SplashBG, // You can put your Background image as well
fit: BoxFit.cover,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 45.0.h,
width: 75.0.w,
child: Image.asset(Iconn4),
),
],
),
],
),
],
);
}
}

Answer 2

use PageView, :
PageView(
controller: _pageController,
children: [
Form_scan(),
Form_ttn()
],
),
make a PageController :
final PageController _pageController = PageController();
onDotClicked: _onchanged
void _onchanged(){
_pageController.animateToPage(
indexHalaman,
duration: Duration(milliseconds: 500),
curve: Curves.fastOutSlowIn
);
}
indexHalaman = page index, if you have 2 widget on pageView children then first page index = 0, next index page = 1, if you use stateful widget, dont forget to use setState, or maybe you can use bloc pattern for this