Assignment 15 - Stack Image UI with Icons

assignment15.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ImageStackScreen(),
    );
  }
}

class ImageStackScreen extends StatelessWidget {
  const ImageStackScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Stack(
        children: [
          // Full screen background image
          SizedBox(
            width: double.infinity,
            height: double.infinity,
            child: Image.network(
              'https://fastly.picsum.photos/id/393/800/1200.jpg?hmac=4P95wSeLjHalMCDHsf6AYOSNSm-lgvNjfxD2q3iHN30',
              fit: BoxFit.cover,
            ),
          ),

          // Top Bar
          const SafeArea(
            child: Align(
              alignment: Alignment.topCenter,
              child: Padding(
                padding: EdgeInsets.symmetric(vertical: 12),
                child: Text(
                  'For You',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
            ),
          ),

          // Right side icons
          Positioned(
            right: 12,
            bottom: 120,
            child: Column(
              children: [
                // Favourite
                _IconButton(
                  icon: Icons.favorite,
                  label: '234K',
                ),
                const SizedBox(height: 20),

                // Chat bubble
                _IconButton(
                  icon: Icons.chat_bubble,
                  label: '12K',
                ),
                const SizedBox(height: 20),

                // Bookmark
                _IconButton(
                  icon: Icons.bookmark,
                  label: 'Save',
                ),
                const SizedBox(height: 20),

                // Share
                _IconButton(
                  icon: Icons.share,
                  label: 'Share',
                ),
              ],
            ),
          ),

          // Bottom info
          Positioned(
            left: 16,
            bottom: 40,
            right: 80,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // Username + Follow
                Row(
                  children: [
                    const Text(
                      'photographer',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                    const SizedBox(width: 8),
                    Container(
                      padding: const EdgeInsets.symmetric(
                        horizontal: 10,
                        vertical: 3,
                      ),
                      decoration: BoxDecoration(
                        border: Border.all(color: Colors.white),
                        borderRadius: BorderRadius.circular(4),
                      ),
                      child: const Text(
                        'Follow',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 12,
                        ),
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 8),

                // Description
                const Text(
                  'Beautiful landscape photo #1',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 12,
                  ),
                ),
                const SizedBox(height: 6),

                // Sound
                Row(
                  children: const [
                    Icon(Icons.music_note, color: Colors.white, size: 14),
                    SizedBox(width: 4),
                    Text(
                      'original sound - photography',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 12,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class _IconButton extends StatelessWidget {
  final IconData icon;
  final String label;

  const _IconButton({required this.icon, required this.label});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Icon(icon, color: Colors.white, size: 32),
        const SizedBox(height: 4),
        Text(
          label,
          style: const TextStyle(
            color: Colors.white,
            fontSize: 12,
          ),
        ),
      ],
    );
  }
}