首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何去除肚脐的白色背景(GNav)[颤振]

如何去除肚脐的白色背景(GNav)[颤振]
EN

Stack Overflow用户
提问于 2022-06-28 12:47:42
回答 1查看 89关注 0票数 0

我正在尝试用flutter开发一个移动应用程序。我添加了一个底部导航栏(谷歌的nav_bar)。一切都很完美,但是有白色的矩形背景的容器或导航条,我无法移除它。如果你能帮我,我会很高兴的。

这是我的密码:

代码语言:javascript
复制
class NavigationBarScreen extends StatefulWidget {
  const NavigationBarScreen({Key? key}) : super(key: key);

  @override
  State<NavigationBarScreen> createState() => _NavigationBarScreenState();
}

class _NavigationBarScreenState extends State<NavigationBarScreen> {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
    PageController page_controller = PageController();

    final vals = ['a', 'B', 'c', 'd'];
    int _index = 0;
    final screens = [LoginPage(), SignupPage()];
    return Scaffold(
        body: PageView.builder(
            controller: page_controller,
            itemCount: 4,
            itemBuilder: (context, position) {
              return Container(child: screens[position]);
            }),
        bottomNavigationBar: Padding(
          padding: EdgeInsets.all(8),
          child: ClipRRect(
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(20.0),
                topRight: Radius.circular(20.0),
              ),
              child: Container(
                decoration: const BoxDecoration(
                  //color: Color.fromRGBO(24, 233, 111, 0.35),
                  color: Color.fromRGBO(244, 91, 60, 0.35),
                  borderRadius: BorderRadius.all(Radius.circular(12)),
                ),
                child: GNav(
                  gap: 8,
                  curve: Curves.easeOutExpo,
                  // tab animation curves              curve: Curves.fastOutSlowIn,
                  activeColor: Colors.black,
                  hoverColor: Colors.grey,
                  tabBorderRadius: 6,
                  onTabChange: (index) {
                    setState(() {
                      _index = index;
                    });
                    page_controller.jumpToPage(index);
                  },
                  duration: const Duration(milliseconds: 400),
                  color: const Color(0xEF5350FF),
                  tabs: const [
                    GButton(icon: Icons.home, text: "Mamma"),
                    GButton(icon: Icons.person, text: "Profile"),
                    GButton(icon: Icons.leaderboard, text: "Leaderboard"),
                  ],
                ),
              )),
        ));
  }
}

我想移除这个白色的矩形:

提前谢谢。

EN

回答 1

Stack Overflow用户

发布于 2022-06-28 13:00:37

尝试使用Container代替Padding,并将颜色设置为Colors.transparent,并在Scaffold中使用extendBody: true

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/72786712

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档