标签: flutter-bottomnavigation

由于Google stadia 应用程序是用 flutter 制作的，我想知道他们是如何在 BottomNavigationBar 上实现更漂亮的涟漪动画的。

例子：

他们是如何实现自定义涟漪动画的？

编辑：简单的自定义BottomNavigationItem：

bottomNavigationBar: Container(
      height: 50,
      child: Row(
        children: <Widget>[
          Expanded(
            child: BottomItem(),
          ),
          Expanded(
            child: BottomItem(),
          ),
          Expanded(
            child: BottomItem(),
          ),
        ],
      )),

class BottomItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {},
      child: Center(child: Icon(Icons.shop)),
    );
  }
}

我正在尝试使用底部导航栏中的图标导航到我的应用程序中的不同页面。我已经尝试了很多教程，但似乎无法找到实现这一目标的最佳方法。我已经创建了我的主页（下面的代码）和 2 个附加页面，收件箱和登录，都返回简单的脚手架。

首先，我想知道这是否是我想要实现的最佳方式，其次，如何更改我的代码以允许我根据点击的图标导航到不同的页面。我知道下面的代码没有执行，我只是想展示我已经尝试过的东西。

我的代码：

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  _onTap(int index) {
    Navigator.of(context)
        .push(MaterialPageRoute<Null>(builder: (BuildContext context) {
      return _children[_currentIndex];
    }));}

  final List<Widget> _children = [
    HomePage(),
    InboxPage(),
    SignInPage()
  ];

  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
      SizeConfig().init(context);
      return Scaffold(
        appBar: PreferredSize(preferredSize: Size(double.infinity, 75),
          child: AppBar(
              elevation: 0.0,
              centerTitle: false,
              title: Column(
                children: <Widget>[
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      currentDate,
                      textAlign: TextAlign.left,
                      style: TextStyle(
                          color: titleTextColor,
                          fontWeight: …

我创建了一个带有颤动的自定义底部导航栏。但我仍然可以看到白色填充了弯角后面的背景。我想看看背景内容。

这就是底部导航栏的样子。

正如你所看到的，角落里充满了白色。

这是我的底部导航栏代码。

bottomNavigationBar: Container(
      decoration: BoxDecoration(
        color: Colors.transparent,
        backgroundBlendMode: BlendMode.clear,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(18),
          topRight: Radius.circular(18),
        ),
        boxShadow: [
          BoxShadow(color: Colors.black38, spreadRadius: 0, blurRadius: 10),
        ],
      ),
      height: MediaQuery.of(context).size.height * 0.085,
      child: ClipRRect(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(18.0),
          topRight: Radius.circular(18.0),
        ),
        child: BottomNavigationBar(
          backgroundColor: Color(0xFFF0B50F),
          type: BottomNavigationBarType.fixed,
          selectedLabelStyle: TextStyle(fontSize: 12),
          items: [
            BottomNavigationBarItem(),
            BottomNavigationBarItem(),
            BottomNavigationBarItem(),
            BottomNavigationBarItem(),
            BottomNavigationBarItem(),
          ],
          currentIndex: _selectedPage,
          selectedItemColor: Colors.black,
          onTap: _onItemTapped,
        ),
      ),
    ),

我尝试将容器的颜色设置为透明。但这没有用。

如果我长按底部导航栏项目的某个项目，那么它将显示一个弹出窗口/吐司及其项目的标题（上图中的收件箱弹出窗口）。我想禁用该行为，该怎么做？

这是我当前的底部导航栏

BottomNavigationBar(
        onTap: _selectPage,
        elevation: 2,
        backgroundColor: const Color.fromRGBO(245, 245, 245, 1),
        unselectedItemColor: Colors.grey,
        selectedItemColor: Theme.of(context).primaryColor,
        currentIndex: _selectedPageIndex,
        showSelectedLabels: false,
        showUnselectedLabels: false,
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home_outlined),
            label: "Home",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: "Search",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.add_circle_outline),
            label: "create",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.notifications_none),
            label: "Inbox",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person_outline),
            label: "Profile",
          ),
        ],
      ),
    

该应用程序包含 TabBar 和 BottomNavigationBar。当我尝试在选项卡栏视图的主体内导航时，它会全屏导航。

这是我点击按钮时想要得到的结果 - 预期结果

但我得到这个 电流输出

