Flutter - Scrollable Container

Question

I have an app that has a listview of images(places) then when tapped, returns a new page displaying certain details about the place. My concern is about the details page, my layout is I have an image on top, some text below it and an expanded list view. What I want is that I can scroll thru whole page. What I came up with is that only the expanded list view is scrollable.

Here is the code for the details page:

 import 'package:flutter/material.dart';
    import 'package:craglist/cragspot.dart';

 class CragDetailsScreen extends StatelessWidget {
  final CragLocation loc;

  final _placeTitleStyle = const TextStyle(
      fontSize: 40.0, fontWeight: FontWeight.bold, color: Colors.black);

  CragDetailsScreen(this.loc);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Details"),
      ),
      body: new Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          new Container(
            height: 300.0,
            decoration: new BoxDecoration(
              image: new DecorationImage(
                fit: BoxFit.cover,
                image: new AssetImage(loc.placeImage),
              ),
            ),
          ),
          new Padding(
            padding: const EdgeInsets.all(8.0),
            child: new Text(
              loc.name,
              style: _placeTitleStyle,
            ),
          ),
          new Padding(
            padding: const EdgeInsets.only(left: 8.0),
            child: new Text(
              loc.desc,
            ),
          ),
          new Padding(
            padding: const EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 0.0),
            child: new Divider(
              height: 15.0,
            ),
          ),
          new Padding(
            padding: const EdgeInsets.only(left: 8.0, right: 8.0),
            child: new Text(
              "Crags",
              style: _placeTitleStyle,
            ),
          ),
          new Expanded(child: _buildCragList()),
        ],
      ),
    );
  }

  Widget _buildCragList() {
    return new ListView.builder(
        itemCount: loc.crag.length,
        itemBuilder: (context, i) {
          return _buildRow(loc.crag[i]);
        });
  }

  Widget _buildRow(Crag crag) {
    List<Widget> widcrag = [];

    crag.routes.forEach((f) {
      widcrag.add(
        new ListTile(
          dense: true,
          title: new Text(f.name),
          trailing: new Text(f.grade),
        ),
      );
    });

    return new ExpansionTile(
      title: new Text(crag.name),
      children: widcrag,
    );
  }
}

Also additional - Is it possible that when I scroll the image resizes? To give the expanded list view more space on the screen.

Answer 1

You could wrap everything in a ListView.builder then add a if-statement to determine wether it is working on the first widget. If it is at the first widget, it adds all your content that should be at the top. If not it adds the normal List Items where index is +1. Something like this:

new ListView.builder(
    itemCount: loc.crag.length,
    itemBuilder: (context, index) {
        int i = index;
        if (i == 0) {
            return new Column(children: <Widget>[
            new Container(
                height: 300.0,
                decoration: new BoxDecoration(
                image: new DecorationImage(
                    fit: BoxFit.cover,
                    image: new AssetImage(loc.placeImage),
                ),
                ),
            ),
            new Padding(
                padding: const EdgeInsets.all(8.0),
                child: new Text(
                loc.name,
                style: _placeTitleStyle,
                ),
            ),
            new Padding(
                padding: const EdgeInsets.only(left: 8.0),
                child: new Text(
                loc.desc,
                ),
            ),
            new Padding(
                padding: const EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 0.0),
                child: new Divider(
                height: 15.0,
                ),
            ),
            new Padding(
                padding: const EdgeInsets.only(left: 8.0, right: 8.0),
                child: new Text(
                "Crags",
                style: _placeTitleStyle,
                ),
            ),
            ],);
        } else {
            _buildRow(loc.crag[i+1]);
        }
    }
)