I'm trying to build a search bar and a button in a row on top of a grid view, everything was showing on screen fine but when i wrapped my search bar in the row the whole screen disappeared, i know that rows expand and take up all space so i tried wrapping it inside of expanded widget like the grid view in the column but still nothing shows up, what should i do here?

Scaffold(
      body: Center(
        child: StreamBuilder(
            stream: _stream,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                var myData = [];
                myData = snapshot.data as List<dynamic>;
                return Column(
                  children: [
                    Center(child: AppLogo()),
                    Row(
                      children: [
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: TextField(
                            decoration: InputDecoration(
                              fillColor: kLavieGrey,
                              enabledBorder: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(7),
                                borderSide: const BorderSide(
                                  color: kLavieGrey,
                                ),
                              ),
                              focusedBorder: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(7),
                                borderSide: BorderSide(color: Colors.grey),
                              ),
                              filled: true,
                              hintText: 'Search',
                              prefixIcon: Icon(
                                Ionicons.search,
                                color: Colors.grey,
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                    Expanded(
                      child: GridView.builder(
                        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                          maxCrossAxisExtent:
                              MediaQuery.of(context).size.width * 0.5,
                          childAspectRatio: 1 / 1.4,
                        ),
                        itemCount: myData.length,
                        itemBuilder: (context, i) => Center(
                          child: ProductCard(
                            i,
                            myData[i],
                          ),
                        ),
                      ),
                    ),
                  ],
                );
              }
              return const CircularProgressIndicator();
            }),
      ),
    );

CodePudding user response：

It's probably caused by an overflow.
You should try to add Flexible widget for each child in your Row to size them properly.