Add 2 appbars in flutter - 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.
You create your Scaffold in which you put the first AppBar as usual.
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"),
),
),
),
);
}
}