How to add my SearchField Container on top of my RefreshIndicator widget? Flutter/Dart

Question

I have my RefreshIndicator Widget and I have also a Container which is my SearchField mechanism, how can I add my Container on top of my RefreshIndicator? I will leave both codes below: This is my refreshindicator:

RefreshIndicator(
      onRefresh: refresh,
      child: ListView.separated(
          separatorBuilder: (context, index) => Divider(),
          controller: controller,
          padding: const EdgeInsets.all(8),
          itemCount: evsePanels.length + 1,
          itemBuilder: (context, index) {
            if (index < evsePanels.length) {
              return evsePanels[index];
            } else {
              return  Padding(
                padding: const EdgeInsets.symmetric(vertical: 32),
                child: Center(
                  child: hasMore
                      ? const CircularProgressIndicator()
                      : const Text('No more data to load'),
                ),
              );
            }
          }
      ),
    );

This is my searchfield Container:

Container(
            height: widget.appController.queryData.size.height/12,
            width: widget.appController.queryData.size.width * (9/10),
            margin: EdgeInsets.all(5.0),
            decoration: BoxDecoration(
                color: widget.appController.themeController.appWhiteLightColor,
                boxShadow: [
                  BoxShadow(
                    color: widget.appController.themeController.appGreyLightColor.withOpacity(0.6),
                    spreadRadius: 1,
                    blurRadius: 1,
                    offset: Offset(0, 2), // changes position of shadow
                  ),
                ],
                shape: BoxShape.rectangle,
                border: Border.all(
                  color: Colors.transparent,
                ),
                borderRadius: BorderRadius.all(Radius.circular(10))
            ),
            child:Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children:[
                  Container(
                    width: widget.appController.queryData.size.width * (7/10),
                    child: searchTextField,
                  ),
                  Container(
                    child: IconButton(
                      color: widget.appController.themeController.appBlackDeepColor,
                      tooltip: 'Search',
                      icon: const Icon(Icons.search),
                      iconSize: 32 * this.unitHeightValue,
                      onPressed: () {
                        this.evseSearchField = myController.text;
                        showEvsePanels();
                      },
                    ),
                  ),
                ]
            ),
          )

Answer 1

You can use a column and add both the widgets as children of the column widget

SizedBox(
height: MediaQuery.of(context).size.height,
width : MediaQuery.of(context).size.width,

 child: Column(
   children: [
     Container(
            height: widget.appController.queryData.size.height/12,
            width: widget.appController.queryData.size.width * (9/10),
            margin: EdgeInsets.all(5.0),
            decoration: BoxDecoration(
                color: widget.appController.themeController.appWhiteLightColor,
                boxShadow: [
                  BoxShadow(
                    color: widget.appController.themeController.appGreyLightColor.withOpacity(0.6),
                    spreadRadius: 1,
                    blurRadius: 1,
                    offset: Offset(0, 2), // changes position of shadow
                  ),
                ],
                shape: BoxShape.rectangle,
                border: Border.all(
                  color: Colors.transparent,
                ),
                borderRadius: BorderRadius.all(Radius.circular(10))
            ),
            child:Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children:[
                  Container(
                    width: widget.appController.queryData.size.width * (7/10),
                    child: searchTextField,
                  ),
                  Container(
                    child: IconButton(
                      color: widget.appController.themeController.appBlackDeepColor,
                      tooltip: 'Search',
                      icon: const Icon(Icons.search),
                      iconSize: 32 * this.unitHeightValue,
                      onPressed: () {
                        this.evseSearchField = myController.text;
                        showEvsePanels();
                      },
                    ),
                  ),
                ]
            ),
          ),
      Expanded(
        child: RefreshIndicator(
      onRefresh: refresh,
      child: ListView.separated(
          separatorBuilder: (context, index) => Divider(),
          controller: controller,
          padding: const EdgeInsets.all(8),
          itemCount: evsePanels.length + 1,
          itemBuilder: (context, index) {
            if (index < evsePanels.length) {
              return evsePanels[index];
            } else {
              return  Padding(
                padding: const EdgeInsets.symmetric(vertical: 32),
                child: Center(
                  child: hasMore
                      ? const CircularProgressIndicator()
                      : const Text('No more data to load'),
                ),
              );
            }
          }
      ),
    )
      )
   ]
 )
)