我对 Flutter 上的空格有疑问

Question

I can't understand what I'm doing wrong. I have created a small detail page for an application that I am developing on vegan recipes. I have a space that I can't take away and I don't understand what generated it. Space is what you see circled in red. Can you help me? Thank you, Vincenzo

class _CookDetailState extends State<CookDetail> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.arrow_back, color: Colors.white),
          onPressed: () => Navigator.of(context).pop(),
  ), 
        title: Text(this.widget.ricetta.title),
        backgroundColor: AppColors.darkModeBackgroundColor),
      body: Stack(
        children: <Widget>[
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            child: Hero(
              tag: this.widget.ricetta.title,
              child: Container(
                decoration:
                    BoxDecoration(image: DecorationImage(image: NetworkImage("https://cdn.pixabay.com/photo/2017/09/16/19/21/salad-2756467__340.jpg"),
                      fit: BoxFit.cover)),
              ),
            ),
          ),


          // white container
          Positioned(
            left: 24.0,
            right: 24.0,
            bottom: 16.0,
            child: Container(
              //height: MediaQuery.of(context).size.height * 0.75,
              //height: 650,
              child: ClipRect(
                child: BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 100, sigmaY: 200),
                  child: Container(
                       padding: EdgeInsets.all(16.0),
                       height: 500,
                       decoration: BoxDecoration(borderRadius: BorderRadius.circular(16.0), color: Colors.white.withOpacity(0.2)),
                      child: SingleChildScrollView(
                        child: Container(
                    padding: EdgeInsets.all(16.0),
                    height: 800,
                    decoration: BoxDecoration(borderRadius: BorderRadius.circular(16.0), color: Colors.white.withOpacity(0.2)),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Row(
                          children: <Widget>[
                            Text(
                              this.widget.ricetta.title, 
                              style: TextStyle(color: Colors.white, fontSize: 20.0, fontWeight: FontWeight.bold),
                            ),
                            Spacer(),
                            Icon(
                              Icons.favorite_border,
                              size: 24.0,
                              color: Colors.white,
                            ),
                          ],
                        ),
                        new Container(
                          child: ListView(
                            shrinkWrap: true,
                            children: <Widget>[
                              this._generateList(this.widget.ricetta.listIngredieti),
                              this._generateStep(this.widget.ricetta.listPassaggio),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),  
                        ),
                      ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }


  Widget _generateList(List<Ingrediente> listIngrediente){

    return Column(
      children: <Widget>[
        for ( var myElement in listIngrediente ) Text(
            myElement.title + " " + myElement.quantita,
            style: TextStyle(color: Colors.white, fontSize: 12, fontWeight: FontWeight.w600))
      ],
    );
  }

  Widget _generateStep(List<StepRicetta> listStep){
    return Column(
      children: <Widget>[
        for (var myStep in listStep) CheckboxListTile(title: AutoSizeText(myStep.title),
          value: false, onChanged: (bool selected){
              print("Valore selected");
          },
          secondary: const Icon(Icons.hourglass_empty),
        )
      ],
    );
  }

}

My concept would be to leave the writing "Recipe 1", blocked, scrolling only and exclusively the list concerning the list of ingredients, such as "Put the bread", "Put 300 g of water"

Answer 1

I think your second EdgeInsets.all(16.0) create the space, do you have try this: EdgeInset.only(left: 16.0, right: 16.0) ?