How to customize Stack height Flutter

Question

I'm new here

just wondering how could I fit these 3 image into a stack in flutter, the first 2 fit good with row, but the last is kinda offset the height of the stack.

ps* im sorry for the trashy code, i just started hehehe

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

'overflow: Overflow.visible,' is outdated. Use this instead:

Set clipBehaivor to Clip.none

here is the implementation in my Stack code:

Stack(
            clipBehavior: Clip.none, children: [
              Align(
                alignment: Alignment.center,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Container(
                    width: 350,
                    height: 150,
                    color: Colors.grey,
                  ),
                ),
              ),
              Positioned(
                top: 50,
                right: 0,
                left: 0,
                child: Align(
                  alignment: Alignment.center,
                  child: Container(
                    height: 170,
                    width: 170,
                    color: Colors.blueGrey,
                  ),
                ),
              ),
              
  
            ],
          ),

Answer 2

You can set Overflow of Stack to visible:

Solution 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,
                ),
              ),
            ],
          ),
        ],
      ))),
    );
  }
}

Your Stack block does not have height big enough to accommodate those last three images. So can wrap the Stack in Container and give it a height of 300 or more as image height is 150 and there are two rows making it 300.

Here is the solution 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,
                  ),
                ),
              ],
            ),
          ),
        ],
      ))),
    );
  }
}

Output: