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

Why do you need two AppBars ? What are you trying to achieve ? — timilehinjegede
– timilehinjegede, Commented Aug 9, 2020 at 10:28
I needed this for my app to make the tab bar more attractive looking. There are reasons for it — Petro
– Petro, Commented Apr 5, 2022 at 18:37

Dorad · Accepted Answer · 2022-01-18 06:28:12Z

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"), ), ), ), ); } }

The Scaffold was designed to be the single top level container for a MaterialApp and it's typically not necessary to nest scaffolds. Read about the Scaffold class here: api.flutter.dev/flutter/material/Scaffold-class.html

Collectives™ on Stack Overflow

Add 2 appbars in flutter

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related