page_curl_effect 1.0.2 copy "page_curl_effect: ^1.0.2" to clipboard
page_curl_effect: ^1.0.2 copied to clipboard

This is provide 2D page curl animation from the idea of 3D page curl

Page Curl Effect #

Package simulate 3D page curl effect by 2D effect.

page_curl_gift

Usage #

Case 1: Binding list of widget #


class PageCurlEffectExample extends StatefulWidget {
  @override
  State<PageCurlEffectExample> createState() => _PageCurlEffectExampleState();
}

class _PageCurlEffectExampleState extends State<PageCurlEffectExample> {
    
  late PageCurlController _pageCurlController;
  late Size _pageSize;
  late final _listPage;

  @override
  void initState() {
    super.initState();
  }

  @override
  void didChangeDependencies() {
    _pageSize = Size(
      MediaQuery.of(context).size.width,
      600,
    );

    _listPage = buildPages(_pageSize);

    _pageCurlController = PageCurlController(
        Size(_pageSize.width, _pageSize.height),
        pageCurlIndex: 1,
        numberOfPage: _listPage.length);

    super.didChangeDependencies();
  }

  List<Widget> buildPages(Size paperSize) {
    return [
      Container(
        alignment: Alignment.center,
        color: const Color(0xffF5DEB3),
        width: paperSize.width,
        height: paperSize.height,
        child: const Text("Page 1"),
      ),
      Container(
        alignment: Alignment.center,
        color: Colors.white,
        width: paperSize.width,
        height: paperSize.height,
        child: const Text("Page 2"),
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: PageCurlEffect(
        pageCurlController: _pageCurlController,
        pages: _listPage,
        onForwardComplete: () { },
        onBackwardComplete: () { },
      ),
    );
  }
}

Case 2: Using page builder to create list of page #


class PageCurlEffectExample extends StatefulWidget {
  @override
  State<PageCurlEffectExample> createState() => _PageCurlEffectExampleState();
}

class _PageCurlEffectExampleState extends State<PageCurlEffectExample> {
  late PageCurlController _pageCurlController;
  late Size _pageSize;

  @override
  void initState() {
    super.initState();
  }

  @override
  void didChangeDependencies() {
    _pageSize = Size(
      MediaQuery.of(context).size.width,
      600,
    );
    
    _pageCurlController = PageCurlController(
        Size(_pageSize.width, _pageSize.height),
        pageCurlIndex: 1,
        /// A number of pages
        numberOfPage: 5);

    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: PageCurlEffect(
        pageCurlController: _pageCurlController,
        pageBuilder: (context, index) {
          return  Container(
            alignment: Alignment.center,
            color: const Color(0xffF5DEB3),
            width: _pageSize.width,
            height: _pageSize.height,
            child: Text("Page $index"),
          );
        },
        onForwardComplete: () { },
        onBackwardComplete: () { },
      ),
    );
  }
}
18
likes
150
points
313
downloads

Documentation

API reference

Publisher

unverified uploader

Weekly Downloads

This is provide 2D page curl animation from the idea of 3D page curl

Homepage
Repository (GitHub)
View/report issues

License

MIT (license)

Dependencies

equatable, flutter, provider

More

Packages that depend on page_curl_effect