swipe

[neilgoyal]

is it possible to add swipe pages with his bar. if yes please tell how

[neilgoyal]

@rickywen911

[rickywen911]

@Neildagr8 I am not quite understand what is swipe pages. Would you mind show me some examples?

[neilgoyal]

I mean the ability to swipe and change pages

[rickywen911]

@Neildagr8 I see. What you mean is combine this bar with a tab controller?

[neilgoyal]

Yes

[rickywen911]

@Neildagr8 I think it's possible. There is parameter in navigation bar called currentIndex. All you need to do is when the index of tabcontroller has changed, change the currentIndex at the same time.

[neilgoyal]

@rickywen911 I have used that, but whenever I swipe and change the page, the Selected Icon updates after a very long time

[rickywen911]

@Neildagr8 Would you mind send me a sample code to try it out?

[SilkeNL]

This is how I've done it. Sorry for the terrible format.

` class MainScreenState extends State {
final _controller = PageController(initialPage: initialPage);
int _activeIndex = initialPage;

Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF279B40),
extendBody: true,
bottomNavigationBar: Stack(
alignment: AlignmentDirectional.bottomCenter,
overflow: Overflow.visible,
children: [
SizedBox(
height: MediaQuery.of(context).size.height / 18.4,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xFF279B40), Color(0xFF7FCC27)])),
),
),
Positioned(
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
spreadRadius: 0,
blurRadius: 100,
offset: Offset(0, 0),
),
],
),

            child: CustomNavigationBar(
              elevation: 5.0,
              selectedColor: Colors.grey[600],
              strokeColor: Colors.grey[600],
              unSelectedColor: Colors.grey[400],
              backgroundColor: Colors.white,
              borderRadius: Radius.circular(16.0),
              isFloating: true,
              items: [
                CustomNavigationBarItem(
                  icon: Icon(Icons.notifications),
                  title: Text(
                    "Alerts",
                    style: TextStyle(
                        fontSize: 12, fontWeight: FontWeight.w600),
                  ),
                ),
                CustomNavigationBarItem(
                  icon: Icon(Icons.widgets),
                  title: Text(
                    "Dashboard",
                    style: TextStyle(
                        fontSize: 12, fontWeight: FontWeight.w600),
                  ),
                ),
                CustomNavigationBarItem(
                  icon: Icon(Icons.person),
                  title: Text(
                    "Profile",
                    style: TextStyle(
                        fontSize: 12, fontWeight: FontWeight.w600),
                  ),
                ),
              ],
              currentIndex: _activeIndex,
              onTap: (page) {
                _controller.animateToPage(
                  page,
                  duration: const Duration(milliseconds: 250),
                  curve: Curves.fastOutSlowIn,
                );
              },
            ),
          ),
        ),
      ],
    ),
    body: Container(
        child: PageView(
      controller: _controller,

      scrollDirection: Axis.horizontal,
      physics: const AlwaysScrollableScrollPhysics(),
      onPageChanged: (value) => {
        setState(() {
          _activeIndex = value;
        })
      },
      //Your different pages
      children: [AlertingPage(), DashboardPage(), profileScreenBloc()],
    )));

}
} `