Generated code from pixels2flutter.dev

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(useMaterial3: true),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Stack(
            children: [
              Image.network(
                'https://placehold.co/768x300?description=Sunrise%20over%20clouds',
                width: double.infinity,
                height: 300,
                fit: BoxFit.cover,
              ),
              Positioned(
                top: 40,
                left: 20,
                child: Row(
                  children: [
                    Icon(Icons.settings, color: Colors.white),
                    SizedBox(width: 20),
                    Icon(Icons.search, color: Colors.white),
                    SizedBox(width: 20),
                    Icon(Icons.bookmark, color: Colors.white),
                  ],
                ),
              ),
              Positioned(
                top: 100,
                left: 0,
                right: 0,
                child: Center(
                  child: Text(
                    'وَأَدْخِلْنِي بِرَحْمَتِكَ فِي عِبَادِكَ الصَّالِحِينَ',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
              Positioned(
                top: 140,
                left: 0,
                right: 0,
                child: Center(
                  child: Container(
                    padding: EdgeInsets.all(8),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: Column(
                      children: [
                        Text(
                          '1',
                          style: TextStyle(
                            fontSize: 24,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        Text(
                          'جمادى الأولى',
                          style: TextStyle(fontSize: 16),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              Positioned(
                bottom: 20,
                left: 20,
                child: Text(
                  'Sunrise 06:26',
                  style: TextStyle(color: Colors.white, fontSize: 16),
                ),
              ),
              Positioned(
                bottom: 20,
                right: 20,
                child: Text(
                  'Dhuhr 11:36',
                  style: TextStyle(color: Colors.white, fontSize: 16),
                ),
              ),
            ],
          ),
          Container(
            color: Colors.grey[200],
            padding: EdgeInsets.symmetric(vertical: 10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Text('Various'),
                Text('Prayers'),
                Text('Qibla'),
                Text('Favorites'),
                Text('Counter'),
              ],
            ),
          ),
          Container(
            padding: EdgeInsets.all(16),
            child: Text(
              'Dhuhr in 2:27:29',
              style: TextStyle(
                color: Colors.brown,
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          Expanded(
            child: GridView.count(
              crossAxisCount: 2,
              padding: EdgeInsets.all(16),
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
              children: [
                buildButton('Quran', Colors.brown),
                buildButton('Names of Allah', Colors.red),
                buildButton('My Athkar', Colors.cyan),
                buildButton('Evening Athkar', Colors.redAccent),
                buildButton('Morning Athkar', Colors.blue),
                buildButton('After Prayers', Colors.blueAccent),
                buildButton('Prayers Athkar', Colors.brown),
                buildButton('Waking up Athkar', Colors.purple),
                buildButton('Sleep Athkar', Colors.purpleAccent),
                buildButton('Prophet Mohammed Du...', Colors.orangeAccent),
                buildButton('Dua\'a from the Quran', Colors.grey),
                buildButton('Al-Raqya From Sunna', Colors.teal),
                buildButton('Al-Raqya From Quran', Colors.orange),
                buildButton('More Athkar', Colors.pink),
                buildButton('Tasbeeh', Colors.blueAccent),
              ],
            ),
          ),
          Container(
            color: Colors.grey[300],
            padding: EdgeInsets.all(16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text('Comprehensive Athkar'),
                Text('Comprehensive athkar in one page'),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget buildButton(String text, Color color) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(color: color),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Center(
        child: Text(
          text,
          style: TextStyle(color: color, fontSize: 16),
        ),
      ),
    );
  }
}