flutter bottomNavigationBar:BottomAppBar在iPhone它不能完全填充,从底部屏幕

unftdfkk  于 2023-05-23  发布在  Flutter
关注(0)|答案(4)|浏览(265)

**在Android中它是完美的播种,但iPhone它不是从底部完全填充。**请检查底部:bottomNavigationBar部分代码........flutter bottomNavigationBar:BottomAppBar在iPhone它不能完全填充,从底部我的代码是

import 'package:country_pickers/country.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:country_pickers/country_pickers.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../../../authentication/presentation/views/otp_login_verifecation.dart';

class homeScreen extends StatefulWidget {
  const homeScreen({
    Key? key,
  }) : super(key: key);

  @override
  State<homeScreen> createState() => _MyhomeScreen();
}

class _MyhomeScreen extends State<homeScreen> {
  Country _selectedFilteredDialogCountry =
      CountryPickerUtils.getCountryByPhoneCode('91');
  TextEditingController _phone = TextEditingController();

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, designSize: const Size(360, 800));
    var platform = Theme.of(context).platform;
    final screenW = MediaQuery.of(context).size.width;
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Column(
            children: <Widget>[
              Row(
                children: [
                  Container(
                    margin: EdgeInsets.only(
                      top: ScreenUtil().setHeight(35),
                      left: ScreenUtil().setWidth(12),
                    ),
                    width: ScreenUtil().setWidth(46),
                    height: ScreenUtil().setHeight(46),
                    decoration: BoxDecoration(
                      color: const Color(0xff7c94b6),
                      image: DecorationImage(
                        image: AssetImage("assets/profile/profile.png"),
                        fit: BoxFit.fitHeight,
                      ),
                      borderRadius: BorderRadius.all(Radius.circular(50.0)),
                      border: Border.all(
                        color: Colors.greenAccent,
                        width: 2.0.w,
                      ),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(
                      top: ScreenUtil().setHeight(30),
                      left: ScreenUtil().setWidth(12),
                    ),
                    width: ScreenUtil().setWidth(81),
                    height: ScreenUtil().setHeight(45),
                    child: RichText(
                      text: TextSpan(
                        text: 'Vishal\n',
                        style: TextStyle(
                            fontSize: 24.sp,
                            color: Color(0xff480377),
                            fontWeight: FontWeight.w700,
                            fontFamily: "roboto"),
                        children: <TextSpan>[
                          TextSpan(
                            text: 'Global Rank: ',
                            style: TextStyle(
                              color: Color(0xff480377).withOpacity(0.30.sp),
                              fontSize: 12,
                              fontFamily: "roboto",
                            ),
                          ),
                          TextSpan(
                              text: '21',
                              style: TextStyle(
                                  fontWeight: FontWeight.w100,
                                  fontSize: 12.sp)),
                        ],
                      ),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(
                      top: ScreenUtil().setHeight(45),
                      left: ScreenUtil().setWidth(145),
                    ),
                    width: ScreenUtil().setWidth(30),
                    height: ScreenUtil().setHeight(30),
                    decoration: const BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage("assets/home/menu-vector.png"),
                        fit: BoxFit.fill,
                      ),
                    ),
                  ),

                ],
              ),
            ],
          ),

        ],
      ),
      //bottom:bottomNavigationBar ---------------------------------------------------
      bottomNavigationBar: BottomAppBar(
          child: Container(
            // margin: EdgeInsets.only(top:ScreenUtil().setHeight(60),),
            height: ScreenUtil().setHeight(51),
            // width: ScreenUtil().setWidth(365),
            color: Color(0xFFEFEFEF),
            child: Row(
                // mainAxisSize: MainAxisSize.max,
                // mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  FlatButton(
                    padding: EdgeInsets.only(top:ScreenUtil().setHeight(5),),
                    onPressed: () {
                      Navigator.of(context).push(MaterialPageRoute(
                          builder: (context) =>
                              OtpLoginVerifecation(phone: _phone.text, country_code: _selectedFilteredDialogCountry.phoneCode,)));
                    },

                      child: Column(
                        children: <Widget>[
                          ImageIcon(
                            AssetImage("assets/home/fi-sr-home.png"),size: 40.sp,
                            color: Color(0xFF6500DF),
                          ),
                          // Icon(Icons.home),
                          // Text('Home')
                        ],
                      ),

                  ),
                  Container(color: Color(0xFF000000).withOpacity(0.10.sp), width: 1.w,),
                  FlatButton(
                    padding: EdgeInsets.only(top:ScreenUtil().setHeight(5)),
                    onPressed: () {},
                    child: Column(
                      children: <Widget>[
                        ImageIcon(
                          AssetImage("assets/home/fi-sr-shopping-cart.png"),size: 40.sp,
                          color: Color(0xFF6500DF),
                        ),
                        // Icon(Icons.home),
                        // Text('Home')
                      ],
                    ),
                  ),
                  Container(color: Color(0xFF000000).withOpacity(0.10.sp), width: 1.w,),
                  FlatButton(
                    padding: EdgeInsets.only(top:ScreenUtil().setHeight(5)),
                    onPressed: () {},
                    child: Column(
                      children: <Widget>[
                        ImageIcon(
                          AssetImage("assets/home/fi-sr-credit-card.png"),size: 40.sp,
                          color: Color(0xFF6500DF),
                        ),
                        // Icon(Icons.home),
                        // Text('Home')
                      ],
                    ),
                  ),
                  Container(color: Color(0xFF000000).withOpacity(0.10.sp), width: 1.w,),
                  FlatButton(
                    padding: EdgeInsets.only(top:ScreenUtil().setHeight(5)),
                    onPressed: () {},
                    child: Column(
                      children: <Widget>[
                        ImageIcon(
                          AssetImage("assets/home/TBD.png"),size: 40.sp,
                          color: Color(0xFF6500DF),
                        ),
                        // Icon(Icons.home),
                        // Text('Home')
                      ],
                    ),
                  ),
                ]
            ),
          )
      ),
    );
  }
}

