66 lines
2.4 KiB
Dart
66 lines
2.4 KiB
Dart
import 'package:flutter/material.dart'; // Import Material package for UI components
|
|
|
|
class GalleryScreen extends StatelessWidget {
|
|
// StatelessWidget since we don't need to manage state for this view
|
|
const GalleryScreen({super.key}); // Constructor with optional key parameter
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
// Build method defines the gallery screen UI
|
|
// List of image paths from assets folder
|
|
final List<String> imagePaths = [
|
|
'assets/images/1.jpg', // Path to first photo
|
|
'assets/images/2.jpg', // Path to second photo
|
|
'assets/images/3.jpg', // Path to third photo
|
|
'assets/images/4.jpg', // Path to fourth photo
|
|
];
|
|
|
|
return Scaffold(
|
|
// Scaffold provides the basic material design structure
|
|
appBar: AppBar(
|
|
// App bar at the top of the screen
|
|
title: const Text('Photo Gallery'), // Title text
|
|
automaticallyImplyLeading: true,
|
|
actions: [
|
|
IconButton(
|
|
icon: const Icon(
|
|
Icons.logout,
|
|
color: Color.fromARGB(255, 26, 100, 3),
|
|
), // Ensure visible color
|
|
tooltip: 'Logout',
|
|
onPressed: () {
|
|
// Navigate back to login screen and remove all previous routes
|
|
Navigator.of(
|
|
context,
|
|
).pushNamedAndRemoveUntil('/', (route) => false);
|
|
},
|
|
),
|
|
],
|
|
),
|
|
body: GridView.builder(
|
|
// GridView to display photos in a grid
|
|
padding: const EdgeInsets.all(16), // Add padding around all sides
|
|
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
|
// Define grid layout
|
|
crossAxisCount: 2, // 2 items per row
|
|
crossAxisSpacing: 16, // Horizontal space between items
|
|
mainAxisSpacing: 16, // Vertical space between items
|
|
),
|
|
itemCount: imagePaths.length, // Number of items to display
|
|
itemBuilder: (context, index) {
|
|
// Builder for each grid item
|
|
return ClipRRect(
|
|
// Clip the image with rounded corners
|
|
borderRadius: BorderRadius.circular(12), // 12 pixel rounded corners
|
|
child: Image.asset(
|
|
// Display asset image
|
|
imagePaths[index], // Path from the list based on index
|
|
fit: BoxFit.cover, // Scale image to cover the available space
|
|
),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
}
|