Untitled

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.symmetric(
          horizontal: 250.0,
        ),
        child: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          color: Colors.white,
          alignment: Alignment.centerRight,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      'Category Choice',
                      style: TextStyle(
                        fontSize: 30.0,
                        fontWeight: FontWeight.w900,
                      ),
                    ),
                    const SizedBox(
                      height: 15.0,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        categoryChips(
                          images: 'assets/1.jpg',
                          name: 'Classic &\nVintages',
                        ),
                        categoryChips(
                          images: 'assets/1.jpg',
                          name: 'Streetwear\nUrban',
                        ),
                        categoryChips(
                          images: 'assets/1.jpg',
                          name: 'Elegant &\nFormal',
                        ),
                        categoryChips(
                          images: 'assets/1.jpg',
                          name: 'Proffessional\nAttire',
                        )
                      ],
                    ),
                  ],
                ),
              ),
              const SizedBox(
                width: 50.0,
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text(
                    'Deal of The Day',
                    style: TextStyle(
                      fontSize: 30.0,
                      fontWeight: FontWeight.w900,
                    ),
                  ),
                  const SizedBox(
                    height: 15.0,
                  ),
                  Container(
                    width: 350.0,
                    height: 225.0,
                    decoration: BoxDecoration(
                      color: const Color(0xFFE5325D),
                      borderRadius: BorderRadius.circular(20.0),
                    ),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }

  Stack categoryChips({
    required String images,
    required String name,
  }) {
    return Stack(
      children: [
        Container(
          width: 225.0,
          height: 225.0,
          decoration: BoxDecoration(
            color: Colors.redAccent,
            shape: BoxShape.circle,
            image: DecorationImage(
              fit: BoxFit.cover,
              image: AssetImage(
                images,
              ),
            ),
          ),
        ),
        Container(
          width: 225.0,
          height: 225.0,
          alignment: Alignment.bottomCenter,
          padding: const EdgeInsets.only(
            left: 20.0,
            right: 20.0,
            bottom: 20.0,
          ),
          decoration: BoxDecoration(
            color: Colors.redAccent,
            shape: BoxShape.circle,
            gradient: LinearGradient(
              begin: Alignment.centerLeft,
              end: Alignment.topRight,
              colors: [
                const Color(0xFFE5325D).withOpacity(0.6),
                const Color(0xFF000000).withOpacity(0.0),
              ],
            ),
          ),
          child: Text(
            name,
            textAlign: TextAlign.center,
            style: const TextStyle(
              color: Colors.white,
              fontSize: 20.0,
            ),
          ),
        ),
      ],
    );
  }
}