Как использовать эффект параллакса с CachedNetworkImage во Flutter?

Question

Я хочу использовать parallax_image в просмотре списка. В то же время я хочу использовать эффект параллакса для cached_network_image .

Answer 1

parallax_image принимает изображения и Cached_Network_Image имеют CachedNetworkImageProvider может использовать этот случай

фрагмент кода

ParallaxImage(
        extent: 150.0,
        image: CachedNetworkImageProvider(imageList[index]),
      ),

полный код

import 'package:flutter/material.dart';
import 'package:parallax_image/parallax_image.dart';
import 'package:cached_network_image/cached_network_image.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Parallax Image Demo',
      theme: ThemeData(primarySwatch: Colors.blueGrey),
      home: MyHomePage(title: 'Parallax Image Demo'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  List<String> imageList = [
    'https://images.unsplash.com/photo-1520342868574-5fa3804e551c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ff92caffcdd63681a35134a6770ed3b&auto=format&fit=crop&w=1951&q=80',
    'https://images.unsplash.com/photo-1522205408450-add114ad53fe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=368f45b0888aeb0b7b08e3a1084d3ede&auto=format&fit=crop&w=1950&q=80',
    'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80'
  ];

  @override
  Widget build(BuildContext context) {
    print('${imageList[0]}');
    final theme = Theme.of(context);
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Column(
        children: <Widget>[
          Container(
            padding: const EdgeInsets.all(20.0),
            child: Text(
              'Horizontal scroll parallax',
              style: theme.textTheme.title,
            ),
          ),
          Container(
            padding: const EdgeInsets.symmetric(vertical: 10.0),
            constraints: const BoxConstraints(maxHeight: 200.0),
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: imageList.length,
              itemBuilder: _buildHorizontalChild,
            ),
          ),
          Container(
            padding: const EdgeInsets.all(20.0),
            child: Text(
              'Vertical scroll parallax',
              style: theme.textTheme.title,
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: imageList.length,
              itemBuilder: _buildVerticalChild,
            ),
          )
        ],
      ),
    );
  }

  Widget _buildVerticalChild(BuildContext context, int index) {
    /*index++;
    if (index > 7) return null;*/
    return Padding(
      padding: const EdgeInsets.only(bottom: 10.0),
      child: GestureDetector(
        onTap: () {
          print('Tapped $index');
        },
        child: ParallaxImage(
          extent: 150.0,
          image: CachedNetworkImageProvider(imageList[index]),
        ),
      ),
    );
  }

  Widget _buildHorizontalChild(BuildContext context, int index) {
    /*index++;
    if (index > 7) return null;*/
    return Padding(
      padding: const EdgeInsets.only(right: 10.0),
      child: ParallaxImage(
        extent: 150.0,
        image: CachedNetworkImageProvider(imageList[index]),
      ),
    );
  }
}