landing

landing_test.dart

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: MyLanding(),
    );
  }
}

class MyLanding extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(children: [
          //первый блок с 2мя секциями и телефоном посередине
          Container(
            height: MediaQuery.of(context).size.height * 2,
            child: Stack(children: [
              Column(children: [
                // изначальные пропорции секций c помощью флекса
                Flexible(
                  flex: 3,
                  // констрейнты для ограничения минимальной высоты 1й секции
                  child: ConstrainedBox(
                      constraints: BoxConstraints(
                          // на уровне 70% от высоты (взял на глаз, нужно корректировать с лого и контролами)
                          minHeight: MediaQuery.of(context).size.height * 0.7),
                      child: Container(
                          // привязваем высоту к ширине, что бы заставить контейнер сужаться,
                          // пока он не упрется в констрейнты, объявленные выше
                          height: MediaQuery.of(context).size.width / 2,
                          color: Colors.green)),
                ),
                Flexible(
                  flex: 4,
                  child: Container(
                    color: Colors.white,
                    child: Stack(
                      // указываем, что не хотим обрезать вылезшие объекты
                      clipBehavior: Clip.none,
                      // что бы начальной точкой для центра телефона был горизонтальный центр стэка
                      alignment: Alignment.topCenter,
                      children: [
                        Positioned(
                          // выносим ассет на половину своей высоты выше стэка, что бы создать наложение
                          top: -200,
                          child: Container(
                            height: 400,
                            width: 240,
                            color: Colors.black,
                          ),
                        )
                      ],
                    ),
                  ),
                )
              ])
            ]),
          )
        ]),
      ),
    );
  }
}