Error in Flutter: Failed assertion: line 588 pos 12: 'size.isFinite': is not true.in GridTileBar

user_14992627 0
Viewed 10740

this is my first question to the community. I am learning Flutter and I was trying to recreate a design seen on Dribbble. I am having these two errors when I try to add a footer to a GridTileBar:

  1. The following assertion was thrown during performLayout(): 'package:flutter/src/rendering/stack.dart': Failed assertion: line 588 pos 12: 'size.isFinite': is not true.

  2. RenderBox was not laid out: RenderStack#fd7b9 relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1940 pos 12: 'hasSize'

The relevant error-causing widget was ClipRRect lib\main_body.dart:73

I have wrapped a GridTile inside a ClipRRect and the child of the GridTile is an Image, see the 2 screenshots before and after I add the footer.

before after

Here is my code:

class UIUXCard extends StatelessWidget {

@override
Widget build(BuildContext context) {
  return ClipRRect(
    borderRadius: BorderRadius.circular(15),
    child: GridTile(
      child: Image.asset(
        'images/ui.jpg',
        fit: BoxFit.cover,
      ),
      footer: GridTileBar(
      backgroundColor: Colors.black54,
      title: Text('UI/UX Design'),
    ),
  ),
);

} }

flutter-layout flutter
2 Answers

I am able to replicate the issue.

In the example code I've created:

import 'package:flutter/material.dart';

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

class UIUX extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            UIUXCard(),
          ],
        ),
      ),
    );
  }
}

class UIUXCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(15),
      child: GridTile(
        child: Image.asset(
          'images/ui.jpeg',
          fit: BoxFit.cover,
        ),
        footer: GridTileBar(
          backgroundColor: Colors.black54,
          title: Text('UI/UX Design'),
        ),
      ),
    );
  }
}

This will throw errors:

The following assertion was thrown during performLayout():
'package:flutter/src/rendering/stack.dart': Failed assertion: line 588 pos 12: 'size.isFinite': is not true.

and

RenderBox was not laid out: RenderStack#f487f relayoutBoundary=up4 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

As observed, the UIUXCard() is in an unbounded widget (the Column widget). It needs to be wrap in a bounded widget and provide the size for it. In the example below, I added a Container to solve the issue.

import 'package:flutter/material.dart';

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

class UIUX extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Wrap in a Container
            Container(
              width: 100.0,
              height: 100.0,
              child: UIUXCard(),
            ),
          ],
        ),
      ),
    );
  }
}

class UIUXCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(15),
      child: GridTile(
        child: Image.asset(
          'images/ui.jpeg',
          fit: BoxFit.cover,
        ),
        footer: GridTileBar(
          backgroundColor: Colors.black54,
          title: Text('UI/UX Design'),
        ),
      ),
    );
  }
}

enter image description here

Or try to wrap the GridTile in a container:

import 'package:flutter/material.dart';

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

class UIUX extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Wrap in a Container
            UIUXCard(),
          ],
        ),
      ),
    );
  }
}

class UIUXCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(15),
      child: Container(
        width: 100.0,
        height: 100.0,
        child: GridTile(
          child: Image.asset(
            'images/ui.jpeg',
            fit: BoxFit.cover,
          ),
          footer: GridTileBar(
            backgroundColor: Colors.black54,
            title: Text('UI/UX Design'),
          ),
        ),
      ),
    );
  }
}

Try to check out the documentation about "Layouts in Flutter". It would be a good reference for this kind of case.

If this is not the case, could you provide other parts of your code? or the part where you are trying to call the UIUXCard class?

user_83427420

Check your widgets position, i had same issue and i deleted positioned on widget and done!

user_168937280
Related