Как настроить флаттер высоты стека

Question

• 1000 1003 *

ps * извините за мусорный код, я только начал хе-хе

import 'dart:ui';

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Image.asset(
          'assets/images/wp_logo.png',
          height: 250,
        ),
        Stack(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Image.asset(
                  'assets/images/text_bg.png',
                  height: 150,
                ),
                Image.asset(
                  'assets/images/text_bg.png',
                  height: 150,
                ),
              ],
            ),
            Positioned(
              top: 125,
              left: 125,
              child: Image.asset(
                'assets/images/text_bg.png',
                height: 150,
              ),
            ),
          ],
        ),
      ],
    )));
  }
}

Answer 1

Вы можете установить «Переполнение стека» равным visible:

Решение 1:

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Center(
              child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Image.asset(
            'assets/wp_logo.png',
            height: 250,
          ),
          Stack(
            // Set overflow to visible like shown below
            overflow: Overflow.visible,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Image.asset(
                    'assets/text_bg.png',
                    height: 150,
                  ),
                  Image.asset(
                    'assets/text_bg.png',
                    height: 150,
                  ),
                ],
              ),
              Positioned(
                top: 125,
                left: 145,
                child: Image.asset(
                  'assets/text_bg.png',
                  height: 150,
                ),
              ),
            ],
          ),
        ],
      ))),
    );
  }
}

Высота вашего блока стека недостаточна для размещения этих трех последних изображений. Таким образом, можно обернуть стек в контейнер и дать ему высоту 300 или более, поскольку высота изображения равна 150, а две строки делают его 300.

Вот решение 2:

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Center(
              child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Image.asset(
            'assets/wp_logo.png',
            height: 250,
          ),
          Container(
            height: 350,
            child: Stack(
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Image.asset(
                      'assets/text_bg.png',
                      height: 150,
                    ),
                    Image.asset(
                      'assets/text_bg.png',
                      height: 150,
                    ),
                  ],
                ),
                Positioned(
                  top: 125,
                  left: 145,
                  child: Image.asset(
                    'assets/text_bg.png',
                    height: 150,
                  ),
                ),
              ],
            ),
          ),
        ],
      ))),
    );
  }
}

Выход: