tunitowen/tab_bar_animation

Gap between FancyTabBar and body

Closed this issue · 3 comments

While playing around with adding navigation functionality I noticed that there is gap between the body and the bottom navigation bar. Provided code for example in the screen cap.

untitled

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  int _currentIndex = 0;
  final List<Widget> _children = [
    PlaceholderWidget(Colors.white),
    PlaceholderWidget(Colors.deepOrange),
    PlaceholderWidget(Colors.green),
    PlaceholderWidget(Colors.brown)
  ];

  ///
  /// Prevents the use of the "back" button
  ///
  Future<bool> _onWillPopScope() async {
    return false;
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: _onWillPopScope,
      child: Scaffold(
        backgroundColor: Colors.grey.shade200,
        appBar: AppBar(
          title: Text("HomePage"),
        ),
        bottomNavigationBar: FancyTabBar(onTap: onTabTapped),
        body: _children[_currentIndex],
      ),
    );
  }

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

class PlaceholderWidget extends StatelessWidget {
  final Color color;

  PlaceholderWidget(this.color);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
    );
  }
}

This was a hack project, please use the new library of this...
https://github.com/tunitowen/fancy_bottom_navigation

It is resolved in there.

Perhaps you should update the link on your medium post to point there instead of here