**在android它是播种完美的,但iPhone它不是从底部充满。***请检查bottom:bottom NavigationBar部分代码.........**flutter bottom NavigationBar:BottomAppBar在iPhone中无法完全填充,从按钮

4uqofj5v

4uqofj5v1#

默认情况下,BottomAppBar有一个安全区域。您可能会使用BottomNavigationBar或创建自定义小部件。验证码:这就是bottomAppBar将返回的内容

PhysicalShape(
      clipper: clipper,
      elevation: elevation,
      color: effectiveColor,
      clipBehavior: widget.clipBehavior,
      child: Material(
        key: materialKey,
        type: MaterialType.transparency,
        child: widget.child == null
          ? null
          : SafeArea(child: widget.child!),//safe area is here
      ),
    )
deikduxw

deikduxw2#

不是这个问题的确切答案,但将Scaffold中的backgroundColor设置为与BottomAppBar中的相同,然后将BottomAppBar中的elevation设置为零,给人的印象是BottomAppBar延伸到底部。

3qpi33ja

3qpi33ja3#


我会解决它。创建自定义导航栏方法

import 'package:country_pickers/country.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:country_pickers/country_pickers.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../../../authentication/presentation/views/otp_login_verifecation.dart';

class homeScreen extends StatefulWidget {
  const homeScreen({
    Key? key,
  }) : super(key: key);

  @override
  State<homeScreen> createState() => _MyhomeScreen();
}

