- Foto gallery package will help you to create reactive image slider.
- For state management the
foto_gallery
package usesGetX
. - You can also control image slider using the keyboard.
Using
To import foto_gallery package.
import 'package:foto_gallery/foto_gallery.dart';
The easiest way to use this package is if you are using listview then it will more easy for you. Here is example code.
import 'package:flutter/material.dart';
import 'package:foto_gallery/foto_gallery.dart';
ListView.builder(
itemCount: imageList.length,
itemBuilder: ((context, index) {
return Container(
height: 300,
width: double.infinity,
padding: const EdgeInsets.all(30),
child: ClipRRect(
borderRadius: BorderRadius.circular(30),
child: FotoGallery(
image: imageList[index],
imageList: imageList,
imgurl: imageList[index],
index: index,
fit: BoxFit.cover,
),
),
);
}),
),
- If you can observe there are two options one is
image
and another one isimgurl
. - The
image: imageList[index]
is used to provide a unique tag to the hero widget. - The other one which is
imgurl:imageList[index]
is use to provide imageUrl.
FotoGallery(
image: imageList[index], // To provide unique tag
imageList: imageList,
imgurl: imageList[index],
index: index,
fit: BoxFit.cover,
),