lib/photo_list_screen.dart
import 'package:flutter/material.dart';
import 'package:photoapp/photo_view_screen.dart';
class PhotoListScreen extends StatefulWidget {
@override
_PhotoListScreenState createState() => _PhotoListScreenState();
}
class _PhotoListScreenState extends State<PhotoListScreen> {
// ...
@override
Widget build(BuildContext context) {
return Scaffold(
// ...
body: PageView(
// ...
children: [
PhotoGridView(
// コールバックを設定しタップした画像のURLを受け取る
onTap: (imageURL) => _onTapPhoto(imageURL),
),
PhotoGridView(
// コールバックを設定しタップした画像のURLを受け取る
onTap: (imageURL) => _onTapPhoto(imageURL),
),
],
),
// ...
);
}
void _onTapPhoto(String imageURL) {
// 最初に表示する画像のURLを指定して、画像詳細画面に切り替える
Navigator.of(context).push(
MaterialPageRoute(
builder: (_) => PhotoViewScreen(imageURL: imageURL),
),
);
}
}
class PhotoGridView extends StatelessWidget {
const PhotoGridView({
Key? key,
required this.onTap,
}) : super(key: key);
// コールバックからタップされた画像のURLを受け渡す
final void Function(String imageURL) onTap;
@override
Widget build(BuildContext context) {
// ...
return GridView.count(
// ...
children: imageList.map((String imageURL) {
return Stack(
children: [
SizedBox(
width: double.infinity,
height: double.infinity,
child: InkWell(
// タップしたらコールバックを実行する
onTap: () => onTap(imageURL),
child: Image.network(
imageURL,
fit: BoxFit.cover,
),
),
),
// ...
],
);
}).toList(),
);
}
}