I want to switch between multiple images by arranging two images side by side and flipping the pages like a book.
I have an image like below. I can’t use it because it’s not Flutter.
https://github.com/Nodlik/StPageFlip
I tried using page_flip: ^0.1.0 but it didn’t work.
import 'package:flutter/material.dart';
import 'package:aaa/page.dart';
import 'package:page_flip/page_flip.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({
Key? key,
}) : super(key: key);
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final _controller = GlobalKey<PageFlipWidgetState>();
final _controller2 = GlobalKey<PageFlipWidgetState>();
@override
Widget build(BuildContext context) {
return Row(
children: [
Container(
height: 200,
width: 100,
child: PageFlipWidget(
key: _controller2,
backgroundColor: Colors.red,
lastPage: Container(
height: 10,
color: Colors.red,
child: const Center(child: Text('Last Page!'))),
children: <Widget>[
for (var i = 0; i < 10; i++) DemoPage(page: i),
],
),
),
Container(
height: 200,
width: 100,
child: PageFlipWidget(
key: _controller,
backgroundColor: Colors.red,
lastPage: Container(
height: 10,
color: Colors.red,
child: const Center(child: Text('Last Page!'))),
children: <Widget>[
for (var i = 1; i < 10; i++) DemoPage(page: i),
],
),
),
],
);
}
}
2
Answers
You can use the carousel slider package.
This is the page_flip library example. check this.
https://github.com/shivbo96/page_flip