Add image to list Flutter

Question

I would like to do something like this. First there is a button in the listView. When the button is clicked, it will allow user to select image from gallery.

After select, the selected image will be placed to ListView, and the button will moved to another item like image below.

This is my output.

Before

After

My code

 Container(
                  child: StreamBuilder<List<Asset>>(
                      stream: _bloc.uploadImageStream,
                      builder: (context, snapshot) {
                        if (snapshot.hasData) {
                          return Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: <Widget>[
                              images == null
                                  ? new Container(
                                      height: 300.0,
                                      width: 300.0,
                                      child: new Icon(
                                        Icons.image,
                                        size: 250.0,
                                        color: Theme.of(context).primaryColor,
                                      ),
                                    )
                                  : new SizedBox(
                                      height: 200.0,
                                      width: double.infinity,
                                      child: new ListView.builder(
                                        scrollDirection: Axis.horizontal,
                                        itemCount: snapshot.data.length,
                                        itemBuilder: (BuildContext context,
                                                int index) =>
                                            new Padding(
                                                padding:
                                                    const EdgeInsets.all(5.0),
                                                child: AssetThumb(
                                                  height: 200,
                                                  width: 200,
                                                  asset: snapshot.data[index],
                                                )),
                                      ),
                                    ),
                              IconButton(
                                  icon: Center(
                                    child: Icon(
                                      Icons.camera,
                                      size: 30.0,
                                    ),
                                  ),
                                  onPressed: () {
                                    _bloc.getImage();
                                  })
                            ],
                          );
                        } else {
                          return IconButton(
                              icon: Center(
                                child: Icon(
                                  Icons.camera,
                                  size: 30.0,
                                ),
                              ),
                              onPressed: () {
                                _bloc.getImage();
                              });
                        }
                      }))

Answer 1

I followed some instructions from the package you used from its docs.

And I reached to solution with edit some of the docs code.

Before my edit

Widget buildGridView() {
    return GridView.count(
      crossAxisCount: 3,
      children: List.generate(images.length, (index) {
        Asset asset = images[index];
        return AssetThumb(
          asset: asset,
          width: 300,
          height: 300,
        );
      }),
    );
  }

After my edits

Widget buildGridView() {
    return GridView.count(
      crossAxisCount: 3,
      children: List.generate(images.length + 1, (index) {
        if (index < images.length) {
          Asset asset = images[index];
          return AssetThumb(
            asset: asset,
            width: 300,
            height: 300,
          );
        } else {
          return GestureDetector(
            child: Image.asset(
              "assets/images/add.jpg",
              width: 300,
              height: 300,
            ),
            onTap: loadAssets,
          );
        }
      }),
    );
  }

so based on your codes, it will be

 new SizedBox(
      height: 200.0,
      width: double.infinity,
      child: new ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: snapshot.data.length + 1,
        itemBuilder: (BuildContext context, int index) => new Padding(
            padding: const EdgeInsets.all(5.0),
            child: (index < snapshot.data.length) ? AssetThumb(
              height: 200,
              width: 200,
              asset: snapshot.data[index],
            ) : GestureDetector(
            child: Image.asset(
              "assets/images/add.jpg",
              width: 200,
              height: 200,
            ),
            onTap: loadAssets,
          )),
      ),

I hope it works well with you.