Title: Flutter Image Gallery App | Building a Stunning UI with Dart and Flutter
.png)
Description:
Learn how to create a beautiful image gallery app using Flutter and Dart. In this tutorial, we'll explore the fundamentals of Flutter UI development by building an image gallery with a clean and responsive design. Follow along as we implement a ListView, custom widgets, and display images with associated titles, descriptions, and tags. Enhance your Flutter skills and create visually appealing mobile apps! Tags: 1. #Flutter 2. #Dart 3. #ImageGallery 4. #UIDevelopment 5. #MobileAppDevelopment 6. #FlutterTutorial 7. #ListView 8. #Widget 9. #ResponsiveDesign 10. #MobileUI
The provided Flutter Dart code demonstrates the creation of an image gallery app using the Flutter framework. Let's break down the main components and functionality of the program:
1. **App Structure:**
- The app consists of three main classes: `MyApp`, `HomePage`, and `GalleryItemWidget`.
- `MyApp` is the root widget and sets up the MaterialApp, defining the home screen as an instance of `HomePage`.
2. **Image Gallery Data:**
- The `HomePage` class contains a list of `GalleryItem` objects, each representing an image in the gallery.
- Each `GalleryItem` has properties such as `imageUrl`, `title`, `description`, and `tags`.
3. **UI Elements:**
- The UI is structured using Flutter's Scaffold, AppBar, and a ListView to display the gallery items.
- Each gallery item is represented by a `GalleryItemWidget`, a custom widget that displays the image, title, description, and tags.
4. **GalleryItemWidget:**
- The `GalleryItemWidget` is a StatelessWidget responsible for rendering a single gallery item.
- It uses a Card widget to display the content in a card format, including an image, title, description, and tags.
5. **Image Loading:**
- Images are loaded from URLs using the `Image.network` widget, allowing for dynamic retrieval and display of images.
6. Tag Display:
- Tags associated with each image are displayed as Chips within a Wrap widget, providing a visually appealing way to showcase image tags.
7. AppBar:
- The app includes an AppBar at the top with the title "Image Gallery."
8. RunApp:
- The main function `void main()` initializes the app by running `runApp(MyApp())`.
This Flutter Dart code serves as an excellent starting point for creating an image gallery app and provides insights into structuring Flutter applications, creating custom widgets, and handling network images. The tutorial associated with this code can guide developers in understanding Flutter UI development concepts and best practices.
Main.dart:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
final List<GalleryItem> items = [
GalleryItem(
imageUrl: 'https://images.pexels.com/photos/7372338/pexels-photo-7372338.jpeg?cs=srgb&dl=pexels-laura-meinhardt-7372338.jpg&fm=jpg&_gl=1*184lmxz*_ga*NzQwNTEyNzQ5LjE2OTk3ODQ0NjU.*_ga_8JE65Q40S6*MTY5OTg1OTE2MC4zLjAuMTY5OTg1OTE2Mi4wLjAuMA..',
title: 'Swans',
description: 'Swans in lake',
tags: ['#swans', '#lake'],
),
GalleryItem(
imageUrl: 'https://images.pexels.com/photos/11566663/pexels-photo-11566663.jpeg?cs=srgb&dl=pexels-anna-shevchuk-11566663.jpg&fm=jpg&_gl=1*1xp275p*_ga*NzQwNTEyNzQ5LjE2OTk3ODQ0NjU.*_ga_8JE65Q40S6*MTY5OTg1OTE2MC4zLjAuMTY5OTg1OTE2Mi4wLjAuMA..',
title: 'Nature',
description: 'Natural Environments',
tags: ['#nature', '#green'],
),
GalleryItem(
imageUrl: 'https://images.pexels.com/photos/18512532/pexels-photo-18512532.jpeg?cs=srgb&dl=pexels-line-knipst-18512532.jpg&fm=jpg&_gl=1*1xp275p*_ga*NzQwNTEyNzQ5LjE2OTk3ODQ0NjU.*_ga_8JE65Q40S6*MTY5OTg1OTE2MC4zLjAuMTY5OTg1OTE2Mi4wLjAuMA..',
title: 'MountainView',
description: 'Green Environments and moutains view',
tags: ['#mountain', '#green'],
),
GalleryItem(
imageUrl: 'https://images.pexels.com/photos/18936548/pexels-photo-18936548.jpeg?cs=srgb&dl=pexels-david-pohl-18936548.jpg&fm=jpg&_gl=1*1xp275p*_ga*NzQwNTEyNzQ5LjE2OTk3ODQ0NjU.*_ga_8JE65Q40S6*MTY5OTg1OTE2MC4zLjAuMTY5OTg1OTE2Mi4wLjAuMA..',
title: 'Falls',
description: 'Falls From the mountain',
tags: ['#Nature', '#Falls'],
),
// Add more items as needed
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Image Gallery'),
),
body: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return GalleryItemWidget(item: items[index]);
},
),
);
}
}
class GalleryItem {
final String imageUrl;
final String title;
final String description;
final List<String> tags;
GalleryItem({
required this.imageUrl,
required this.title,
required this.description,
required this.tags,
});
}
class GalleryItemWidget extends StatelessWidget {
final GalleryItem item;
GalleryItemWidget({required this.item});
@override
Widget build(BuildContext context) {
return Card(
margin: EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Image.network(
item.imageUrl,
height: 200.0, // Adjust the height as needed
fit: BoxFit.cover,
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
item.title,
style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
),
SizedBox(height: 8.0),
Text(item.description),
SizedBox(height: 8.0),
Wrap(
spacing: 8.0,
children: item.tags.map((tag) {
return Chip(label: Text(tag));
}).toList(),
),
],
),
),
],
),
);
}
}
name: imageviewapp
description: A new Flutter project.
publish_to: 'none'
version: 0.1.0
environment:
sdk: '>=3.1.4 <4.0.0'
dependencies:
flutter:
sdk: flutter
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^2.0.0
flutter:
uses-material-design: true
GitHub Link:
https://github.com/Sivatech24/FlutterImageViewerApplication.git
Thank You...
Comments
Post a Comment