CODEWITHSUNDEEP
androidflutterdart
lukman azhari
lukman azhari

Reputation: 141

flutter - curved_navigation_bar setting navigation page

good afternoon, i'm new in flutter, i'm trying to use curved_navigation_bar, but i'm confused how to set the page navigation, this is my code, index 0 will go to news.dart page, index 1 will go to cells.dart page, index 2 will go to home.dart page, index 3 goes to book.dart page, index 4 goes to info.dart page, The first page that appears is index 2, thank you

    import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:statistik_malang/body.dart';
import 'package:statistik_malang/constants.dart';

class HomeScreen extends StatefulWidget {
  // const HomeScreen({ Key? key }) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(),
      body: Body(),
      extendBody: true,
      bottomNavigationBar: CurvedNavigationBar(
        backgroundColor: Colors.transparent,
        buttonBackgroundColor: kPrimaryColor,
        animationDuration: Duration(milliseconds: 300),
        height: 50,
        items: <Widget>[
          SvgPicture.asset(
            "assets/icons/news.svg",
            width: 20.0,
            height: 20.0,
          ),
          SvgPicture.asset(
            "assets/icons/cells.svg",
            width: 20.0,
            height: 20.0,
          ),
          SvgPicture.asset(
            "assets/icons/home.svg",
            width: 20.0,
            height: 20.0,
          ),
          SvgPicture.asset(
            "assets/icons/book.svg",
            width: 20.0,
            height: 20.0,
          ),
          SvgPicture.asset(
            "assets/icons/information.svg",
            width: 20.0,
            height: 20.0,
          ),
        ],
        onTap: (index) {},
      ),
    );
  }
}

Upvotes: 1

Views: 595

Answers (1)

Jahidul Islam
Jahidul Islam

Reputation: 12575

Just add navigationKey and start index with 0, it will be solved

Edited:

class _HomeScreenState extends State<HomeScreen> {
  int _page = 0;
  GlobalKey<CurvedNavigationBarState> _bottomNavigationKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(),
      body: Container(
          color: Colors.blueAccent,
          child: Center(
            child: Column(
              children: <Widget>[
                Text(_page.toString(), textScaleFactor: 10.0),
              ],
            ),
          )),
      extendBody: true,
      bottomNavigationBar: CurvedNavigationBar(
        key: _bottomNavigationKey,
        backgroundColor: Colors.transparent,
        // buttonBackgroundColor: kPrimaryColor,
        animationDuration: Duration(milliseconds: 300),
        height: 50,
        index: 0,
        items: <Widget>[
         
           SvgPicture.asset(
            "assets/icons/news.svg",
            width: 20.0,
            height: 20.0,
          ),
          SvgPicture.asset(
            "assets/icons/cells.svg",
            width: 20.0,
            height: 20.0,
          ),
          SvgPicture.asset(
            "assets/icons/home.svg",
            width: 20.0,
            height: 20.0,
          ),
          SvgPicture.asset(
            "assets/icons/book.svg",
            width: 20.0,
            height: 20.0,
          ),
          SvgPicture.asset(
            "assets/icons/information.svg",
            width: 20.0,
            height: 20.0,
          ),
        ],
        onTap: (index) {
          setState(() {
            _page = index;
          });
        },
      ),
    );
  }
}

Upvotes: 0

Related Questions