RenderFlex在底部问题上溢出了40个像素 [英] A RenderFlex overflowed by 40 pixels on the bottom problem

问题描述

引发了另一个异常:RenderFlex在底部溢出了40个像素.

Another exception was thrown: A RenderFlex overflowed by 40 pixels on the bottom.

我收到此错误.请有人帮我.我是新手.

I am getting this error. Please someone help me. I am new in flutter.

我确实在代码上做了很多更改，但是仍然无法更改结果.

I did change lots of things on the code but still couldn't change the result.

import 'package:flutter/material.dart';
import 'package:estilo/pages/cart.dart';

class Cart_products extends StatefulWidget {
  @override
  _Cart_productsState createState() => _Cart_productsState();
}

class _Cart_productsState extends State<Cart_products> {
  var Products_on_the_cart = [
    {
      "name": "Blazer (Man)",
      "picture": "images/products/blazer1.jpeg",
      "price": 85,
      "size": "M",
      "color": "Black",
      "quantity": 1
    },
    {
      "name": "Hill 1",
      "picture": "images/products/hills1.jpeg",
      "price": 50,
      "size": "38",
      "color": "Red",
      "quantity": 1
    },
    {
      "name": "Hill 1",
      "picture": "images/products/hills1.jpeg",
      "price": 50,
      "size": "38",
      "color": "Red",
      "quantity": 1
    },
  ];

  @override
  Widget build(BuildContext context) {
    return new ListView.builder(
        itemCount: Products_on_the_cart.length,
        itemBuilder: (context, index) {
          return new Single_cart_product(
            cart_prod_name: Products_on_the_cart[index]["name"],
            cart_prod_color: Products_on_the_cart[index]["color"],
            cart_prod_quantity: Products_on_the_cart[index]["quantity"],
            cart_prod_size: Products_on_the_cart[index]["size"],
            cart_prod_price: Products_on_the_cart[index]["price"],
            cart_prod_picture: Products_on_the_cart[index]["picture"],
          );
        });
  }
}

class Single_cart_product extends StatelessWidget {
  final cart_prod_name;
  final cart_prod_picture;
  final cart_prod_price;
  final cart_prod_size;
  final cart_prod_color;
  final cart_prod_quantity;

  Single_cart_product(
      {this.cart_prod_name,
      this.cart_prod_picture,
      this.cart_prod_price,
      this.cart_prod_color,
      this.cart_prod_quantity,
      this.cart_prod_size});

  @override
  Widget build(BuildContext context) {
    return Card(

      child: ListTile(

        //Leading Section

        leading: new Image.asset(
          cart_prod_picture,
          width: 80.0,
          height: 80.0,
        ),

        //Title Section
        title: new Text(cart_prod_name),
        //Subtitle Section
        subtitle: new Column(

          children: <Widget>[
            new Row(
              children: <Widget>[
                Padding(

                    padding: const EdgeInsets.all(0.0),
                    child: new Text("Size:")),
                Padding(
                    padding: const EdgeInsets.all(4.0),
                    child: new Text(
                      cart_prod_size,
                      style: TextStyle(color: Colors.red),
                    )),

                //For Product Color

                new Padding(
                  padding: const EdgeInsets.fromLTRB(20.0, 8.0, 8.0, 8.0),
                  child: new Text("Color:"),
                ),
                Padding(
                  padding: const EdgeInsets.all(4.0),
                  child: new Text(cart_prod_color,
                      style: TextStyle(color: Colors.red)),
                )
              ],
            ),

            // This is for product price
            new Container(
              alignment: Alignment.topLeft,
              child: new Text(
                "$cart_prod_price\₺",
                style: TextStyle(
                    fontSize: 17.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.red),
              ),
            )
          ],
        ),

        trailing: new Column(
          verticalDirection: VerticalDirection.down,
          children: <Widget>[

            new IconButton(icon: Icon(Icons.arrow_drop_up), onPressed: (){}),
            new IconButton(icon: Icon(Icons.arrow_drop_down), onPressed: (){})
          ],
        ),

      ),
    );
  }



}

这是我的飞镖课程

屏幕快照在此处

推荐答案

尝试一下，它看起来像此:

Try this, it will look like this:

  @override
  Widget build(BuildContext context) {
    final Size screenSize = MediaQuery.of(context).size;

    return Card(
      child: Row(
        children: <Widget>[
          new SizedBox(
            width: (screenSize.width / 5) * 4.3,
            child: ListTile(
              //Leading Section
              leading: new Image.asset(
                cart_prod_picture,
                width: 80.0,
                height: 80.0,
              ),
              //Title Section
              title: new Text(cart_prod_name),
              //Subtitle Section
              subtitle: new Column(
                children: <Widget>[
                  new Row(
                    children: <Widget>[
                      new Padding(
                          padding: const EdgeInsets.all(0.0),
                          child: new Text("Size:")),
                      new Padding(
                          padding: const EdgeInsets.all(4.0),
                          child: new Text(
                            cart_prod_size,
                            style: TextStyle(color: Colors.red),
                          )),

                      //For Product Color
                      new Padding(
                        padding: const EdgeInsets.fromLTRB(20.0, 8.0, 8.0, 8.0),
                        child: new Text("Color:"),
                      ),
                      new Padding(
                        padding: const EdgeInsets.all(4.0),
                        child: new Text(cart_prod_color,
                            style: TextStyle(color: Colors.red)),
                      )
                    ],
                  ),

                  // This is for product price
                  new Container(
                    alignment: Alignment.topLeft,
                    child: new Text(
                      "$cart_prod_price\₺",
                      style: TextStyle(
                          fontSize: 17.0,
                          fontWeight: FontWeight.bold,
                          color: Colors.red),
                    ),
                  )
                ],
              ),
            ),
          ),
          new SizedBox(
            width: 49.0,
            child: new Column(
                children: <Widget>[
                  new IconButton(icon: Icon(Icons.arrow_drop_up), onPressed: () {}),
                  new Text("$cart_prod_quantity"),
                  new IconButton(icon: Icon(Icons.arrow_drop_down), onPressed: () {})
                ],
            )
          )
        ],
      ),
    );
  }

这篇关于RenderFlex在底部问题上溢出了40个像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！