Flutter navigate with an ElevatedButton to another side of CurvedNavigationBar - flutter

Question

I use the CurvedNavigationBar V1.0.3 to navigate between 5 sides. each of them has an extra dart file. The bottombar is in my main.dart.
I want to use a button in /body which leads to another side and change also to the right icon in bottombar.
main.dart
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'Pages/Beritpage.dart';
import 'Pages/donepage.dart';
import 'Pages/settingspage.dart';
import 'Pages/tinapage.dart';
import 'Pages/assmapage.dart';
Future main() async {
WidgetsFlutterBinding.ensureInitialized();
await SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
runApp(MyApp());
}
class MyApp extends StatelessWidget {
static final String title = 'Curved Navigation Bar';
const MyApp({super.key});
#override
Widget build(BuildContext context) => MaterialApp(
debugShowCheckedModeBanner: false,
home: MainPage(),
);
}
class MainPage extends StatefulWidget {
#override
_MainPageState createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
final navigationKey = GlobalKey<CurvedNavigationBarState>();
int index = 2;
final screens = [
AssmaPage(),
BeritPage(),
TinaPage(),
SettingsPage(),
DonePage(),
];
#override
Widget build(BuildContext context) {
double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;
final items = <Widget>[
Icon(Icons.mediation, size: 30),
Icon(Icons.donut_small, size: 30),
Icon(Icons.home, size: 30),
Icon(Icons.settings, size: 30),
Icon(Icons.done, size: 30),
];
// SafeArea and Cliptrect für IOS
return Container(
color: Color(0xFF145246),
child: SafeArea(
top: false,
child: ClipRect(
child: Scaffold(
extendBody: true,
// Topbar Start
appBar: AppBar(
toolbarHeight: 80,
// Set this height
leading: Icon(Icons.account_circle_rounded),
centerTitle: true,
title: SizedBox(
width: 70,
child: Image.network('https://i.ibb.co/c8ZvGYC/New.png'),
),
//actions: <Widget>[
//Padding(
//padding: EdgeInsets.only(right: 20.0),
//child: GestureDetector(
//onTap: () {},
//child: Icon(
//Icons.,
//size: 26.0,
//),
//)),
//],"
flexibleSpace: Container(
color: Color(0xFF145246),
//child: Column(
//children: [
//Text('One'),
//Text('Two'),
//],
//),
),
),
//Drawer Start
endDrawer: Container(
height: screenHeight,
width: screenWidth * 0.7,
color: Color(0xFF145246)),
//Drawer Ende
//Topbar Ende
body: screens[index],
//Bottombar Start
bottomNavigationBar: Theme(
data: Theme.of(context).copyWith(
iconTheme: IconThemeData(color: Colors.white),
),
child: CurvedNavigationBar(
key: navigationKey,
color: Color(0xFF145246),
buttonBackgroundColor: Color(0xFF145246),
backgroundColor: Colors.transparent,
height: 60,
animationCurve: Curves.easeInOut,
animationDuration: Duration(milliseconds: 300),
index: index,
items: items,
onTap: (index) => setState(() => this.index = index),
),
//Bottombar Ende
),
),
),
),
);
}
}
The recommended way is
final navigationState = navigationKey.currentState!;
navigationState.setPage(0);
but that only seems working, when i have the screens in the same dart file.
i tried to put the code in one of my page files but then i get a
"_CastError (Null check operator used on a null value)"
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'beritpage.dart';
import 'donepage.dart';
import 'settingspage.dart';
import 'tinapage.dart';
import 'assmapage.dart';
import 'package:test_app/main.dart';
class TinaPage extends StatelessWidget {
#override
Widget build(BuildContext context) => Scaffold(
backgroundColor: Color(0xFFB1C5AD),
body: Center(
//Aenderung Hermann
child: Column(
children: <Widget>[
SizedBox(
width: 400,
height: 70,
child: Center(
child: Text('Material'),
),
),
SizedBox(
width: 300,
height: 200,
child: Center(
child: Image.asset('assets/T-Shirt.png'),
),
),
SizedBox(
width: 200,
height: 70,
child: Center(
child: Text('Artikel-Nr.: 1062053001 '),
),
),
SizedBox(
height: 30,
),
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: const StadiumBorder(),
backgroundColor: Color(0xFF145245),
),
onPressed: () {
final navigationState = navigationKey.currentState!;
navigationState.setPage(0);
},
child: const Text('Cotton')),
SizedBox(
height: 30,
),
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: const StadiumBorder(),
backgroundColor: Color(0xFF145245),
),
onPressed: () {},
child: const Text('Viskose')),
SizedBox(
height: 30,
),
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: const StadiumBorder(),
backgroundColor: Color(0xFF145245),
),
onPressed: () {},
child: const Text('Elastan')),
],
),
),
);
}
I also tried Navigation.push to another side. but then i lose the Appbar and Buttonbar which are defined in main.dart.
I wanted to press the button "Cotton" and move to "AssmaPage" and see the first icon in Bottombar is highlighted.