Make text on BottomNavigationBarItem optional

Hello,

Many apps have a bottom navigation bar that showcases icons, but no text (E.g. Instagram). I think this would be very useful to have in the Material library.

You can (kind of) emulate it by mixing Material & Cupertino widgets, but it's an imperfect solution.

Could you pass in a empty string?

new Text (""),

@AppleEducate

@AppleEducate You can, but the padding/margin remains, causing the icons to be small & off-center.

@harrisonturton

@harrisonturton Could you add new Container(height: 0.0,) instead?

or this: #3783

@AppleEducate

@AppleEducate putting new Container(height: 0.0) is significantly better, but there is still surplus padding on the bottom.

To get around this issue, (and to simplify using bottom navigation -- the examples are so complex!) I've built this little widget:

import 'package:flutter/material.dart';

class BottomNavigation extends StatefulWidget<_BottomNavigationState> {
	BottomNavigation({
		this.children,
		this.items,
		this.fadeDuration
	});
	final List<Widget> children;
	final List<Widget> items;
	final Duration fadeDuration;

	_BottomNavigationState createState() => new _BottomNavigationState();
}

class _BottomNavigationState extends State<BottomNavigation> with TickerProviderStateMixin {

	int _currentIndex = 0;
	int _prevIndex = 1;
	List<Widget> _items;

	@override
	void initState() {
		super.initState();
		_items = List.generate(widget.items.length, (i) {
			return new InkWell(
				onTap: () => _changePage(i),
				child: widget.items[i]
			);
		});
	}

	void _changePage(int index) {
		if (index == _currentIndex) return;
		setState(() {
			this._prevIndex = _currentIndex;
			this._currentIndex = index;
		});
	}

	List<Widget> _buildTransitions() => List.generate(
		widget.children.length,
		(int i) => new AnimatedOpacity(
			opacity: _currentIndex == i ? 1.0 : 0.0,
			duration: widget.fadeDuration == null ? new Duration(milliseconds: 150) : widget.fadeDuration,
			child: widget.children[i]
		)
	).toList();

	Widget build(BuildContext context) {
		return new Scaffold(
			body: new Stack(
				children: _buildTransitions()
			),
			bottomNavigationBar: new Row(
				mainAxisAlignment: MainAxisAlignment.spaceAround,
				children: _items
			)
		);
	}
}

children are the different pages, and items are the items within the bottom nav bar. It'll fade transition between each page -- I've found it very useful.

I am facing similar issue. I have tried this new Container(height: 0.0) but there is still surplus padding on the bottom.

Seriously BottomNavigationBar should be implemented like the example above.

Significantly easier and more flexible.

@HansMuller

@HansMuller

Seems reasonable. Feel free to send us a PR.

@willlarche

Big thanks for @artrmz for sending us a PR to make the text component of tabs optional for the Cupertino tab bar #22804.

For Material, since it's explicitly against its specs to not have a tab label (https://material.io/design/components/bottom-navigation.html#anatomy), redirecting the remaining Material part to @willlarche for the Material specs.

The PR is still incomplete. #22956

I achieved no labels using a column -> tab bar -> tab bar view combination. But it does not have options for activeIcon and inactiveIcon.
I want to use this in Scaffold's bottom navigation bar so using anything other than BottomNavigationBarItem is kind of out of the question.

Also, with having so many types of navigation bars and paging views that all do almost the same things in different contexts is quite confusing. There should have been a lower level of abstraction for this so that we could have more control and decide how these bars will behave.

Also this stackoverflow answer...
https://stackoverflow.com/questions/40183239/remove-bottomnavigationview-labels

I don't know why it is taking so much time to add this feature. It looks simple to implement.

If you read the comments you'll realise that the text is compulsory according to Material specification.

Also, I'm actually using a customised CupertinoBar if anyone wants to go down that route.

I'm using BottomAppBar to achieve this BottomNavigationBarItem without label

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: body,
      bottomNavigationBar: new BottomAppBar(
          child: new Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              IconButton(
                  icon: Icon(Icons.home),
                  disabledColor: Colors.green,
                  onPressed: _currentIndex == 0
                      ? null
                      : () => setState(() => _currentIndex = 0)),
              IconButton(
                  icon: Icon(Icons.notifications),
                  disabledColor: Colors.green,
                  onPressed: _currentIndex == 1
                      ? null
                      : () => setState(() => _currentIndex = 1)),
              IconButton(
                  icon: Icon(Icons.settings),
                  disabledColor: Colors.green,
                  onPressed: _currentIndex == 2
                      ? null
                      : () => setState(() => _currentIndex = 2)),
            ],
          )
      ),//bottomAppBar
    );
  }

@alann-maulana

Nicely done @alann-maulana - works so far.

Text("",style: TextStyle(fontSize: 0),)
simply solved it

flutter-team-archive/engine@2d42c74...d7ad50c

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Make text on BottomNavigationBarItem optional #17099

6 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Make text on BottomNavigationBarItem optional #17099

Description

Activity

rodydavis commented on May 1, 2018

harrisonturton commented on May 1, 2018

rodydavis commented on May 1, 2018

harrisonturton commented on May 2, 2018

rafiqulhasanrony commented on May 9, 2018

threeseed commented on Jun 10, 2018

zoechi commented on Jun 12, 2018

xster commented on Jul 11, 2018

farukzahra commented on Jul 24, 2018

hendricgc commented on Aug 20, 2018

psyanite commented on Oct 1, 2018

IshanFx commented on Oct 9, 2018

xster commented on Oct 16, 2018

6 remaining items

willlarche commented on Dec 28, 2018

raveesh-me commented on Jan 31, 2019

raveesh-me commented on Jan 31, 2019

pedromassango commented on Jan 31, 2019

psyanite commented on Jan 31, 2019

psyanite commented on Jan 31, 2019

alann-maulana commented on Feb 7, 2019

dkobia commented on Feb 13, 2019

mohamedkarim77 commented on Nov 14, 2019

github-actions commented on Aug 15, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions