SingleChildScrollView not scrolling inside stack-CodePudding

I'm trying to scroll through my stack widget, I have wrapped the stack widget with SingleChildScrollView, but the widgets disappear and there is no scrolling when the text gets bigger at the bottom of the screen, I have tried different ways to solve this issue but could not, I'm seeking some help, and thank you for it in advance.

Stack widget code

     @override
  Widget build(BuildContext context) {
    String mealID = Get.arguments['mealID'];
    DetailsController controller = Get.find<DetailsController>();
    controller.getFoodDetails(mealID);
    return Scaffold(
      body:  Obx((){
         if(controller.meals.value.meals != null){
           var data = controller.meals.value.meals;
            return  SingleChildScrollView(
              child: Stack(
                children: [
                  Positioned(
                    left: 0,
                    right: 0,
                    top: 0,
                    child: Image.network(data![0].strMealThumb!,fit: BoxFit.cover,height: 250,),
                  ),
                  Positioned(
                    top: 220,
                    right: 20,
                    child: FloatingActionButton(
                      onPressed: (){
                        var args = {
                          'meal'  : data[0]
                        };
                        Get.toNamed('/cooking',arguments: args);
                      },
                      child: Image.asset('assets/images/cook_image.png',height: 30,width: 30,),
                    ),
                  ),
                  Positioned(
                    top: 270,
                    left: 10,
                    right: 10,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        const SizedBox(height: 20,),
                        Text(data[0].strMeal!,style: poppingMedium().copyWith(fontSize: 20,color: Colors.black87),),
                        const SizedBox(height: 10,),
                        Container(
                          padding: const EdgeInsets.only(left: 10,right: 10),
                          decoration:  BoxDecoration(
                            color: Colors.blueGrey,
                            borderRadius: BorderRadius.circular(12),

                          ),
                          child: Text(data[0].strCategory!,style: poppingMedium().copyWith(fontSize: 20,color: Colors.white),),
                        ),
                        const SizedBox(height: 10,),
                        Container(
                          padding: const EdgeInsets.only(left: 10,right: 10),
                          decoration:  BoxDecoration(
                            color: Colors.green,
                            borderRadius: BorderRadius.circular(12),

                          ),
                          child: Text(data[0].strArea!,style: poppingMedium().copyWith(fontSize: 20,color: Colors.white),),
                        ),
                        const SizedBox(height: 10,),
                        Text(data[0].strInstructions!,style: poppingMedium()
                            .copyWith(fontSize: 15,color: Colors.black38,fontWeight: FontWeight.w700),)
                      ],
                    ),
                  )
                ],
              ),
            );
         }
         else {
           return const Center(
             child: CircularProgressIndicator(color: Colors.orange,),
           );
         }
      }),
    );
  }
}

CodePudding user response：

Have you try listView instead of singleChildScroll view ?

CodePudding user response：

SingleChildScrollView(
   physics: const AlwaysScrollableScrollPhysics(),
...