cvsrt
cvsrt

Reputation: 387

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;
                  });
                },
              ),
            ),
          ),
        ),
      ],
    ),
  ),
);

Upvotes: 0

Views: 580

Answers (1)

Musab
Musab

Reputation: 261

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

Upvotes: 1

Related Questions