Grid To Pager
Complete Code For Grid To Pager In Flutter
main.dart
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
debugShowCheckedModeBanner: false,
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<String> images = [
'img1.jpg',
'img2.jpg',
'img3.jpg',
'img4.jpg',
'img5.jpg',
'img6.jpg',
'img7.jpg',
];
bool isPageViewVisible = false;
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async {
if (isPageViewVisible) {
_setPageViewVisible(false);
return false;
}
return true;
},
child: Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
backgroundColor: Colors.deepPurple,
title: Text('Grid To Pager')),
body: Stack(
children: <Widget>[
_buildGridView(),
_buildPageView(),
],
),
),
);
}
Widget _buildGridView() {
return GridView.count(
crossAxisCount: 2,
children: images.map((imageName) {
return GestureDetector(
onTap: () => _setPageViewVisible(true), //<--- on GridView item click, show PageView
child: Card(
child: Center(
child: Image.asset("assets/images/$imageName",),
),
),
);
}).toList(),
);
}
Widget _buildPageView() {
PageView pageView = PageView.builder(
itemCount: images.length,
itemBuilder: (context, index) {
return Center(
child: Image.asset("assets/images/${images[index]}"),
);
},
);
return Opacity(
opacity: isPageViewVisible ? 1 : 0,
child: IgnorePointer(
ignoring: !isPageViewVisible,
child: pageView,
),
);
}
void _setPageViewVisible(bool visible) {
setState(() => isPageViewVisible = visible);
}
}