CODEWITHSUNDEEP
flutterflutter-layoutflutter-widget
cvsrt
cvsrt

Reputation: 387

Flutter GridView images zoom in zoom out

I am new to the flutter and i want to try make a responsive gridview to show images.

For example:

This is the initial state:

enter image description here

After changing the bar I want to make the screen look like this:

enter image description here

My main problem is i don't know how to implement this zoom in zoom out bar:

enter image description here

Upvotes: 0

Views: 990

Answers (1)

caiopo
caiopo

Reputation: 499

To make a scrollable grid, you should use GridView.

GridView needs a delegate that tells it how to layout its children. In this case, you probably want to use the SliverGridDelegateWithFixedCrossAxisCount. Notice it has a crossAxisCount, which represents the number of items in a row.

GridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 4, // <<<< Here
        childAspectRatio: 0.5,
      ),
      children: List<Widget>.generate(20, (int i) {
        return Builder(builder: (BuildContext context) {
          return Text('$i');
        });
      }),
    );

Then you can update the crossAxisCount when the slider changes, and your GridView will update.

Upvotes: 1

Related Questions