5

import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:intl/intl.dart';

Scaffold(
  body: Column(
    children: [
      Gap(MediaQuery.paddingOf(context).top + 16),
      buildHeader(),
      const Gap(20),
      Expanded(
        child: ListView(
          padding: const EdgeInsets.all(0),
          children: [
            buildImage(),
            const Gap(20),
            buildTitle(),
            const Gap(12),
            Divider(
              indent: 16,
              endIndent: 16,
              color: Colors.grey.shade200,
              height: 1,
            ),
            const Gap(12),
            buildDescription(),
            const Gap(12),
            Divider(
              indent: 16,
              endIndent: 16,
              color: Colors.grey.shade200,
              height: 1,
            ),
            const Gap(12),
            buildMaterial(),
            const Gap(20),
            buildButton(),
            const Gap(20),
          ],
        ),
      ),
    ],
  ),
),

Padding buildHeader() {
  return Padding(
    padding: const EdgeInsets.symmetric(horizontal: 16),
    child: Stack(
      children: [
        Row(
          children: [
            Container(
              width: 40,
              height: 40,
              color: Colors.black12,
            ),
            const Spacer(),
            Container(
              width: 40,
              height: 40,
              color: Colors.black12,
            ),
            const Gap(10),
            Container(
              width: 40,
              height: 40,
              color: Colors.black12,
            ),
          ],
        ),
        const Positioned.fill(
          child: Center(
            child: Text(
              'App Title',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 18,
              ),
            ),
          ),
        ),
      ],
    ),
  );
}

AspectRatio buildImage() {
  return const AspectRatio(
    aspectRatio: 1.4,
    child: Material(
      color: Colors.black12,
    ),
  );
}

Padding buildTitle() {
  return Padding(
    padding: const EdgeInsets.symmetric(horizontal: 16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Container(
              width: 24,
              height: 24,
              color: Colors.black12,
            ),
            const Gap(8),
            const Text('4.8'),
          ],
        ),
        const Gap(8),
        Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Expanded(
              child: Text(
                'Title Title Title Title Title Title Title Title Title',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 18,
                ),
              ),
            ),
            const Gap(30),
            Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Text(
                  NumberFormat.currency(
                    decimalDigits: 2,
                    symbol: '\$',
                  ).format(399),
                  style: const TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 18,
                  ),
                ),
                Text(
                  NumberFormat.currency(
                    decimalDigits: 2,
                    symbol: '\$',
                  ).format(540),
                  style: const TextStyle(
                    color: Colors.grey,
                    fontSize: 18,
                    decoration: TextDecoration.lineThrough,
                  ),
                ),
              ],
            ),
          ],
        ),
      ],
    ),
  );
}

Padding buildDescription() {
  return const Padding(
    padding: EdgeInsets.symmetric(horizontal: 16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Description',
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 16,
          ),
        ),
        Gap(8),
        Text(
          'In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content.',
          style: TextStyle(
            fontSize: 16,
            color: Colors.black45,
          ),
        ),
      ],
    ),
  );
}

Padding buildMaterial() {
  return const Padding(
    padding: EdgeInsets.symmetric(horizontal: 16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Material',
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 16,
          ),
        ),
        Gap(8),
        Text(
          'Structured to capture and store various attributes',
          style: TextStyle(
            fontSize: 16,
            color: Colors.black45,
          ),
        ),
      ],
    ),
  );
}

Padding buildButton() {
  return Padding(
    padding: const EdgeInsets.symmetric(horizontal: 16),
    child: Container(
      width: double.infinity,
      height: 50,
      color: Colors.black12,
    ),
  );
}