I need my appbar to show on different dart files I'm creating in android studio

Question

Need your assistance.

I'm working on a flutter project using android studio. I'm finding it hard to display the Appbar when the bottom navigation bar is there. When I have them both, the appbar doesn't show when I run the app but when I remove the bottomnavbar, the Appbar becomes visible. How can I resolve this? This happens to all new dart files I create that I want to include an appbar.

I created a widget for the bottomnavbar on a different dart file. See code below: PS, Adding an appbar to this code below works well but not the other files where I vave a different appbar and calling the bottomnavbar like this: bottomNavigationBar: const BottomNavBar(),

import 'package:flutter/material.dart';
import 'package:salomon_bottom_bar/salomon_bottom_bar.dart';
import 'package:tikosocial/constants.dart';

class BottomNavBar extends StatefulWidget {
  const BottomNavBar({super.key});

  @override
  State<BottomNavBar> createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  var currentIndex=0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        bottomNavigationBar: Container(
          margin: const EdgeInsets.all(20),
          decoration: BoxDecoration(
            color: Colors.white,
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(.15),
                blurRadius: 30,
                offset: const Offset(0, 10),
              ),
            ],
            borderRadius: BorderRadius.circular(50),
          ),
          child: SalomonBottomBar(
            currentIndex: currentIndex,
            onTap: (i) => setState(() => currentIndex = i),
            items: [
              /// Home
              SalomonBottomBarItem(
                icon: const Icon(Icons.home_max_outlined),
                title: const Text("Home"),
                selectedColor: kHomeColor,
              ),

              /// Ticket
              SalomonBottomBarItem(
                icon: const Icon(Icons.local_activity_outlined),
                title: const Text("Ticket"),
                selectedColor: kPrimaryColor,
              ),

              /// Search
              SalomonBottomBarItem(
                icon: const Icon(Icons.search),
                title: const Text("Search"),
                selectedColor: kPrimaryColor,
              ),

              /// Profile
              SalomonBottomBarItem(
                icon: const Icon(Icons.account_circle_rounded),
                title: const Text("Account"),
                selectedColor: kHomeColor,
              ),
            ],
          ),
        ),
      );
  }
}

But when I call it on a separate file only the bottomnavbar shows. See code sample below:

import 'package:flutter/material.dart';
import 'package:tikosocial/bottom_nav.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample Code'),
      ),
      body: const Row(

      ),
      bottomNavigationBar: const BottomNavBar(),
    );
  }
}

kindly add your code so that we can have a look at possible issue. — OMi Shah, Aug 16 '23 at 15:33
I have added an answer, please let me know if worked, otherwise add more content or examples to this question. — Johan Ordenes Galleguillos, Aug 16 '23 at 16:19
You shouldnt use a Scaffold widget inside your BottomNavBar class, just return SalomonBottomBar. Thats it. — Johan Ordenes Galleguillos, Aug 24 '23 at 16:01

score 0 · Answer 1 · answered Aug 16 '23 at 16:17

To use AppBar + BottomNavigationBar follow this steps:

In your base file main.dart:

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: false,
      ),
      home: const MyPage(),
    );
  }
}

In the file of your first page, in this case MyPage() class:

class MyPage extends StatefulWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  int index = 0;

  updateIndex(int i) {
    setState(() => index = i);
  }

  List<Widget> contentList = [
    const Center(child: Text('Page 1')),
    const Center(child: Text('Page 2')),
    const Center(child: Text('Page 3')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AppBar Title'),
      ),
      body: contentList[index],
      bottomNavigationBar: BottomNavigationBar(
        onTap: updateIndex,
        currentIndex: index,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.account_balance),
            label: 'A',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.add),
            label: 'B',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.ac_unit),
            label: 'C',
          ),
        ],
      ),
    );
  }
}

This way your AppBar will be static and your page content will be updated according to the tapped index of the BottomNavigationBar.

In case you want to add content from different files, you should call your widget inside contentList. Make sure not to create another scaffold because you already have one in this page.

In case you want to make your AppBar dynamic (different content for indexes tapped), you could assign your BottomNavigationBar index and build different appbars, doing the same as in contentList.

Hello Johan. I appreciate your feedback. Check my code above and advice... — Job levis, Aug 16 '23 at 16:46

I need my appbar to show on different dart files I'm creating in android studio

1 Answers1