Add 2 appbars in flutter

Question

I want my app to have 2 appBars but i don't know how i can add the second one , The first one have this code : appBar:

 AppBar(
          title: Text('Tariffo',
              style: TextStyle(
                  color: Colors.white,
                  fontFamily: 'SignPainter',
                  fontSize: 45)),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(
              bottom: Radius.circular(30),
            ),
          ),
          actions: <Widget>[
            Padding(
              padding: EdgeInsets.only(right: 10),
            ),
            IconButton(
              icon: Icon(Icons.center_focus_weak),
              onPressed: () async {
                String scaning = await BarcodeScanner.scan();
                setState(() {
                  qrResult = scaning;
                });
              },
            ),
            IconButton(
                icon: Icon(
                  Icons.perm_identity,
                  color: Colors.white,
                ),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => UserPage()),
                  );
                }),

And the second one have this code:

 appBar: AppBar(title: const Text('Bottom App Bar')),
    floatingActionButtonLocation: 
      FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(
      child: const Icon(Icons.add), onPressed: () {},),
    bottomNavigationBar: BottomAppBar(
      shape: CircularNotchedRectangle(),
      notchMargin: 4.0,
      child: new Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          IconButton(icon: Icon(Icons.menu), onPressed: () {},),
          IconButton(icon: Icon(Icons.search), onPressed: () {},),
        ],
      ),
    ),
  );
}

So how can i add the second one to not get an error? Beacuse i tried to erase the first part with appbar: Appbar and i get a lot o errors

Answer 1

Edit:

As Derek pointed out you should not place two Scaffolds in your App.

A different solution could be to place the first AppBar as usual in the appBar property of your Scaffold and the second as a first children in a Column.

This would look like:

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          title: Text("First appbar"),
        ),
        body: Column(
          children: [
            AppBar(
              backgroundColor: Colors.red,
              title: Text("Second appbar"),
            ),
            HomePage()
          ],
        ),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.yellow,
      child: Text("Content"),
    );
  }
}

---------------------------

Old Answer:

Actually this is really simple.

1. You create your Scaffold in which you put the first AppBar as usual.

2. As the body of this Scaffold you put a second Scaffold in which you place your second AppBar.

The result would look like:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          title: Text("First appbar"),
        ),
        body: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.red,
            title: Text("Second appbar"),
          ),
        ),
      ),
    );
  }
}