How to call another file included or main.dart file include function insider the `the MyApp()

Question

main.dart file source code 👇 But i want call bottomNavigationBar(); function inside the bottom_navbar.dart

import 'package:flutter/material.dart';
import 'bottom_navbar.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "BookKeep",
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xFF212121),
          title: Center(
            child: Text("BookKeep"),
          ),
          leading: GestureDetector(
            onTap: (){},
            child: Icon(
              Icons.menu,
            ),
          ),
          actions: <Widget>[
            Padding(
              padding: EdgeInsets.only(right: 20.0),
              child: GestureDetector(
                onTap: (){},
                child: Icon(
                  Icons.search
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

bottom_navbar.dart file 👇

import 'package:flutter/material.dart';

class bottomNavigationBar extends StatefulWidget {
  @override
  _bottomNavigationBarState createState() => _bottomNavigationBarState();
}

class _bottomNavigationBarState extends State<bottomNavigationBar> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold (
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: new Icon(Icons.home),
            title: new Text("Home")
          ),
          BottomNavigationBarItem(
            icon: new Icon(Icons.favorite,),
            title: new Text("Favourites")
          ),
        ],
      ),
    );
  }
}

After I was tried something like this 👇

Then it is executing some error like this 👇

Answer 1

This is main.dart:

import 'package:flutter/material.dart';
import 'bottom_navbar.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "BookKeep",
      home: Scaffold(
        bottomNavigationBar: BottomNavBar(),
        appBar: AppBar(
          backgroundColor: Color(0xFF212121),
          title: Center(
            child: Text("BookKeep"),
          ),
          leading: GestureDetector(
            onTap: (){},
            child: Icon(
              Icons.menu,
            ),
          ),
          actions: <Widget>[
            Padding(
              padding: EdgeInsets.only(right: 20.0),
              child: GestureDetector(
                onTap: (){},
                child: Icon(
                  Icons.search
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

This is bottom_navbar.dart:

import 'package:flutter/material.dart';

class BottomNavBar extends StatefulWidget {
  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold (
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: new Icon(Icons.home),
            title: new Text("Home")
          ),
          BottomNavigationBarItem(
            icon: new Icon(Icons.favorite,),
            title: new Text("Favourites")
          ),
        ],
      ),
    );
  }
}

To prevent the confusion, I've changed your class name in the bottom_navbar.dart from bottomNavigationBar to BottomNavBar And quick tips, in the bottom_navbar.dart, to initialize a class, you must initialize your class name with a capital letters in the first character.

So, it's not bottomNavBar but, BottomNavBar

And then to add the BottomNavBar function in the main.dart file, add: bottomNavigationBar: BottomNavBar(),

NOTE: The NavBar looks awesome dude