如何删除屏幕底部和底栏之间的底部空间？

Posted 2023-02-23

【中文标题】如何删除屏幕底部和底栏之间的底部空间？

【英文标题】：how to remove bottom space between bottom of the screen and bottom bar?

【发布时间】：2020-12-05 06:47:55

【问题描述】：

如何去除底部栏和屏幕底部之间的空白。我也尝试在底部容器中应用填充或边距，但它不起作用。请帮我解决这个问题。 嘿帮助我，我担心这个错误。这需要我大部分时间，但我无法解决它。请帮帮我。

这是我的代码

import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:provider/provider.dart';
import 'package:grk_001/Provider/products.dart';

class ProductDetails extends StatelessWidget 
  static const String routename = 'ProductDetails';
  @override
  Widget build(BuildContext context) 
    final devicesize = MediaQuery.of(context).size;
    final Productid = ModalRoute.of(context).settings.arguments as String;
    final loadedproduct = Provider.of<Products>(
      context,
    ).findByid(Productid);

    return SafeArea(
      maintainBottomViewPadding: true,
      child: Scaffold(
        appBar: AppBar(
          title: Text(loadedproduct.title == null ? '' : loadedproduct.title),
        ),
        body: Container(
          margin: EdgeInsets.zero,
          padding: EdgeInsets.zero,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              SingleChildScrollView(
                child: Column(
                  children: <Widget>[
                    Container(
                      width: double.infinity,
                      height: 300,
                      child: Image.network(
                        loadedproduct.imageUrl,
                        fit: BoxFit.cover,
                      ),
                    ),
                    SizedBox(
                      height: 15.0,
                    ),
                    Text(
                      '₹$loadedproduct.price',
                      style: TextStyle(fontSize: 30.0),
                    ),
                    SizedBox(
                      height: 10.0,
                    ),
                    Text(
                      loadedproduct.description,
                      softWrap: true,
                      textAlign: TextAlign.center,
                      style: TextStyle(fontSize: 20.0),
                    ),
                    Row(
                      children: <Widget>[
                        Expanded(
                          child: FlatButton.icon(
                              onPressed: () ,
                              icon: Icon(
                                Icons.arrow_drop_down,
                                color: Colors.pink,
                              ),
                              label: Text(
                                'Quantity',
                                style: TextStyle(color: Colors.pink),
                              )),
                        ),
                        Expanded(
                          child: FlatButton.icon(
                            onPressed: () ,
                            icon: Icon(
                              Icons.arrow_drop_down,
                              color: Colors.pink,
                            ),
                            label: Text(
                              'Color',
                              style: TextStyle(color: Colors.pink),
                            ),
                          ),
                        )
                      ],
                    )
                  ],
                ),
              ),
              Container(
                padding: EdgeInsets.zero,
                margin: EdgeInsets.zero,
                width: double.infinity,
                decoration: BoxDecoration(),
                child: Row(
                  children: <Widget>[
                    Expanded(
                      flex: 5,
                      child: FlatButton(
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(0.0),
                        ),
                        color: Colors.pink,
                        onPressed: () ,
                        child: Text('BUY NOW'),
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: InkWell(
                        onTap: () ,
                        child: Container(
                          child: Icon(
                            Icons.favorite,
                            size: 37.0,
                            color: Colors.red,
                          ),
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: InkWell(
                        onTap: () ,
                        child: Container(
                          child: Icon(
                            Icons.shopping_cart,
                            size: 37.0,
                            color: Colors.red,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  

【问题讨论】：

分享代码。

看起来像一个外部小部件（您发布的容器的父级）在底部有一些填充/边距。

如果父小部件填充/边距不是问题，则将脚手架包装在 SafeArea 中并将底部设置为 true。

它不工作

你能把代码分享给父部件吗？

【参考方案1】：

终于找到了你的问题。 问题在于您的“立即购买”按钮！它占据了额外的高度，因此从底部向上可以看到它。 由于您的图标大小为 37，因此最好使用大于 37 的高度。 为父 Container 和 Button 的 Container 设置它。 另外，记下Row 的crossAxisAlignment。 对您的“立即购买”按钮执行类似操作，

    Container(
            width: MediaQuery.of(context).size.width,
            height: 40.0,
            color: Colors.green, 
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: <Widget>[
                Expanded(
                  flex: 5,
                  child: Container(
                    height: 40.0,
                    child: FlatButton(
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(0.0),
                      ),
                      color: Colors.pink,
                      onPressed: () ,
                      child: Text('BUY NOW'),
                    ),
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: InkWell(
                    onTap: () ,
                    child: Container(
                      child: Icon(
                        Icons.favorite,
                        size: 37.0,
                        color: Colors.red,
                      ),
                    ),
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: InkWell(
                    onTap: () ,
                    child: Container(
                      child: Icon(
                        Icons.shopping_cart,
                        size: 37.0,
                        color: Colors.red,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          )

希望这能解决您的问题。