Generated code from PixelGennie

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.yellow,
        scaffoldBackgroundColor: Color(0xFF1A1A2E),
      ),
      home: NotificationScreen(),
    );
  }
}

class NotificationScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {},
        ),
        title: Text('Notifications'),
        actions: [
          IconButton(
            icon: Icon(Icons.filter_list),
            onPressed: () {},
          ),
        ],
        backgroundColor: Color(0xFF1A1A2E),
        elevation: 0,
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              decoration: InputDecoration(
                hintText: 'Search notifications',
                prefixIcon: Icon(Icons.search),
                filled: true,
                fillColor: Colors.black26,
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(30),
                  borderSide: BorderSide.none,
                ),
              ),
            ),
          ),
          Container(
            height: 40,
            child: ListView(
              scrollDirection: Axis.horizontal,
              children: [
                NotificationFilterButton(label: 'All', isSelected: true),
                NotificationFilterButton(label: 'Read', isSelected: false),
                NotificationFilterButton(label: 'Unread', isSelected: false),
              ],
            ),
          ),
          Expanded(
            child: ListView(
              children: [
                NotificationSection(title: 'Today', notifications: [
                  NotificationItem(
                    userName: 'Tonima Islam',
                    notificationText: 'mentioned you in a comment of a post',
                    timeAgo: '1m ago',
                    imageUrl: 'https://placehold.co/40x40?description=User%20Avatar',
                  ),
                  NotificationItem(
                    userName: 'Nishat Nishu',
                    notificationText: 'created a new chat in the SBPGC group',
                    timeAgo: '4hrs ago',
                    imageUrl: 'https://placehold.co/40x40?description=User%20Avatar',
                  ),
                ]),
                NotificationSection(title: 'Yesterday', notifications: [
                  NotificationItem(
                    userName: 'Ashiqul Islam Aurnob',
                    notificationText: 'sent you a bonus amount as Eid Salami',
                    timeAgo: '15.04.2022 - 18:21',
                    imageUrl: 'https://placehold.co/40x40?description=User%20Avatar',
                  ),
                  NotificationItem(
                    userName: 'Tonima Islam',
                    notificationText: 'invited to you a new department',
                    timeAgo: '15.04.2022 - 19:35',
                    imageUrl: 'https://placehold.co/40x40?description=User%20Avatar',
                  ),
                  NotificationItem(
                    userName: 'Nishat Nishu',
                    notificationText: 'completed the task that you created',
                    timeAgo: '15.04.2022 - 21:55',
                    imageUrl: 'https://placehold.co/40x40?description=User%20Avatar',
                  ),
                ]),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class NotificationFilterButton extends StatelessWidget {
  final String label;
  final bool isSelected;

  const NotificationFilterButton({
    Key? key,
    required this.label,
    required this.isSelected,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      child: ChoiceChip(
        label: Text(label),
        selected: isSelected,
        onSelected: (bool selected) {},
        selectedColor: Colors.yellow,
        backgroundColor: Colors.black26,
        labelStyle: TextStyle(
          color: isSelected ? Colors.black : Colors.white,
        ),
      ),
    );
  }
}

class NotificationSection extends StatelessWidget {
  final String title;
  final List<NotificationItem> notifications;

  const NotificationSection({
    Key? key,
    required this.title,
    required this.notifications,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            child: Text(
              title,
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
                fontSize: 18,
              ),
            ),
          ),
          ...notifications,
        ],
      ),
    );
  }
}

class NotificationItem extends StatelessWidget {
  final String userName;
  final String notificationText;
  final String timeAgo;
  final String imageUrl;

  const NotificationItem({
    Key? key,
    required this.userName,
    required this.notificationText,
    required this.timeAgo,
    required this.imageUrl,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: CircleAvatar(
        backgroundImage: NetworkImage(imageUrl),
      ),
      title: RichText(
        text: TextSpan(
          children: [
            TextSpan(
              text: userName,
              style: TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
            TextSpan(
              text: ' $notificationText',
              style: TextStyle(
                color: Colors.white,
              ),
            ),
          ],
        ),
      ),
      subtitle: Text(
        timeAgo,
        style: TextStyle(
          color: Colors.white70,
        ),
      ),
      trailing: Icon(
        Icons.circle,
        color: Colors.yellow,
        size: 12,
      ),
    );
  }
}