Closed JesusHdez960717 closed 2 years ago
//This method is used to build the image widget.
//In this case using openContainer,
//when the image is touched a new screen with the large image is displayed.
_buildImageCard() {
return OpenContainer(
// The transition to display when you move from the closed widget to the open one.
transitionType: ContainerTransitionType.fade,
transitionDuration: Duration(seconds: 1),
openColor: Colors.transparent,
// The content that will be displayed when the widget opens.
openBuilder: (context, _) => _buildBigImage(),
closedElevation: 20,
closedColor: Colors.transparent,
// The content that will be displayed when the widget is closed.
closedBuilder: (context, _) => _buildSmallImage(),
);
}
//This method builds the image when is small.
_buildSmallImage() {
return Container(
margin: const EdgeInsets.symmetric(
vertical: 20.0,
horizontal: 20.0,
),
height: 240.0,
child: ClipRRect(
// For the rounded corners
borderRadius: BorderRadius.all(Radius.circular(15)),
// Call the _fadeImage method for the fade effect.
child: _fadeImage(controller.imageUrl),
),
);
}
//This method builds the image when it fills the entire screen.
_buildBigImage() {
return Container(
width: double.infinity,
height: double.maxFinite,
alignment: Alignment.center,
// Call the _animateImage so the image can use diferents tipes of gestures.
child: _animateImage(controller.imageUrl),
);
}
Si se da un click en la imagen que se abra en una nueva ventana, con los mismos gesto de acercarse y demás, pero sin el teclado.
Usar un openContainer debe ser lo mas facil