How to display alert bar below of AppBar in flutter - flutter

Question

The form are inside CustomScrollView and I want alertbar always pinned below appbar and disappear when tab X.
Currently code
import 'package:flutter/material.dart';
class BaseAppBar extends StatelessWidget {
final Widget title;
final bool innerBoxIsScrolled;
BaseAppBar({this.title, this.innerBoxIsScrolled=false});
#override
Widget build(BuildContext context) {
return SliverAppBar(
backgroundColor: Colors.amber,
pinned: true,
floating: false,
forceElevated: innerBoxIsScrolled,
title: title,
leading: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50),
),
child: Icon(
Icons.arrow_back_ios,
color: Colors.white,
size: 20,
),
onPressed: () {
Navigator.of(context).pop();
},
)
);
}
}
class BaseLayout extends StatelessWidget {
final Widget appBar;
final Widget alertBar;
final Widget child;
BaseLayout({this.appBar, this.alertBar, this.child});
#override
Widget build(BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
BaseAppBar(
title: Text(
'test'
),
),
SliverToBoxAdapter(
child: alertBar,
),
SliverToBoxAdapter(
child: child,
)
],
);
}
}

Answer 1

I think it is better to do it this way. Don't overcomplicate things with useless Widget inheritance for the AlertBar.
class _BaseLayoutState extends State<BaseLayout> {
bool _showAlert = false;
#override
Widget build(BuildContext context) {
return Scaffold(
body: SizedBox(
height: MediaQuery.of(context).size.height,
child: CustomScrollView(
slivers: <Widget>[
BaseAppBar(
title: Text('test'),
),
_showAlert
? SliverToBoxAdapter(
child: SizedBox(
height: 80.0,
child: ListTile(
leading: Icon(Icons.error_outline),
title: Text("Please correct form data."),
trailing: IconButton(
onPressed: () {
_showAlert = false;
setState(() {});
},
icon: Icon(Icons.clear),
),
),
),
)
: SliverToBoxAdapter(
child: SizedBox(),
),
/// The rest of the screen where the form and text fields are
SliverFillRemaining(
child: ListView(
children: <Widget>[
Form(
child: Column(
children: <Widget>[
TextFormField(),
TextFormField(),
TextFormField()
],
),
),
/// alert button
Center(
child: RaisedButton(
child: Text('ALERT!'),
onPressed: () {
_showAlert = true;
/// make it go away after a few seconds
Future.delayed(Duration(seconds: 3), () {
_showAlert = false;
setState(() {});
});
setState(() {});
},
),
),
],
),
),
],
),
),
);
}
}