Search code examples
flutterflutter-layoutflutter-futurebuilder

How to select image from gridview without rebuild the future builder in flutter


I am trying to select images and give them a background when an image is selected. My problem is when I select an image, the future builder reload the images from database again so my selected image cannot be seen. I want to hold the datas from database without reloading it.Also when i use slider to zoom in or out to gallery the future builder reloading the data so it is now giving a smooth experience. I hope my question is understandable?

return Scaffold(
  appBar: AppBar(
    title: Text(
      "Image",
    ),
    elevation: 0,
    actions: <Widget>[
      IconButton(
        icon: Icon(
          Icons.add,
          color: Colors.white,
        ),
        onPressed: () => scan(context, selectLocation.id),
      )
    ],
    backgroundColor: Colors.transparent,
  ),
  body: FutureBuilder(
    future: Provider.of<Images>(context, listen: false).fetchAndSetPlaces(),
    builder: (ctx, snapshot) => snapshot.connectionState ==
    ConnectionState.waiting
    ? Center(
      child: CircularProgressIndicator(),
    )
    : Column(
      children: [
        Expanded(
          flex: 2,
          child: Container(
            padding: EdgeInsets.only(
              top: 30, bottom: 1, left: 40, right: 40),
            child: Consumer<Images>(
              builder: (ctx, titles, ch) => GridView.builder(
                physics: ScrollPhysics(),
                itemCount: titles.items.length,
                gridDelegate:
                SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: getSize(_currentSliderValue),
                  mainAxisSpacing: 50,
                  childAspectRatio: 0.8,
                  crossAxisSpacing: 5,
                ),
                itemBuilder: (ctx, index) {
                  return GestureDetector(
                    onTap: () => add(titles.items[index].image),
                    child: Container(
                      color: selectedCard == index
                      ? Colors.blue
                      : Colors.green,
                      child: Image.file(titles.items[index].image),
                    ),
                  );
                },
              ),
            ),
          ),
        ),
        Expanded(
          child: Container(
            padding: EdgeInsets.only(left: 30, right: 30),
            child: Theme(
              data: Theme.of(context).copyWith(
                accentTextTheme: TextTheme(
                  bodyText2: TextStyle(color: Colors.white)),
              ),
              child: Slider(
                inactiveColor: Colors.purple,
                activeColor: Colors.purple,
                value: _currentSliderValue,
                min: 0,
                max: 2,
                divisions: 2,
                label: _currentSliderValue.round().toString(),
                onChanged: (double value) {
                  setState(() {
                    _currentSliderValue = value;
                  });
                },
              ),
            ),
          ),
        ),
      ],
    ),
  ),
);

Solution

  • Try to call your function in init state or in DidChangeDependencies override function of State class instead of using Future Builder So it will not reload the image from database because it will just call for one time. Hope so you will get my point otherwise you can comment below