Flutter - Positioned inside Stack inside Row doesn't render

1.1k views Asked by At

I'm trying to position the search icon inside the perimeter of the first input in the Row but getting errors and blank screen.

The code without Stack and Positioned works:

Row(
                      children: [
                        Expanded(
                          child: Padding(
                            padding: const EdgeInsets.only(right: 8.0),
                            child: InputText(
                              label: 'Article infrigit',
                              readOnly: true,
                              placeholder: '29.1',
                            ),
                          ),
                        ),
                        Image.asset('assets/images/searchIcon.png',
                            width: 32.0),
                        Expanded(
                          child: InputText(
                            label: 'Import Sanció €',
                            readOnly: true,
                            placeholder: '100,00',
                          ),
                        ),
                      ],
                    ),

The code with Stack and Positioned desn't:

Row(
                      children: [
                        Stack(children: [
                          Expanded(
                            child: Padding(
                              padding: const EdgeInsets.only(right: 8.0),
                              child: InputText(
                                label: 'Article infrigit',
                                readOnly: true,
                                placeholder: '29.1',
                              ),
                            ),
                          ),
                          Positioned(
                            top: 0,
                            right: 0,
                            child: Image.asset('assets/images/searchIcon.png',
                                width: 32.0),
                          ),
                        ]),
                        Expanded(
                          child: InputText(
                            label: 'Import Sanció €',
                            readOnly: true,
                            placeholder: '100,00',
                          ),
                        ),
                      ],
                    ),

before the stack

One of the layout exceptions says: layout exception

1

There are 1 answers

0
Tom Parandyk On

Solution is to wrap Stack into SizedBox to give it height and Expanded to give it full width

Found an answer here Flutter: RenderBox was not laid out