package:flutter/src/rendering/stack.dart': Failed assertion: line 588 pos 12: 'size.isFinite': is not true

Question

I am a beginner in Flutter. Just trying to make a layout and the code was working fine without SingleChildScrollView and Column. But When I add it inside those, it shows error. size.infinite is not true.

But I really wanted the first SingleChildScrollView and Column. Because I need to add more widgets inside them.

1. How to know when to use LayoutBuilder actually?
2. what is the problem here?

what to do next?

import 'package:flutter/material.dart';

class StackButtonCheck extends StatelessWidget {
  const StackButtonCheck({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('appbar'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            LayoutBuilder(
              builder: (context, constraints) => Stack(
                children: [
                  Positioned(
                    bottom: 50,
                    child: Image.network(
                      'https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_1280.jpg',
                      fit: BoxFit.fitWidth,
                      // height: 130,
                      height: constraints.maxHeight - 50,
                      width: constraints.maxWidth,
                    ),
                  ),
                  Positioned(
                    bottom: 30, // end must be 10px above
                    child: SingleChildScrollView(
                      child: Container(
                        width: constraints.maxWidth,
                        padding: EdgeInsets.all(8),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(20),
                        ),
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Text('content should display'),
                            ElevatedButton(
                              onPressed: () {
                                print('button event occus');
                              },
                              child: Text('tap should work'),
                            ),
                            text(),
                          ],
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Text text() {
    return Text('''Lorem Ipsum is simply dummy text of the printing
       and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.''');
  }
}

Answer 1

Q: How to know when to use LayoutBuilder actually?

A: When you need to get constrains, actually in my case is maxWidth and maxHeight.

Q: What is the problem here?

A: Cause you place LayoutBuilder inside a Column(in a Scroll), mean constrains maxHeight is infinite (not finite).

Q: What to do next?

A: You may use a SizedBox with fixed height instead of LayoutBuilder.