Uncaught Error: Cannot hit test a render box with no size

Question

So basically I'm working on a self made project by myself just to practice.

When I try to login, the app should list all the users who are in the DB. But when I click the login, this error comes up:

Uncaught Error: Cannot hit test a render box with no size.

Here is my code:

import 'package:flutter/material.dart';
import 'api.dart';
import 'person.dart';

class MainScreen extends StatefulWidget {
  const MainScreen({Key? key, required person}) : super(key: key);

  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  TextEditingController _usernameController = TextEditingController();
  TextEditingController _passwordController = TextEditingController();

  Future<List<Person>> _futurePersons = Api.getPersons();

  void _login() async {
    String username = _usernameController.text;
    String password = _passwordController.text;

    try {
      final persons = await _futurePersons;

      final currentUserIndex = persons.indexWhere(
        (person) => person.name == username,
      );
      final currentUser =
          currentUserIndex > -1 ? persons[currentUserIndex] : null;

      if (currentUser != null) {
        showDialog(
          context: context,
          builder: (BuildContext context) => AlertDialog(
            title: Text('Szia, ${currentUser.name}!'),
            content: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('A te ID-d ${currentUser.id}'),
                SizedBox(height: 8),
                Text('A felhasznalok:'),
                Expanded(
                  child: ListView.builder(
                    itemCount: persons.length,
                    itemBuilder: (context, index) {
                      return Text(persons[index].name);
                    },
                  ),
                ),
              ],
            ),
          ),
        );
      } else {
        showDialog(
          context: context,
          builder: (BuildContext context) => AlertDialog(
            title: Text('Hiba'),
            content: Text('Nincs ilyen nevu felhasznalo'),
          ),
        );
      }
    } catch (e) {
      print('Hiba a felhasznalo keresese kozben: $e');
      showDialog(
        context: context,
        builder: (BuildContext context) => AlertDialog(
          title: Text('Hiba'),
          content: Text('Nem sikerult megtalalni a felhasznalot'),
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('teszt'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextFormField(
              controller: _usernameController,
              decoration: InputDecoration(
                hintText: 'Felhasznalo nev',
              ),
            ),
            SizedBox(height: 16.0),
            TextFormField(
              controller: _passwordController,
              obscureText: true,
              decoration: InputDecoration(
                hintText: 'Jelszo',
              ),
            ),
            SizedBox(height: 16.0),
            ElevatedButton(
              onPressed: _login,
              child: Text('Belepes'),
            ),
          ],
        ),
      ),
    );
  }
}

I've tried shrink-wrap, but it didn't work out : - /

Answer 1

AlertDialog having constrains issue on showDialog, and using ListView with Expanded is trying to get infinite size which is causing trouble, you can provide a fixed size(can be use LayoutBuilder).

showDialog(
        context: context,
        builder: (BuildContext context) => LayoutBuilder(
          builder: (_, constrains) => AlertDialog(
            title: Text('Szia,'),
            scrollable: false,
            content: SizedBox(
              width: constrains.maxWidth * .8,
              height: constrains.maxHeight * .8,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('A te ID-d '),
                  SizedBox(height: 8),
                  Text('A felhasznalok:'),
                  Expanded(
                    child: ListView.builder(

Or you can use Column like

showDialog(
  context: context,
  builder: (BuildContext context) => LayoutBuilder(
    builder: (_, constrains) => AlertDialog(
        title: Text('Szia,'),
        scrollable: true,
        content: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('A te ID-d '),
            SizedBox(height: 8),
            Text('A felhasznalok:'),
            Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                for (var person in persons)
                  Text(
                    person.toString(),
                    style: TextStyle(fontSize: 20),
                  )
              ],
            ),
          ],
        )),
  ),
);