class _MyhomeScreen extends State<homeScreen> {
  Country _selectedFilteredDialogCountry =
      CountryPickerUtils.getCountryByPhoneCode('91');
  TextEditingController _phone = TextEditingController();

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, designSize: const Size(360, 800));
    var platform = Theme.of(context).platform;
    final screenW = MediaQuery.of(context).size.width;
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Column(
            children: <Widget>[
              Row(
                children: [
                  Container(
                    margin: EdgeInsets.only(
                      top: ScreenUtil().setHeight(35),
                      left: ScreenUtil().setWidth(12),
                    ),
                    width: ScreenUtil().setWidth(46),
                    height: ScreenUtil().setHeight(46),
                    decoration: BoxDecoration(
                      color: const Color(0xff7c94b6),
                      image: DecorationImage(
                        image: AssetImage("assets/profile/profile.png"),
                        fit: BoxFit.fitHeight,
                      ),
                      borderRadius: BorderRadius.all(Radius.circular(50.0)),
                      border: Border.all(
                        color: Colors.greenAccent,
                        width: 2.0.w,
                      ),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(
                      top: ScreenUtil().setHeight(30),
                      left: ScreenUtil().setWidth(12),
                    ),
                    width: ScreenUtil().setWidth(81),
                    height: ScreenUtil().setHeight(45),
                    child: RichText(
                      text: TextSpan(
                        text: 'Vishal\n',
                        style: TextStyle(
                            fontSize: 24.sp,
                            color: Color(0xff480377),
                            fontWeight: FontWeight.w700,
                            fontFamily: "roboto"),
                        children: <TextSpan>[
                          TextSpan(
                            text: 'Global Rank: ',
                            style: TextStyle(
                              color: Color(0xff480377).withOpacity(0.30.sp),
                              fontSize: 12,
                              fontFamily: "roboto",
                            ),
                          ),
                          TextSpan(
                              text: '21',
                              style: TextStyle(
                                  fontWeight: FontWeight.w100,
                                  fontSize: 12.sp)),
                        ],
                      ),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(
                      top: ScreenUtil().setHeight(45),
                      left: ScreenUtil().setWidth(145),
                    ),
                    width: ScreenUtil().setWidth(30),
                    height: ScreenUtil().setHeight(30),
                    decoration: const BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage("assets/home/menu-vector.png"),
                        fit: BoxFit.fill,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
      //bottom:bottomNavigationBar ---------------------------------------------------
      bottomNavigationBar: buildMyNavBar(context),
    );
  }

  Container buildMyNavBar(BuildContext context) {
    return Container(
      height: 60.h,
      decoration: const BoxDecoration(
        color: Color(0xFFEFEFEF),
        // borderRadius: const BorderRadius.only(
        //   topLeft: Radius.circular(20),
        //   topRight: Radius.circular(20),
        // ),
      ),
      child: Row(
          // mainAxisSize: MainAxisSize.max,
          // mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            FlatButton(
              padding: EdgeInsets.only(
                top: ScreenUtil().setHeight(5),
              ),
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(
                    builder: (context) => OtpLoginVerifecation(
                          phone: _phone.text,
                          country_code:
                              _selectedFilteredDialogCountry.phoneCode,
                        )));
              },
              child: Column(
                children: <Widget>[
                  ImageIcon(
                    AssetImage("assets/home/fi-sr-home.png"),
                    size: 40.sp,
                    color: Color(0xFF6500DF),
                  ),
                  // Icon(Icons.home),
                  // Text('Home')
                ],
              ),
            ),
            Container(
              color: Color(0xFF000000).withOpacity(0.10.sp),
              width: 1.w,
            ),
            FlatButton(
              padding: EdgeInsets.only(top: ScreenUtil().setHeight(5)),
              onPressed: () {},
              child: Column(
                children: <Widget>[
                  ImageIcon(
                    AssetImage("assets/home/fi-sr-shopping-cart.png"),
                    size: 40.sp,
                    color: Color(0xFF6500DF),
                  ),
                  // Icon(Icons.home),
                  // Text('Home')
                ],
              ),
            ),
            Container(
              color: Color(0xFF000000).withOpacity(0.10.sp),
              width: 1.w,
            ),
            FlatButton(
              padding: EdgeInsets.only(top: ScreenUtil().setHeight(5)),
              onPressed: () {},
              child: Column(
                children: <Widget>[
                  ImageIcon(
                    AssetImage("assets/home/fi-sr-credit-card.png"),
                    size: 40.sp,
                    color: Color(0xFF6500DF),
                  ),
                  // Icon(Icons.home),
                  // Text('Home')
                ],
              ),
            ),
            Container(
              color: Color(0xFF000000).withOpacity(0.10.sp),
              width: 1.w,
            ),
            FlatButton(
              padding: EdgeInsets.only(top: ScreenUtil().setHeight(5)),
              onPressed: () {},
              child: Column(
                children: <Widget>[
                  ImageIcon(
                    AssetImage("assets/home/TBD.png"),
                    size: 40.sp,
                    color: Color(0xFF6500DF),
                  ),
                  // Icon(Icons.home),
                  // Text('Home')
                ],
              ),
            ),
          ]),
    );
  }
}
gwbalxhn

gwbalxhn4#

safeArea可能会导致问题,您可以禁用它。这就是我的代码的解决方案。但是,您应该考虑这个解决方案是否适合您;使用safeArea是一个很好的做法。检查此discussion

相关问题