Flutter navigate with an ElevatedButton to another side of CurvedNavigationBar

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.