How to display alert bar below of AppBar in 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(() {});
                      },
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}