Flutter, using FutureBuilder within SliverFillRemaining

Question

I am building a FutureBuilder with a Listview within a SliverFillRemaining. And I think since Sliver is already within a CustomScrollView the scroll function doesn't work properly. Once it scrolls down it doesn't scroll back up.

Below is the code.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            expandedHeight: 200.0,
            floating: false,
            //pinned: false,
            flexibleSpace: FlexibleSpaceBar(
              background: Image.network("https://i.imgur.com/p3CfZBS.png",
                  fit: BoxFit.cover),
            ),
          ),
          SliverFillRemaining(
            child: Container(
              child: FutureBuilder(
                future: _getData(),
                builder: (context, snapshot) {
                  if (snapshot.data == null) {
                    return Center(child: CircularProgressIndicator());
                  } else {
                    return ListView.builder(
                      itemCount: snapshot.data.length,
                      itemBuilder: (context, index) {
                        return ListView(
                          shrinkWrap: true,
                          children: [
                            buildlink(
                                imageName: snapshot.data[index].image,
                                page: snapshot.data[index].title)
                          ],
                        );
                      },
                    );
                  }
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

most likely the 2nd listView is superfluous and probably you want to use physics: NeverScrollableScrollPhysics() with list view, if you use CustomScrollView. Check NestedScrollView may be it would work better in this situation.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: SafeArea(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            expandedHeight: 200.0,
            floating: false,
            pinned: false,
            flexibleSpace: FlexibleSpaceBar(
              background: Image.network("https://i.imgur.com/p3CfZBS.png",
                  fit: BoxFit.cover),
            ),
          ),
          SliverFillRemaining(
            child: Container(
              child: FutureBuilder(
                future: _getData(),
                builder: (context, snapshot) {
                  if (snapshot.data == null) {
                    return Center(child: CircularProgressIndicator());
                  } else {
                    return ListView.builder(
                      physics: NeverScrollableScrollPhysics(),
                      itemCount: snapshot.data.length,
                      itemBuilder: (context, index) {
                        return buildlink(
                          imageName: snapshot.data[index].image,
                          page: snapshot.data[index].title,
                        );
                      },
                    );
                  }
                },
              ),
            ),
          ),
        ],
      ),
    );
  }

  Future<List<LinkData>> _getData() async {
    await Future.delayed(Duration(seconds: 1));
    return [
      LinkData(image: "https://i.imgur.com/p3CfZBS.png", title: 'First'),
      LinkData(image: "https://i.imgur.com/p3CfZBS.png", title: 'Second'),
      LinkData(image: "https://i.imgur.com/p3CfZBS.png", title: 'Third'),
    ];
  }

  Widget buildlink({String imageName, String page}) {
    return Card(
      child: Container(
        child: Text(page),
        height: 400,
      ),
    );
  }
}

class LinkData {
  const LinkData({
    this.image,
    this.title,
  });

  final String image;
  final String title;
}