这里我附上了代码-

 Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            title: new Text("Traveler"),
            bottom: new TabBar(controller: _controller, tabs: <Tab>[
              new Tab(text: "NEW"),
              new Tab(text: "HOTELS"),
              new Tab(text: "FOOD"),
              new Tab(text: "FUN"),
            ]),
          ),
          body: new TabBarView(
            controller: _controller,
            children: <Widget>[
              new NewPage(_index),
              new HotelsPage(_index),
              new FoodPage(_index),
              new FunPage(_index),
            ],
          ),
          bottomNavigationBar: new BottomNavigationBar(
              currentIndex: _index,
              onTap: (int _index) {
                setState(() {
                  this._index = _index;
                });
              },
              items: <BottomNavigationBarItem>[
                new BottomNavigationBarItem( …

当我尝试更改 TextStyle 时，它​​显示“参数类型“文本”无法分配给参数类型“字符串”。” 我怎样才能改变它？

\n
1. 我正在使用凸面底部栏 3.0.0
\n
2. 如果我犯了错误，请原谅我的英语
\n

 bottomNavigationBar: ConvexAppBar(\n          items: [\n            TabItem(icon: Icons.touch_app_rounded, title: Text("Tab1",style: TextStyle(fontFamily: "iransans"),)),\n            TabItem(icon: Icons.store_rounded, title: 'Ma\xc4\x9faza'),\n            TabItem(icon: Icons.developer_board_rounded, title: 'Sim\xc3\xbclasyon'),\n            TabItem(icon: Icons.timeline_rounded, title: '\xc4\xb0statistik'),\n            TabItem(icon: Icons.view_week_rounded, title: 'Di\xc4\x9fer'),\n          ],\n          gradient: LinearGradient(\n            colors: [Color(0xFFEC407A),\n              Color(0XFF1A237E)],\n            begin: Alignment.bottomCenter,\n            stops: [\n              0.0,0.4\n            ],\n            end: Alignment.topCenter,\n          ),\n          height: 70,\n          backgroundColor: Color(0xFFEC407A),\n          //backgroundColor: Colors.white,\n          activeColor: Colors.white,\n          initialActiveIndex: 0,//optional, default as 0\n          onTap: (int i) => print('click index=$i'),\n        ),\n

这是我的代码。准确地说，底部导航栏溢出了 12 和 26 像素。有解决办法吗？ ** 尝试了各种方法。我还创建了自定义底部导航栏小部件并将其放置在扩展小部件下方。我收到同样的错误（溢出值不同）。现在，我正在使用一个名为 ScrollBottomNavigationBar 的 flutter 包。

import 'package:flutter/material.dart';
import 'package:justchat/components/bottom_navigation_bar.dart';
import 'package:justchat/components/input_box.dart';
import 'package:justchat/constants.dart';
import 'package:justchat/screens/login_screen.dart';
import 'package:scroll_bottom_navigation_bar/scroll_bottom_navigation_bar.dart';

class HomeScreen extends StatelessWidget {
  final controller = ScrollController();
  final items = <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(
        Icons.home,
        size: 10,
      ),
      label: ("Home"),
    ),
    BottomNavigationBarItem(
      icon: Icon(
        Icons.settings,
      ),
      label: ("Settings"),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: ClipRRect(
        borderRadius: BorderRadius.only(
          topRight: Radius.circular(30),
          topLeft: Radius.circular(30),
        ),
        child: Wrap(
          children: [
            ScrollBottomNavigationBar(
              controller: controller,
              items: items, …

在颤动中使用底部导航栏中的三个图标时，我想移动到三个新页面（根据下面的代码）。我尝试了多种方法，但代码不起作用，也无法按照我的要求弄清楚。

在这种情况下，最重要的是使用现有代码并使用底部导航栏更改移动到新页面所需的更改。

如果有人知道如何使用底部导航栏（使用我现有的代码）导航到新页面，请告诉我。

先感谢您。

代码：

class dashboard extends StatefulWidget {
  @override
  _dashboardState createState() => _dashboardState();
}

// ignore: camel_case_types
class _dashboardState extends State<dashboard> {
  int currentIndex = 1;

  changeIndex(index) {
    setState(() {
      currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    final authService = Provider.of<AuthService>(context);
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(top: 80.0, right: 250),
              child: Center(
                child: Container(
                  width: 200.0,
                  height: 20.0,
                  decoration:
                      BoxDecoration(borderRadius: BorderRadius.circular(15.0)),
                  child: (const Text(
                    'Hello',
                    textAlign: TextAlign.center,
                    style: TextStyle( …

我想删除 BottomNavigationBar 顶部的行，以便图标看起来是主屏幕的一部分。

但是我找不到任何方法来删除底部导航栏的边框。

  bottomNavigationBar: BottomNavigationBar(
    onTap: onTabTapped,
    currentIndex: _currentIndex,
    backgroundColor: Colors.cyan[50],
    selectedItemColor: Colors.cyan[900],
    unselectedItemColor: Colors.grey[700],
    type: BottomNavigationBarType.fixed,
    items: [
      ..._tabItems.map((item) =>
          BottomNavigationBarItem(icon: item.icon, title: Text(item.title)))
    ],
  ),

我怎样才能删除这条线？