skip to Main Content

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


  1. You can use the carousel slider package.

    Login or Signup to reply.
  2. This is the page_flip library example. check this.
    https://github.com/shivbo96/page_flip

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search