Flutter Exception caught by widgets library

Question

I am new to flutter and I am getting an exception which I am not able to understand. Can someone please help me with it.

The exception I am getting is

══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.
The ParentDataWidget Positioned(right: 0.0, bottom: 0.0) wants to apply ParentData of type
StackParentData to a RenderObject, which has been set up to accept ParentData of incompatible type
FlexParentData.
Usually, this means that the Positioned widget has the wrong ancestor RenderObjectWidget. Typically,
Positioned widgets are placed directly inside Stack widgets.
The offending Positioned is currently placed inside a Row widget.
The ownership chain for the RenderObject that received the incompatible parent data was:
  Padding ← Container ← Positioned ← Row ← Stack ← RepaintBoundary ← IndexedSemantics ←
NotificationListener<KeepAliveNotification> ← KeepAlive ← AutomaticKeepAlive ← ⋯

My code sinppet is as follow

body: Container(
  padding: const EdgeInsets.only(top: 25, left: 16, right: 16),
  child: GestureDetector(
    onTap: () {
      FocusScope.of(context).unfocus();
    },
    child: ListView(
      children: [
        Stack(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: [
                Container(
                  width: 80,
                  height: 80,
                  margin: const EdgeInsets.only(left: 25),
                  decoration: BoxDecoration(
                    boxShadow: const [
                      BoxShadow(
                          spreadRadius: 2.0,
                          blurRadius: 10.0,
                          color: Colors.black,
                          offset: Offset(0, 10))
                    ],
                    shape: BoxShape.circle,
                    image: ...
                  ),
                ),
                Positioned(
                ...  
                ),
                Container(
                  margin: const EdgeInsets.only(left: 40.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "Naruto",
                        style: TextStyle(
                          color:
                              Theme.of(context).primaryColorLight,
                          fontSize: 20.0,
                        ),
                      ),
                      const SizedBox(
                        height: 5.0,
                      ),
                      Text(
                        "Loreum ipusm",
                        style: TextStyle(
                          color: Theme.of(context).primaryColor,
                          fontSize: 15.0,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
        Container(
          ...
        ),
      ],
    ),
  ),
),

I understand that it is something related to widgets which are wrongly nested. I don't know how to change it and what widgets are wrongly nested and why does flutter complaint about it.

If any more code is required please let me know.

Thanks for any kind of help.

Answer 1

It is related to the Positioned widget. It should be placed directly in the Stack and not in a Row. Try something like the following:

          Stack(
            children: [
              Positioned(
              child: ...
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                children: [
                  Container(
                    width: 80,
                    height: 80,
                    margin: const EdgeInsets.only(left: 25),
                    decoration: BoxDecoration(
                        boxShadow: const [
                          BoxShadow(
                              spreadRadius: 2.0,
                              blurRadius: 10.0,
                              color: Colors.black,
                              offset: Offset(0, 10))
                        ],
                        shape: BoxShape.circle,
                        image: ...
                    ),
                  ),
           
                  Container(
                    margin: const EdgeInsets.only(left: 40.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          "Naruto",
                          style: TextStyle(
                            color:
                            Theme.of(context).primaryColorLight,
                            fontSize: 20.0,
                          ),
                        ),
                        const SizedBox(
                          height: 5.0,
                        ),
                        Text(
                          "Loreum ipusm",
                          style: TextStyle(
                            color: Theme.of(context).primaryColor,
                            fontSize: 15.0,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              
            ],
          ),
          Container(
          ...
          ),
        ],
      ),
    ),
  ),

Answer 2

The reason you get that error is that you are using Positioned widget inside Row widget. You should use that inside Stack widget directly.