Flutter Image Gallery App

Here’s a basic Flutter app that displays images, descriptions, and titles:

1. Create a new Flutter project in your IDE.
2. Open the main.dart file.
3. Replace the existing code with the following:

import ‘package:flutter/material.dart’;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Image Gallery’,
home: Scaffold(
appBar: AppBar(
title: Text(‘Image Gallery’),
),
body: ListView(
children: [
ImageCard(
title: ‘Beach’,
description: ‘A beautiful beach with crystal clear water’,
imageUrl:
‘https://images.unsplash.com/photo-1493246318653-5e639b18b52e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80’,
),
ImageCard(
title: ‘Mountain’,
description: ‘A breathtaking view of the mountains’,
imageUrl:
‘https://images.unsplash.com/photo-1525253086316-bb5f5d94e9b0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80’,
),
ImageCard(
title: ‘City’,
description: ‘A bustling city at night’,
imageUrl:
‘https://images.unsplash.com/photo-1549212198-534d3fe6c34d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80’,
),
],
),
),
);
}
}

class ImageCard extends StatelessWidget {
final String title;
final String description;
final String imageUrl;

ImageCard({
required this.title,
required this.description,
required this.imageUrl,
});

@override
Widget build(BuildContext context) {
return Card(
child: Column(
children: [
Image.network(imageUrl),
Padding(
padding: EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
),
),
SizedBox(height: 8.0),
Text(description),
],
),
),
],
),
);
}
}

4. Save the file and run the app.

This will create a ListView with three ImageCard widgets. Each ImageCard widget displays an image, a title, and a description. You can customize the title, description, and image URL for each ImageCard widget to display the images and information that you want.