Flutter - How to shrink the width of listview items

Question

Though I have some experience with Android development, I am very new to flutter. I am trying create a page in flutter where I need to cover the entire page with Google maps and on top of that in one side I need to display list of images.

I am able to achieve this with the stack object but unfortunately, the list of images covers the entire width and all touches are gone to list instead of map.

Here is my code

@override
  Widget build(BuildContext context) {
    return SafeArea(
      child: new Scaffold(
          appBar: new AppBar(
            title: new Text("Tracker"),
            backgroundColor: Colors.blueAccent,
          ),
          drawer: Drawer(child: DrawerLayout()),
          body: _buildBody()),
    );
  }

  Widget _buildBody() {
    return Stack(children: <Widget>[
      _buildMap(),
      _buildImages(),
    ]);
  }

may maps widget is this

Widget _buildMap() {
    return GoogleMap(
      onMapCreated: _onMapCreated,
      markers: _markers,
      myLocationEnabled: true,
      compassEnabled: true,
      initialCameraPosition: CameraPosition(
        target: _center,
        zoom: 15.0,
      ),
    );
  }

this is my widget to load images on the right side of the screen (unfortunately this does not shrink the width) instead it covers the entire width

Widget _buildImages() {
    return ListView.builder(
        itemCount: _images.length + 1,
        itemBuilder: (_, int index) {
            profile = _images[index]
            return new Container(
              child: Align(
                alignment: Alignment.topRight,
                child: FloatingActionButton(
                  mini: true,
                  materialTapTargetSize: MaterialTapTargetSize.padded,
                  child: _loadProfileImage(profile),
                ),
              ),
            );
        });
  }

I have no issues in displaying the images on top of map but the issue is it takes entire width.

I want to do couple of things:

1. display the images on top of map but wrap the width to fixed size
2. display map and images side by side but make the map take the as much space as possible.

Added background color to my listview items to show that it actually takes the entire width, is there a way I can wrap that width?

Answer 1

You can wrap your ListView with a SizedBox and set its width :

SizedBox(
  width: MediaQuery.of(context).size.width * .3, // 30% of the screen
    child: ListView(
      children: [
        Placeholder(),
        Placeholder(),
        Placeholder(),
      ]
    )
),

You can set the alignment parameter of the Stack to align the list :

Stack(
    alignment: Alignment.topRight,