flutter 中的异步液体刷卡？

Question

我需要从 firestore 加载图像（一次只有 5 个）并将它们存储在一个容器中，以便我可以将 Liquid Swipe 应用于这些容器。 有谁知道如何处理异步液体刷卡？

Answer 1

您可以在下面复制粘贴运行完整代码
您可以在pageChangeCallback中执行pages.remove和pages.insert您的新Container
在工作演示中，您可以看到第一页的图像已更改
代码片段

pageChangeCallback(int lpage) {
    print(lpage);
    setState(() {
      page = lpage;
    });
    if (lpage == 4) {
      pages.removeAt(0);
      pages.insert(
        0,
        Container(
          color: Colors.pink,

工作演示

完整代码

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:liquid_swipe/liquid_swipe.dart';

void main() {
  runApp(
    MyApp(),
  );
}

class MyApp extends StatefulWidget {
  static final style = TextStyle(
    fontSize: 30,
    fontFamily: "Billy",
    fontWeight: FontWeight.w600,
  );

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int page = 0;

  UpdateType updateType;

  List<Container> pages = [
    Container(
      color: Colors.pink,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Image.network(
            'https://picsum.photos/500?image=14',
            fit: BoxFit.cover,
          ),
          Padding(
            padding: EdgeInsets.all(20.0),
          ),
          Column(
            children: <Widget>[
              Text(
                "Hi",
                style: MyApp.style,
              ),
              Text(
                "It's Me",
                style: MyApp.style,
              ),
              Text(
                "Sahdeep",
                style: MyApp.style,
              ),
            ],
          ),
        ],
      ),
    ),
    Container(
      color: Colors.deepPurpleAccent,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Image.network(
            'https://picsum.photos/500?image=13',
            fit: BoxFit.cover,
          ),
          Padding(
            padding: EdgeInsets.all(20.0),
          ),
          Column(
            children: <Widget>[
              Text(
                "Take a",
                style: MyApp.style,
              ),
              Text(
                "look at",
                style: MyApp.style,
              ),
              Text(
                "Liquid Swipe",
                style: MyApp.style,
              ),
            ],
          ),
        ],
      ),
    ),
    Container(
      color: Colors.greenAccent,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Image.network(
            'https://picsum.photos/500?image=11',
            fit: BoxFit.cover,
          ),
          Padding(
            padding: EdgeInsets.all(20.0),
          ),
          Column(
            children: <Widget>[
              Text(
                "Liked?",
                style: MyApp.style,
              ),
              Text(
                "Fork!",
                style: MyApp.style,
              ),
              Text(
                "Give Star!",
                style: MyApp.style,
              ),
            ],
          ),
        ],
      ),
    ),
    Container(
      color: Colors.yellowAccent,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Image.network(
            'https://picsum.photos/500?image=9',
            fit: BoxFit.cover,
          ),
          Padding(
            padding: EdgeInsets.all(20.0),
          ),
          Column(
            children: <Widget>[
              Text(
                "Can be",
                style: MyApp.style,
              ),
              Text(
                "Used for",
                style: MyApp.style,
              ),
              Text(
                "Onboarding Design",
                style: MyApp.style,
              ),
            ],
          ),
        ],
      ),
    ),
    Container(
      color: Colors.redAccent,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Image.network(
            'https://picsum.photos/500?image=10',
            fit: BoxFit.cover,
          ),
          Padding(
            padding: EdgeInsets.all(20.0),
          ),
          Column(
            children: <Widget>[
              Text(
                "Do",
                style: MyApp.style,
              ),
              Text(
                "Try it",
                style: MyApp.style,
              ),
              Text(
                "Thank You",
                style: MyApp.style,
              ),
            ],
          ),
        ],
      ),
    ),
  ];

  Widget _buildDot(int index) {
    double selectedness = Curves.easeOut.transform(
      max(
        0.0,
        1.0 - ((page ?? 0) - index).abs(),
      ),
    );
    double zoom = 1.0 + (2.0 - 1.0) * selectedness;
    return  Container(
      width: 25.0,
      child:  Center(
        child:  Material(
          color: Colors.white,
          type: MaterialType.circle,
          child:  Container(
            width: 8.0 * zoom,
            height: 8.0 * zoom,
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: <Widget>[
            LiquidSwipe(
              //key: UniqueKey(),
              pages: pages,
              fullTransitionValue: 200,
              enableSlideIcon: true,
              enableLoop: true,
              positionSlideIcon: 0.5,
              onPageChangeCallback: pageChangeCallback,
              currentUpdateTypeCallback: updateTypeCallback,
              waveType: WaveType.liquidReveal,
            ),
            Padding(
              padding: EdgeInsets.all(20),
              child: Column(
                children: <Widget>[
                  Expanded(child: SizedBox()),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: List<Widget>.generate(5, _buildDot),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  pageChangeCallback(int lpage) {
    print(lpage);
    setState(() {
      page = lpage;
    });
    if (lpage == 4) {
      pages.removeAt(0);
      pages.insert(
        0,
        Container(
          color: Colors.pink,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Image.network(
                'https://picsum.photos/500?image=20',
                fit: BoxFit.cover,
              ),
              Padding(
                padding: EdgeInsets.all(20.0),
              ),
              Column(
                children: <Widget>[
                  Text(
                    "Hi",
                    style: MyApp.style,
                  ),
                  Text(
                    "It's Me",
                    style: MyApp.style,
                  ),
                  Text(
                    "Sahdeep",
                    style: MyApp.style,
                  ),
                ],
              ),
            ],
          ),
        ),
      );
      setState(() {});
    }
  }

  updateTypeCallback(UpdateType updateType) {
    print(updateType);
  }
}