Flutter Onboarding - How to Swipe Two Images at The Same Time? - flutter

Question

I want to swipe right background images with an end image located at the end of the bottom of the screen with floating action button and want to swipe right a list of images with background images like other onboarding screens works. Here I needed 3 screens, the Last screen will be a login page. I used the Transformer Page View package for this. Currently, I used an image in the floating action button, but it's not working. How I can do this?
import 'package:flutter/material.dart';
import 'package:onlycentertainment/pages/splashscreen.dart';
import 'package:transformer_page_view/transformer_page_view.dart';
class TestPage1 extends StatefulWidget {
final String title;
TestPage1({this.title});
#override
TestPage1State createState() {
return new TestPage1State();
}
}
class TestPage1State extends State<TestPage1> {
int _slideIndex = 0;
int _bottomIndex = 0;
final List<String> images = [
"assets/images/welcome01.jpg",
"assets/images/welcome02.jpg",
"assets/images/welcome01.jpg",
];
final List<String> text0 = [
"Welcome in your app",
"Enjoy teaching...",
"Showcase your skills",
"Friendship is great"
];
final List<String> text1 = [
"App for food lovers, satisfy your taste",
"Find best meals in your area, simply",
"Have fun while eating your relatives and more",
"Meet new friends from all over the world"
];
final IndexController controller = IndexController();
#override
Widget build(BuildContext context) {
TransformerPageView transformerPageView = TransformerPageView(
pageSnapping: true,
onPageChanged: (index) {
setState(() {
this._slideIndex = index;
this._bottomIndex = index;
});
},
loop: false,
controller: controller,
transformer: new PageTransformerBuilder(
builder: (Widget child, TransformInfo info) {
return SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
child: new Material(
child: new Container(
alignment: Alignment.center,
color: Colors.white,
child: Column(
children: <Widget>[
new ParallaxContainer(
child: new Image.asset(
images[info.index],
fit: BoxFit.cover,
),
position: info.position,
translationFactor: 400.0,
),
SizedBox(
height: 45.0,
),
new ParallaxContainer(
child: new Text(
text1[info.index],
textAlign: TextAlign.center,
style: new TextStyle(
color: Colors.white,
fontSize: 28.0,
fontFamily: 'Quicksand',
fontWeight: FontWeight.bold),
),
position: info.position,
translationFactor: 300.0,
),
],
),
),
),
);
}),
itemCount: 3);
return Scaffold(
backgroundColor: Color(0xff243951),
body: transformerPageView,
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: Container(
height: 70,
width: MediaQuery.of(context).size.width,
child: IconButton(icon: Image.asset('assets/images/asset1.png'), onPressed: (){
Navigator.of(context).push(MaterialPageRoute(builder: (context)=>SplashScreen()));
}),
),
);
}
}

Answer 1

I am not sure I understand correctly but, the problem of your code is "SplashScreen()" part, it can't be empty, I made a working sample, check out and let me know if I misunderstand the thing you wanted to do.
import 'package:flutter/material.dart';
import 'package:splashscreen/splashscreen.dart';
import 'package:transformer_page_view/transformer_page_view.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new TestPage1(title: 'Flutter Demo Home Page'),
);
}
}
class TestPage1 extends StatefulWidget {
final String title;
TestPage1({this.title});
#override
TestPage1State createState() {
return new TestPage1State();
}
}
class TestPage1State extends State<TestPage1> {
int _slideIndex = 0;
int _bottomIndex = 0;
final List<String> images = [
"assets/images/welcome01.jpg",
"assets/images/welcome02.jpg",
"assets/images/welcome01.jpg",
];
final List<String> text0 = [
"Welcome in your app",
"Enjoy teaching...",
"Showcase your skills",
"Friendship is great"
];
final List<String> text1 = [
"App for food lovers, satisfy your taste",
"Find best meals in your area, simply",
"Have fun while eating your relatives and more",
"Meet new friends from all over the world"
];
final IndexController controller = IndexController();
#override
Widget build(BuildContext context) {
TransformerPageView transformerPageView = TransformerPageView(
pageSnapping: true,
onPageChanged: (index) {
setState(() {
this._slideIndex = index;
this._bottomIndex = index;
});
},
loop: false,
controller: controller,
transformer: new PageTransformerBuilder(
builder: (Widget child, TransformInfo info) {
return SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
child: new Material(
child: new Container(
alignment: Alignment.center,
color: Colors.white,
child: Column(
children: <Widget>[
new ParallaxContainer(
child: new Image.asset(
images[info.index],
fit: BoxFit.cover,
),
position: info.position,
translationFactor: 400.0,
),
SizedBox(
height: 45.0,
),
new ParallaxContainer(
child: new Text(
text1[info.index],
textAlign: TextAlign.center,
style: new TextStyle(
color: Colors.white,
fontSize: 28.0,
fontFamily: 'Quicksand',
fontWeight: FontWeight.bold),
),
position: info.position,
translationFactor: 300.0,
),
],
),
),
),
);
}),
itemCount: 3);
return Scaffold(
backgroundColor: Color(0xff243951),
body: transformerPageView,
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: Container(
height: 70,
width: MediaQuery.of(context).size.width,
child: IconButton(icon: Image.asset(images[_bottomIndex]), onPressed: (){
Navigator.of(context).push(MaterialPageRoute(builder: (context)=>SplashScreen(
seconds: 4,
navigateAfterSeconds: new AfterSplash(),
title: new Text('Welcome In SplashScreen',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0
),
)
)
)
);
}
),
),
);
}
}
class AfterSplash extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Welcome In SplashScreen Package"),
automaticallyImplyLeading: false,
),
body: new Center(
child: new Text("Succeeded!",
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 30.0
),
),
),
);
}
}