Flutter Question posted in
The official Flutter documentation can be found here.

get error of size.isFinite when set positioned for container in stack flutter

I have set positioned as children in Stack.

but when run the code the error show this type:

 Failed assertion: line 600 pos 12: 'size.isFinite': is not true.

this is my full code. i have used one stack image and this image i add the resizable container for add the text on this image.

import 'package:flutter/material.dart';
import 'editPage.dart';

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

this is the edit page code. here i have to add one stack image with size is in the based on the aspect ratio.

class EditPage extends StatefulWidget {
  const EditPage({super.key,});
  @override
  State<EditPage> createState() => _EditPageState();
}

class _EditPageState extends State<EditPage> {
  List<Widget> movableTextWidgets = [];
  @override
  Widget build(BuildContext context) {
    return Directionality(
        textDirection: TextDirection.ltr,
      child:   Scaffold(
      backgroundColor: Colors.white.withOpacity(0.9),
      body: SafeArea(
        child: Column(
          children: [
           Stack(
        children : [
            Hero(
              tag: "image1",
              child: AspectRatio(
                aspectRatio: 5 / 7, // Set your desired aspect ratio
                child: Padding(
                  padding:
                  const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
                  child: Container(
                    width: double.infinity,
                    height: double.infinity,
                    decoration: BoxDecoration(
                      boxShadow: const [
                        BoxShadow(
                          blurRadius: 4,
                        ),
                      ],
                      image: DecorationImage(
                        fit: BoxFit.cover,
                //add image here any
                        image: AssetImage("images/2.png"),
                      ),
                    ),
                  ),
                ),
              ),
            ),
            ...movableTextWidgets,
              ],
            )
          ],
        ),
      ),

      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.lightGreenAccent,
        shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(50.0))),
        foregroundColor: Colors.black,
        onPressed: () {
          _addMovableTextBox();

        },
        child: Icon(Icons.add),
      ),
      )
    );
  }
  void _addMovableTextBox() {
    setState(() {
      movableTextWidgets.add(MovableTextBox());
    });
  }
}

this is the movable class code:

import 'package:flutter/material.dart';

class MovableTextBox extends StatefulWidget {
  @override
  _MovableTextBoxState createState() => _MovableTextBoxState();
}
const ballDiameter = 15.0;
class _MovableTextBoxState extends State<MovableTextBox> {
  double width = 200.0;
  double height = 80.0;
  double top = 100;
  double left = 100;
  @override
  Widget build(BuildContext context) {
    return Stack(
        children: <Widget>[
          Positioned(
            top: top,
            left: left,
            child: GestureDetector(
              onPanUpdate: (details) {
                setState(() {
                  top += details.delta.dy;
                  left += details.delta.dx;
                });
              },
              child: Stack(
                children: [
                  Container(
                    width: width,
                    height: height,
                  ),
                  // Top left corner
                  Positioned(
                    top: -ballDiameter / 2,
                    left: -ballDiameter / 2,
                    child: ManipulatingBall(
                      onDrag: (dx, dy) {
                        setState(() {
                          width -= dx;
                          height -= dy;
                          top += dy;
                          left += dx;
                        });
                      },
                    ),
                  ),
                  // Top right corner
                  // Bottom left corner
                  // Bottom right corner
                ],
              ),
            ),
          )
        ]
    );
  }
}

class ManipulatingBall extends StatefulWidget {
  ManipulatingBall({Key? key, required this.onDrag}) : super(key: key);

  final Function onDrag;

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

class _ManipulatingBallState extends State<ManipulatingBall> {
  late double initX;
  late double initY;

  _handleDrag(details) {
    setState(() {
      initX = details.globalPosition.dx;
      initY = details.globalPosition.dy;
    });
  }

  _handleUpdate(details) {
    var dx = details.globalPosition.dx - initX;
    var dy = details.globalPosition.dy - initY;
    initX = details.globalPosition.dx;
    initY = details.globalPosition.dy;
    widget.onDrag(dx, dy);
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanStart: _handleDrag,
      onPanUpdate: _handleUpdate,
      child: Container(
        width: ballDiameter,
        height: ballDiameter,
        decoration: BoxDecoration(
          color: Colors.black,
          shape: BoxShape.circle,
        ),
      ),
    );
  }
}

what is wrong in code?

Tags:

2

Answers


  1. 0

    You need to wrap your widget in a MaterialApp

    import 'package:flutter/material.dart';
import 'editPage.dart';    

void main() async {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: EditPage(),
    );
  }
}
    Login or Signup to reply.
  2. 0

    The error you’re encountering, ‘Failed assertion: line 600 pos 12: ‘size.isFinite’: is not true,’ usually indicates that somewhere in your widget tree, a widget is trying to render with a size that is not finite.

    In your code, the issue is likely related to the resizable container (MovableTextBox) you’re adding to the movableTextWidgets list within the _EditPageState class.

    To fix the issue, you need to ensure that the size of the MovableTextBox is always finite. In your _MovableTextBoxState class, you are updating the width and height properties based on user interaction, and these values might become non-finite.

    To resolve this, you can add a condition to check if the width and height are greater than zero before updating them:

     onPanUpdate: (details) {
  setState(() {
    if (width + details.delta.dx > 0 && height + details.delta.dy > 0) {
      width += details.delta.dx;
      height += details.delta.dy;
      top += details.delta.dy;
      left += details.delta.dx;
    }
  });
},

    This ensures that the width and height are always greater than zero, preventing the ‘size.isFinite’ assertion error.

    Additionally, you may want to handle scenarios where the user tries to make the box too small, possibly by adding a minimum size constraint.

    Make these adjustments, and it should resolve the issue you’re facing.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search