2

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

Scaffold(
  body: Stack(
    fit: StackFit.expand,
    children: [
      buildBackground(),
      buildGradient(context),
      buildContent(),
    ],
  ),
),

Positioned buildBackground() {
  return Positioned.fill(
    child: Image.network(
      'https://images.pexels.com/photos/931018/pexels-photo-931018.jpeg?auto=compress&cs=tinysrgb&w=600',
      fit: BoxFit.cover,
    ),
  );
}

Positioned buildGradient(BuildContext context) {
  return Positioned(
    left: 0,
    right: 0,
    bottom: 0,
    height: MediaQuery.sizeOf(context).height * 0.7,
    child: DecoratedBox(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.bottomCenter,
          end: Alignment.topCenter,
          colors: [
            Colors.black.withOpacity(0.75),
            Colors.transparent,
          ],
        ),
      ),
    ),
  );
}

Positioned buildContent() {
  return Positioned(
    left: 0,
    right: 0,
    bottom: 0,
    child: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          const Text(
            'Finding the Perfect\nPlace for Your\nVacation',
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 30,
              color: Colors.white,
            ),
          ),
          const Gap(30),
          Container(
            color: Colors.grey,
            height: 40,
            width: double.infinity,
          ),
          const Gap(16),
          Container(
            color: Colors.grey,
            height: 40,
            width: double.infinity,
          ),
          const Gap(30),
        ],
      ),
    ),
  );
}