text below circle of the icon

[tounoussiKhalid]

I am looking to implement this :

[rafalbednarczuk]

It's not possible with current version of plugin. Feel free to make pull requests.

[392354412]

It's not possible with current version of plugin. Feel free to make pull requests.

Have you implemented this function now?

[rafalbednarczuk]

It's not possible with current version of plugin. Feel free to make pull requests.

Have you implemented this function now?

No, if you have make pull request

[josephepia]

hello, haven't you created an alternative yet?

sorry for my English

[MstrZeroOne]

It's not possible with the current version of the plugin. Feel free to make pull requests.

I'm looking for this too. This is 2020/17/November. and this issue is from 2019. Did you add this to the plugin?

[rafalbednarczuk]

duplicate of #11

[itsahmed-dev]

I did it. Text disappears when you tap the icon.

Add if condition before Text widget and set the condition to index not question to index of that widget in the list as an integer. That's it.

[Technorocker]

@itsahmed-dev could you share the widget for how you implemented that. I did the condition to index but its still inside the circle and not on the bar itself and when its not selected the text does go away but the icon is shoved up while there is still an "empty" space taking up room.

Thanks ahead of time :)

[itsahmed-dev]

@Technorocker Here is my widget

class CurvedBarItems extends StatelessWidget {
  final int curvedIndex;
  final int index;
  final IconData? icon;
  final String label;
  const CurvedBarItems({
    Key? key,
    required this.index,
    required this.curvedIndex,
    this.icon,
    required this.label,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Icon(icon, size: 30.0),
        if (index != curvedIndex)
          Padding(
            padding: const EdgeInsets.only(top: 8.0),
            child: Text(
              label,
              style: const TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
      ],
    );
  }
}

[Technorocker]

@itsahmed-dev Thank you for sharing. Did you have any problems with the icons being shifted upwards after you used your widget? I implemented it into my navbar but the icons and "shoved" up into the top of the navbar area. I took a screenshot to show you.

[itsahmed-dev]

It looks like you can use some padding. Did you try that?

[Technorocker]

Yes I did thank you, Here is my CurvedBarItems class I ended up with

class CurvedBarItems extends StatelessWidget {
  final int curvedIndex;
  final int index;
  final IconData? icon;
  final String label;
  const CurvedBarItems({
    Key? key,
    required this.index,
    required this.curvedIndex,
    this.icon,
    required this.label,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        if (index != curvedIndex) const SizedBox(height: 15),
        Icon(icon, size: index == 1 && curvedIndex == 1 ? 40.0 : 30.0),
        if (index != curvedIndex)
          Padding(
            padding: const EdgeInsets.only(top: 8.0),
            child: Text(
              label,
              style: const TextStyle(
                color: kPrimaryColor,
                fontWeight: FontWeight.bold,
                fontSize: 20,
              ),
            ),
          ),
      ],
    );
  }
}

Thanks for the tips.