check this 4 image and i am providing a code like homescreen.dart used this and navigate this in all tasbeeh screen.. first user can click to create tasbeeh icon then open alltasbeehscreen.dart and this screen is empty adn the icon+ show to new screen named createtasbeehscreen.dart and and please provide same design and user enter data like title, surah name, ayah from, ayah to , count and then click to add then then show Quran tasbeeh and wazifa tasbeeh button shows in 3 image. and click to quran tasbeeh then open qurantasbeeh screen in 2 image and add data that ia have to provided in this ui design and add then show in this screen and create an new container and add this and create butoon to add alltasbeehscreen.dart screen and user can click wazifataseeh button to click then open wazifatasbeehscreen.dart in 1 image and please provide a same design and arrorw show back screen in every screens please navigate all these screen ... this is home screen code ---[import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
final Map<String, dynamic> userData;

const HomeScreen({Key? key, required this.userData}) : super(key: key);

@override
State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
final colors = {
'primary': const Color(0xFF1E319D), // Primary color
};

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
// Header
Container(
margin: const EdgeInsets.only(bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Text(
'Home',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 24,
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
),
],
),
),

          // Dashboard grid  
          Expanded(  
            child: Column(  
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,  
              children: [  
                // Row 1  
                Row(  
                  mainAxisAlignment: MainAxisAlignment.spaceAround,  
                  children: [  
                    _buildDashboardItem(  
                      'assets/createtasbeeh.png',  
                      'Create Tasbeeh',  
                      () => Navigator.pushNamed(context, '/createtasbeeh'),  
                    ),  
                    _buildDashboardItem(  
                      'assets/group.png',  
                      'Group/Single',  
                      () => Navigator.pushNamed(context, '/allgroups'),  
                    ),  
                  ],  
                ),  

                // Row 2  
                Row(  
                  mainAxisAlignment: MainAxisAlignment.spaceAround,  
                  children: [  
                    _buildDashboardItem(  
                      'assets/Assigntasbeeh.png',  
                      'Assign Tasbeeh',  
                      () => Navigator.pushNamed(context, '/assignTasbeeh'),  
                    ),  
                    _buildDashboardItem(  
                      'assets/Activeunactive.png',  
                      'Active/Unactive',  
                      () {},  
                    ),  
                  ],  
                ),  

                // Row 3  
                Row(  
                  mainAxisAlignment: MainAxisAlignment.spaceAround,  
                  children: [  
                    _buildDashboardItem(  
                      'assets/notification.png',  
                      'Notification',  
                      () {},  
                    ),  
                    _buildDashboardItem(  
                      'assets/friends.png',  
                      'Friends',  
                      () {},  
                    ),  
                  ],  
                ),  

                // Row 4  
                Row(  
                  mainAxisAlignment: MainAxisAlignment.spaceAround,  
                  children: [  
                    _buildDashboardItem(  
                      'assets/History.png',  
                      'History',  
                      () {},  
                    ),  
                    _buildDashboardItem(  
                      'assets/Logout.png',  
                      'LogOut',  
                      () => Navigator.pushReplacementNamed(context, '/'),  
                    ),  
                  ],  
                ),  
              ],  
            ),  
          ),  
        ],  
      ),  
    ),  
  ),  
);  

}

Widget _buildDashboardItem(
String imagePath, String title, VoidCallback onTap) {
return Column(
children: [
InkWell(
onTap: onTap,
child: Container(
height: 120,
width: 120,
decoration: BoxDecoration(
color: colors['primary'], // Primary color
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.3),
spreadRadius: 1,
blurRadius: 5,
offset: Offset(0, 2),
),
],
),
child: Center(
child: Image.asset(
imagePath,
width: 50,
height: 50,
),
),
),
),
const SizedBox(height: 8),
Text(
title,
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w800,
color: Colors.black,
),
textAlign: TextAlign.center,
),
],
);
}
}
] please provide me a code using flutter dart language