button row

main.dart

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(body: ButtonsBar()));
  }
}

class ButtonsBar extends StatelessWidget {
  ButtonsBar({super.key});

  static const Size bgSize = Size(2729.0, 470);
  static const Size btnSize = Size(300.0, 147.0);
  final Image bg = Image.network(
    'https://picsum.photos/${bgSize.width}/${bgSize.height}',
  );
  final Image btn = Image.network(
    'https://picsum.photos/${btnSize.width}/${btnSize.height}',
  );

  Widget positionedButton(double top, double left, double scale, String name) {
    return Positioned(
      top: top * scale,
      left: left * scale,
      child: GestureDetector(
        child: Container(
          width: btnSize.width * scale,
          height: btnSize.height * scale,
          child: btn,
        ),
        onTap: () {
          print("clicked button $name");
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    double thisWidth = MediaQuery.of(context).size.width;
    double scale = thisWidth / bgSize.width;

    return Container(
      width: thisWidth,
      height: bgSize.height * scale,
      child: Stack(
        children: <Widget>[
          bg,
          positionedButton(56, 250, scale, "A"),
          positionedButton(56, 750, scale, "B"),
        ],
      ),
    );
  }
}