title: How to call a variable or function from a different file to main.dart in flutter?
body: <p>I've been trying to implement a similar function like the NavigationBar widget in flutter.
  However, I don't want to use Icons instead I wanted to make a custom navbar with desired pics and everything was going well until I couldn't switch the middle section of my app (change different pages) when I tap/press the the textbutton.</p>
  <p><a href="https://i.stack.imgur.com/hgqGl.png" rel="nofollow noreferrer">You can check the UI here...crappy I know...am mimicking the till from my workplace...so the red section is the part I wanted to update when pressed</a></p>
  <p><strong>The side_buttons.dart file</strong></p>
  <pre><code>import 'package:flutter/material.dart';
  // ignore: unused_import
  import 'package:timtill/main.dart';
  
  class SideButtons extends StatefulWidget {
    final String text;
    final String imgUrl;
  
    const SideButtons({required this.text, required this.imgUrl});
  
    @override
    State&lt;SideButtons&gt; createState() =&gt; SideButtonsState();
  }
  
  class SideButtonsState extends State&lt;SideButtons&gt; {
  //
    final List sideBtnLabels = [
      'HOT DRINKS',
      'COLD DRINKS',
      'DONUTS',
      'TIMBITS',
      'MUFFINS',
      'BAGELS',
      'SOUP',
      'LUNCH',
      'BREAK FAST',
      'BAKED',
      'TAKE-HOME',
      'Timmies'
    ];
  
    @override
    Widget build(BuildContext context) {
      return Transform.rotate(
        angle: -11,
        child: Container(
          decoration: const BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [Color(0xFF9A9DAD), Color(0xFF4E4C56)])),
          height: 80,
          width: 80,
          child: TextButton(
              onPressed: () {
                int currentPageIndex = 0;
  
                int index = sideBtnLabels.indexOf(widget.text);
                setState(() {
                  currentPageIndex = index;
                });
  
                int navMiddleIndex(int index) {
                  return index;
                }
  
                print(sideBtnLabels.indexOf(widget.text));
                // print('index is changed to: ${navMiddleIndex(index).toString()}');
              },
  
              //////here Instead of text you can replace Node and import the dart:html
              //import 'dart:html';
              // text works because in the side_btn_page.dart we have specified the list of menu to it
              child: Stack(
                alignment: const AlignmentDirectional(0.0, 0.9),
                children: [
                  Image.asset(
                    'imgs/' + widget.imgUrl,
                    //imgurl
                  ),
                  Text(
                    widget.text, //text
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 14,
                      foreground: Paint()
                        ..style = PaintingStyle.stroke
                        ..strokeWidth = 3
                        ..color = const Color.fromARGB(255, 63, 63, 63),
                    ),
                  ),
                  Text(
                    widget.text, //text
                    style: const TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                      color: Color(0xFFEBEBEB),
                    ),
                  ),
                ],
              )),
        ),
      );
    }
  }
  </code></pre>
  <p>'''</p>
  <p><strong>The Main.dart file</strong>
  <strong>Note I wanted to update the currentPageIndex value from zero to the index number When I press the buttons please help me I'm beginner</strong></p>
  <pre><code>import 'package:flutter/material.dart';
  import 'package:timtill/pages/side_btn_page.dart';
  import 'package:timtill/pages/middle_btn_page.dart';
  import 'package:timtill/pages/middle_btn_page2.dart';
  // ignore: unused_import
  import 'package:timtill/util/side_buttons.dart';
  
  void main() {
    runApp(const MyApp());
  }
  
  class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return const MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'TimsTill',
        home: MyHomePage(),
      );
    }
  }
  
  class MyHomePage extends StatefulWidget {
    const MyHomePage({Key? key}) : super(key: key);
  
    @override
    _MyHomePageState createState() =&gt; _MyHomePageState();
  }
  
  class _MyHomePageState extends State&lt;MyHomePage&gt; {
    int currentPageIndex = 0;
  
    @override
    Widget build(BuildContext context) {
      return SafeArea(
        child: Column(
          children: [
            SizedBox(height: 80, child: SideButtonPage()),
            Expanded(
                flex: 12,
                child: Container(
                  color: Colors.red,
                  child: SizedBox(
                    width: MediaQuery.of(context).size.width,
                    child: Padding(
                      padding: const EdgeInsets.all(8),
                      child: SingleChildScrollView(
                        scrollDirection: Axis.horizontal,
                        child: SingleChildScrollView(
                          scrollDirection: Axis.vertical,
                          child: &lt;Widget&gt;[
                            MiddleButtonPage(),
                            MiddleButtonPage2(),
                            Container(
                              color: Colors.green,
                              alignment: Alignment.center,
                              child: const Text('Page 2'),
                            ),
                            Container(
                              color: Colors.blue,
                              alignment: Alignment.center,
                              child: const Text('Page 3'),
                            ),
                          ][currentPageIndex],
                        ),
                      ),
                    ),
                  ),
                )),
            Expanded(
                flex: 6,
                child: Container(
                  color: Colors.purple,
                ))
          ],
        ),
      );
    }
  }
  </code></pre>