Changing ListView bounce color when using iOS behavior in Flutter

Question

When creating a ListView (example from docs), how do we change the bounce color that appears at the top of the list when scrolling using an iOS emulator with Flutter?

ListView(
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.map),
      title: Text('Map'),
    ),
    ListTile(
      leading: Icon(Icons.photo_album),
      title: Text('Album'),
    ),
    ListTile(
      leading: Icon(Icons.phone),
      title: Text('Phone'),
    ),
  ],
);

Following this question, in iOS development without Flutter, you would do something like this to position a view offscreen to change the bounce color:

override func viewDidLoad() {
    super.viewDidLoad()
    let topView = UIView(frame: CGRect(x: 0, y: -collectionView!.bounds.height,
        width: collectionView!.bounds.width, height: collectionView!.bounds.height))
    topView.backgroundColor = .blackColor()
    collectionView!.addSubview(topView)
}

Is there an equivalent for Flutter?

Answer 1

In Flutter the bouncing color, is simply the color of the Widget you can see behind the ListView. The default background of the ListView is transparent. Therefore you can simply wrap it in a Container with another color.

The following example has a green bouncing color:

And the complete source code, for trying out:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(),
      home: Scaffold(
        body: SafeArea(
          child: Container(
            color: Colors.green,
            child: ListView(
              children: generateChildren()
            ),
          ),
        ),
      ),
    );
  }

  List<Widget> generateChildren() {
    List<Widget> result = [];

    for (int i = 0; i < 20; i++) {
      result.add(Container(
        color: Colors.white,
        child: ListTile(
          leading: Icon(Icons.map),
          title: Text('Map'),
        ),
      ));
    }

    return result;
  }
}