Question 76922 in Flutter Question posted in
The official Flutter documentation can be found here.

Why I'm getting two app bar in home screen in flutter?

I have made multiple screens and these screen have separate appBar in flutter but my home Screen getting two appBar! How can remove it in flutter?

I have tried several things but I’m still getting two screen.

Here is image link
enter image description here

Home Screen And Category Screen have same appBar code

Here Is Code of Home Screen appBar

appBar: AppBar(
        title: const Text('Online Survey'),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.search),
            onPressed: () {
              showSearch(context: context, delegate:CustomSearchDelegate(),);
            },
          ),
          IconButton(
              onPressed: () {
                showModalBottomSheet(
                  context: context,
                  builder: (context) => DraggableScrollableSheet(
                    expand: false,
                    builder: (context, scrollController) =>
                        SingleChildScrollView(
                      child: Column(
                        children: [
                          ListTile(
                            leading: const Icon(Icons.color_lens),
                            title: const Text('Dark Theme'),
                            subtitle: const Text(
                                'Better for eyesight and battery life'),
                            trailing: IconButton(
                                onPressed: () {},
                                icon: const Icon(Icons.toggle_off_rounded)),
                          ),
                          const ListTile(
                            leading: Icon(Icons.restaurant_menu),
                            title: Text('Display Item'),
                            subtitle: Text('List(small item)'),
                          ),
                          const ListTile(
                            leading: Icon(Icons.lock),
                            title: Text('Privacy Policy'),
                            subtitle: Text('App Terms & Policy'),
                          ),
                          const ListTile(
                            leading: Icon(Icons.rate_review),
                            title: Text('Rate Us'),
                            subtitle: Text('Leave a review on the Google Play'),
                          ),
                          const ListTile(
                            leading: Icon(Icons.more),
                            title: Text('More Apps'),
                            subtitle: Text('More Apps form developer'),
                          ),
                          const ListTile(
                            leading: Icon(Icons.info_rounded),
                            title: Text('About'),
                            subtitle:
                                Text('App Info, Build Version, Copyright'),
                          ),
                        ],
                      ),
                      //sheetButtons(),
                    ),
                  ),
                  shape: const RoundedRectangleBorder(
                      borderRadius:
                          BorderRadius.vertical(top: Radius.circular(30))),
                  isScrollControlled: true,
                  isDismissible: true,
                  // barrierColor: Colors.blue.shade100,
                  enableDrag: true,
                  elevation: 7,
                );
              },
              icon: const Icon(Icons.more_vert)),
        ],
        primary: true,
      ),
Tags:

3

Answers


  1. 0

    Please post the entire Scaffold code if you need to pinpoint the anomaly.
    The code you shared isn’t enough to find the bug since its above this tree level.
    However from my experience,

    Guess 1: You have implemented Home screen with AppBar and Category is a sub widget of Home screen and has its AppBar.

    Guess 2:
    You have implemented AppBar in appBar and body of Scaffold.

    Do check and update your question. Thanks!

    Login or Signup to reply.
  2. 0

    You are using the Bottom Navigation which is causing the issue. The Bottom navigation page contains a Scaffold with an AppBar and the other screen you are using has a separate AppBar. To resolve the issue you either need to remove the AppBar from the Bottom Navigation Screen or remove the AppBar from the individual screen.

    Login or Signup to reply.
  3. 0

    I think you Extracted Widgets from root widget’s body!

    Example:

        @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Online Survey'),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.search),
            onPressed: () {
              //showSearch(context: context, delegate:CustomSearchDelegate(),);
            },
          ),
          IconButton(
              onPressed: () {
                showModalBottomSheet(
                  context: context,
                  builder: (context) => DraggableScrollableSheet(
                    expand: false,
                    builder: (context, scrollController) =>
                        SingleChildScrollView(
                      child: Column(
                        children: [
                          ListTile(
                            leading: const Icon(Icons.color_lens),
                            title: const Text('Dark Theme'),
                            subtitle: const Text(
                                'Better for eyesight and battery life'),
                            trailing: IconButton(
                                onPressed: () {},
                                icon: const Icon(Icons.toggle_off_rounded)),
                          ),
                          const ListTile(
                            leading: Icon(Icons.restaurant_menu),
                            title: Text('Display Item'),
                            subtitle: Text('List(small item)'),
                          ),
                          const ListTile(
                            leading: Icon(Icons.lock),
                            title: Text('Privacy Policy'),
                            subtitle: Text('App Terms & Policy'),
                          ),
                          const ListTile(
                            leading: Icon(Icons.rate_review),
                            title: Text('Rate Us'),
                            subtitle: Text('Leave a review on the Google Play'),
                          ),
                          const ListTile(
                            leading: Icon(Icons.more),
                            title: Text('More Apps'),
                            subtitle: Text('More Apps form developer'),
                          ),
                          const ListTile(
                            leading: Icon(Icons.info_rounded),
                            title: Text('About'),
                            subtitle:
                                Text('App Info, Build Version, Copyright'),
                          ),
                        ],
                      ),
                      //sheetButtons(),
                    ),
                  ),
                  shape: const RoundedRectangleBorder(
                      borderRadius:
                          BorderRadius.vertical(top: Radius.circular(30))),
                  isScrollControlled: true,
                  isDismissible: true,
                  // barrierColor: Colors.blue.shade100,
                  enableDrag: true,
                  elevation: 7,
                );
              },
              icon: const Icon(Icons.more_vert)),
        ],
        primary: true,
      ),
        body: Exc(),  ////here is the main body of widgets.
        );
  }
}

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

  @override
  Widget build(BuildContext context) {
  ////you returned another Scaffold and an appBar! this caused another 
  ////appbar.
  ////return something else instead of Scaffold.
    return Scaffold(
      appBar: AppBar(),
      body: ListView.builder(
          itemBuilder: (context, index) => const Padding(
                padding: EdgeInsets.all(8),
                child: Text('Testing Chats'),
              ),
          itemCount: 10),
    );
  }
}

    Output: enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search