Блог

Я хочу перейти на несколько новых страниц, используя нижнюю панель навигации в flutter.

Я попробовал несколько методов, чтобы выполнить свое требование. Но все равно ни один из них не сработал для меня. Я приложил весь свой соответствующий исходный код ниже для лучшего понимания.

Заранее благодарю вас. 🙂

Исходный код Dart :

 class dashboard extends StatefulWidget {  @override  _dashboardState createState() =gt; _dashboardState(); }  // ignore: camel_case_types class _dashboardState extends Statelt;dashboardgt; {  @override  Widget build(BuildContext context) {  final authService = Provider.oflt;AuthServicegt;(context);  return Scaffold(  body: SingleChildScrollView(  child: Column(  children: lt;Widgetgt;[  Padding(  padding: const EdgeInsets.only(top: 80.0, right: 250),  child: Center(  child: Container(  width: 200.0,  height: 20.0,  decoration:  BoxDecoration(borderRadius: BorderRadius.circular(15.0)),  child: (const Text(  'Hello',  textAlign: TextAlign.center,  style: TextStyle(  fontWeight: FontWeight.bold, color: Colors.black),  )),  ),  ),  ),  Padding(  padding: const EdgeInsets.only(top: 20.0),  child: MaterialButton(  onPressed: () {  Navigator.push(context,  MaterialPageRoute(builder: (context) =gt; profile()));  },  child: const Text('Test'),  ),  ),  Padding(  padding: EdgeInsets.only(left: 300.0, top: 10.0),  child: IconButton(  icon: new Icon(Icons.notifications),  onPressed: () {  Navigator.push(  context,  MaterialPageRoute(  builder: (context) =gt; Notifications(),  ),  );  },  ),  ),  Padding(  padding: const EdgeInsets.only(top: 1.0),  child: Center(  child: Container(  width: 390,  height: 450,  decoration: BoxDecoration(  color: Colors.green.shade100,  borderRadius: BorderRadius.circular(10.0)),  ),  ),  ),  ],  ),  ),  floatingActionButton: FloatingActionButton(onPressed: () async {  await authService.signOut();  }),  // : _children[_currentIndex],  bottomNavigationBar: BottomNavigationBar(  type: BottomNavigationBarType.fixed,  items: const [  BottomNavigationBarItem(  icon: Icon(Icons.book_online),  label: 'Page 1',  ),  BottomNavigationBarItem(  icon: Icon(Icons.read_more),  label: 'Page 2',  ),  BottomNavigationBarItem(  icon: Icon(Icons.account_circle),  label: 'Page 3',  ),  ],  ),  );  } }  

Есть много предложений, это одно : во-первых, вы начинаете с добавления индекса переменной, чтобы знать, где вы находитесь. затем добавьте функцию для изменения содержимого этой переменной.

 class _dashboardState extends Statelt; dashboard gt; {    int currentIndex = 1;   changeIndex(index) {  setState(() {  currentIndex = index;  });  }   @override  Widget build(BuildContext context) {  return Scaffold(  body: WillPopScope(  child: (currentIndex == 1)  ? HomeScreen()  : (currentIndex == 2)  ? Screen2()  : (currentIndex == 3)  ? Screen3()  : Settings(),  onWillPop: () async {  bool backStatus = onWillPop();  if (backStatus) {  exit(0);  }  return false;  },  ),  

затем свяжите его с кнопкой на панели навигации.

 bottomNavigationBar: BottomNavigationBar(  type: BottomNavigationBarType.fixed,  items: const [  InkWell(  onTap: () =gt; changeIndex(1),  child: BottomNavigationBarItem(  icon: Icon(Icons.book_online),  label: 'Page 1',  ),  .....  ],  ),