我如何使转换容器的保证金透明

时间:2019-02-06 22:44:10

标签: flutter flutter-layout

我一直在屏幕快照中附加的该UI上进行操作,其中底部的导航栏工作正常,但是我想知道如何使容器的边缘不可见。 ScreenShot的链接-> https://imgur.com/A1muODg

Widget build(BuildContext context) {
  final ThemeData theme = Theme.of(context);
  return Stack(
    alignment: Alignment.topCenter,
      children: <Widget>[
      Container(
        height: 65,
        margin: EdgeInsets.only(top: 45), //This is causing the issue
        decoration: BoxDecoration(
          color: theme.bottomAppBarColor,
          boxShadow: [
            BoxShadow(
                color: theme.highlightColor,
                offset: Offset(0, -1),
                blurRadius: 8),
          ],
        ),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            TabItem(
              selected: currentSelected == 0,
              iconData: Icons.home,
              title: 'Home',
              callbackFunction: () {
                setState(() {
                  nextIcon = Icons.home;
                  currentSelected = 0;
                });
                _initAnimationAndStart(_positionAnimation.value, -1);
              },
            ),
            TabItem(
                selected: currentSelected == 1,
                iconData: Icons.search,
                title: "Search",
                callbackFunction: () {
                  setState(() {
                    nextIcon = Icons.search;
                    currentSelected = 1;
                  });
                  _initAnimationAndStart(_positionAnimation.value, 0);
                }),
            TabItem(
                selected: currentSelected == 2,
                iconData: Icons.settings,
                title: "Settings",
                callbackFunction: () {
                  setState(() {
                    nextIcon = Icons.person;
                    currentSelected = 2;
                  });
                  _initAnimationAndStart(_positionAnimation.value, 1);
                }),
          ],
        ),
      ),
      IgnorePointer(
        child: Container(
          decoration: BoxDecoration(color: Colors.transparent),
          child: Align(
            heightFactor: 1,
            alignment: Alignment(_positionAnimation.value, 0),
            child: FractionallySizedBox(
              widthFactor: 1 / 3,
              child: Stack(
                alignment: Alignment.center,
                children: <Widget>[
                  SizedBox(
                    height: 90,
                    width: 90,
                    child: ClipRect(
                        clipper: HalfClipper(),
                        child: Container(
                          child: Center(
                            child: Container(
                                width: 70,
                                height: 70,
                                decoration: BoxDecoration(
                                    color: theme.bottomAppBarColor,
                                    shape: BoxShape.circle,
                                    boxShadow: [
                                      BoxShadow(
                                          color: theme.highlightColor,
                                          blurRadius: 8)
                                    ])),
                          ),
                        )),
                  ),
                  SizedBox(
                      height: 70,
                      width: 90,
                      child: CustomPaint(
                        painter:
                            HalfPainter(canvasColor: theme.bottomAppBarColor),
                      )),
                  SizedBox(
                    height: 60,
                    width: 60,
                    child: Container(
                      decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: theme.cursorColor,
                          border: Border.all(
                              color: theme.cardColor,
                              width: 5,
                              style: BorderStyle.none)),
                      child: Padding(
                        padding: const EdgeInsets.all(0.0),
                        child: Opacity(
                          opacity: iconAlpha,
                          child: Icon(
                            activeIcon,
                            color: theme.bottomAppBarColor,
                          ),
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    ],
  );
}

要使该用户界面整洁,以便使底部导航栏以外的所有内容都变高,并且不会干扰背景卡的布局

enter image description here

0 个答案:

没有答案
相关问题