Home > Blockchain >  Flutter Network Image inside ListWheelScrollView not working on init
Flutter Network Image inside ListWheelScrollView not working on init

Time:09-17

I am using a ListWheelScrollView inside my app and I want to display some Image.networks inside the children. But this is not possible. On the first start I always get the erro:

Null check operator used on a null value

The StackTrace suggestes that this is the problem (from the ListWheelScrollView):

  @override
  double get minScrollExtent => _minScrollExtent!;
  double? _minScrollExtent;

Any idea what the problem is and how I can fit it? The thing is that after the first start I can hot load and everything is working as expected...

This is the whole project to reproduce the problem:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test',
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatefulWidget {
  @override
  _FirstScreenState createState() => _FirstScreenState();
}

class _FirstScreenState extends State<FirstScreen> {
  @override
  Widget build(BuildContext context) {
    final items = [1, 2, 3, 4, 5, 6, 7, 8];

    return Material(
      child: GestureDetector(
        onTap: () {},
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 50),
          child: ListWheelScrollView.useDelegate(
            itemExtent: 300,
            physics: FixedExtentScrollPhysics(),
            perspective: 0.0015,
            useMagnifier: false,
            onSelectedItemChanged: (index) {
              print(index);
            },
            childDelegate: ListWheelChildBuilderDelegate(
              builder: (context, index) => Container(
                height: 300,
                width: 200,
                color: Colors.red,
                child: Image.network(
                  'https://flif.info/example-images/fish.png',
                  height: 160,
                  width: 160,
                ),
              ),
              childCount: items.length,
            ),
          ),
        ),
      ),
    );
  }
}

CodePudding user response:

For anyone who stumbles on this, here are some temporary workarounds suggested on GitHub:

The issue is due to the widget having no size. (loading a Network images for example). A placeolder with a size should avoid this issue.

FYI, I found a workaround: Use a FutureBuilder. You can wrap your widget into it and it will show without the exception. You might consider using a SynchronousFuture to make it not blink.

CodePudding user response:

as mentioned here, this will fix the issue:

  @override
  double get minScrollExtent => _minScrollExtent;
  double _minScrollExtent = 0.0;

  @override
  double get maxScrollExtent => _maxScrollExtent;
  double _maxScrollExtent = 0.0;
  • Related