Hide/Show a container in the top after scrolling another bottom container up/down in flutter

Question

How can I hide a Container and AppBar with animation on scrolling the bottom container upwards and show it when scrolling down. I'm also using a TabBar in the middle which should go on top of the screen when the bottom part is scrolled upwards.

Here's a picture:

And here's my code:

import 'dart:convert';
import 'package:flutter/rendering.dart';
import 'package:http/http.dart' as http;
import 'dart:developer' as developer;
import 'package:url_launcher/url_launcher.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:aritic/services/api_manager.dart';

class ViewContact extends StatefulWidget {
  String contactKey;

  ViewContact({this.contactKey});

  @override
  _ViewContactState createState() => _ViewContactState();
}

class _ViewContactState extends State<ViewContact> {
  String contactKey;
  bool isLoading = false;
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  _sendingMails() async {
    const url = 'mailto:person@example.com';
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }

  _sendingSMS() async {
    const url = 'sms:9999999999';
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }

  @override
  Widget build(BuildContext context) {
    API_Manager().getSingleContact();
    return Scaffold(
      backgroundColor: Color(0xFFDAE0E2),
      appBar: AppBar(
        backgroundColor: Theme.of(context).primaryColor,
        title: Text("View Contact"),
      ),
      body: Column(
        children: [
          _topContainer(),
          DefaultTabController(
              length: 4, // length of tabs
              initialIndex: 0,
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Container(
                      child: TabBar(
                        isScrollable: false,
                        unselectedLabelColor:
                            Colors.blueGrey[700].withOpacity(1),
                        labelColor: Colors.black,
                        indicatorColor: Colors.blueGrey[700],
                        labelPadding: EdgeInsets.symmetric(horizontal: 2.0),
                        tabs: [
                          Tab(text: 'Activity'),
                          Tab(text: 'Associations'),
                          Tab(text: 'About'),
                          Tab(text: 'Attachments'),
                        ],
                      ),
                    ),
                    _bottomContainer(),
                  ])),
        ],
      ),
    );
  }

  Widget _topContainer() {
    return Container(
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                margin: EdgeInsets.all(2),
                padding: EdgeInsets.all(8),
                child: new Column(
                  children: <Widget>[
                    MaterialButton(
                        shape: CircleBorder(),
                        color: Color(0xFFC9E8E9).withOpacity(0.5),
                        textColor: Colors.blueGrey[700],
                        padding: EdgeInsets.all(2),
                        child: Icon(
                          Icons.phone_sharp,
                          size: 20,
                        ),
                        onPressed: () =>
                            launch('tel://${9999999999.toString()}')),
                    Text(
                      'Call',
                      style: TextStyle(
                          color: Colors.blueGrey[700],
                          fontSize: 15,
                          fontWeight: FontWeight.w600),
                    ),
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.all(10),
                child: new Column(
                  children: <Widget>[
                    MaterialButton(
                        shape: CircleBorder(),
                        color: Color(0xFFC9E8E9).withOpacity(0.5),
                        textColor: Colors.blueGrey[700],
                        padding: EdgeInsets.all(2),
                        child: Icon(
                          Icons.mail_sharp,
                          size: 20,
                        ),
                        onPressed: () => _sendingMails()),
                    Text(
                      'Email',
                      style: TextStyle(
                          color: Colors.blueGrey[700],
                          fontSize: 15,
                          fontWeight: FontWeight.w600),
                    ),
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.all(10),
                child: new Column(
                  children: <Widget>[
                    MaterialButton(
                        shape: CircleBorder(),
                        color: Color(0xFFC9E8E9).withOpacity(0.5),
                        textColor: Colors.blueGrey[700],
                        padding: EdgeInsets.all(2),
                        child: Icon(
                          Icons.message_sharp,
                          size: 20,
                        ),
                        onPressed: () => _sendingSMS()),
                    Text(
                      'Text',
                      style: TextStyle(
                          color: Colors.blueGrey[700],
                          fontSize: 15,
                          fontWeight: FontWeight.w600),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _bottomContainer() {
    return SingleChildScrollView(
      child: Container(
          height: 400, //height of TabBarView
          decoration: BoxDecoration(
              border: Border(
                  top: BorderSide(
                      color: Colors.grey, width: 0.5))),
          child: TabBarView(children: <Widget>[
            _activityContainer(),
            _associationsContainer(),
            _aboutContainer(),
            _attachmentsContainer()
          ])),
    );
  }

  Widget _activityContainer() {
    return Container(
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              Container(
                margin: EdgeInsets.all(10),
                child: new Column(
                  children: <Widget>[
                    MaterialButton(
                        shape: CircleBorder(),
                        color: Color(0xFFC9E8E9).withOpacity(0.5),
                        textColor: Colors.blueGrey[700],
                        padding: EdgeInsets.all(8),
                        child: Icon(
                          Icons.note_add,
                          size: 25,
                        ),
                        onPressed: () => null),
                    SizedBox(
                      height: 3,
                    ),
                    Text(
                      'Add Note',
                      style:
                          TextStyle(fontSize: 12, fontWeight: FontWeight.w600),
                    ),
                  ],
                ),
              ),
              SizedBox(
                width: 30,
              ),
              Container(
                margin: EdgeInsets.all(10),
                child: new Column(
                  children: <Widget>[
                    MaterialButton(
                        shape: CircleBorder(),
                        color: Color(0xFFC9E8E9).withOpacity(0.5),
                        textColor: Colors.blueGrey[700],
                        padding: EdgeInsets.all(8),
                        child: Icon(
                          Icons.touch_app_sharp,
                          size: 25,
                        ),
                        onPressed: () => null),
                    SizedBox(
                      height: 3,
                    ),
                    Text(
                      'Add Task',
                      style:
                          TextStyle(fontSize: 12, fontWeight: FontWeight.w600),
                    ),
                  ],
                ),
              ),
              SizedBox(
                width: 30,
              ),
              Container(
                margin: EdgeInsets.all(10),
                child: new Column(
                  children: <Widget>[
                    MaterialButton(
                        shape: CircleBorder(),
                        color: Color(0xFFC9E8E9).withOpacity(0.5),
                        textColor: Colors.blueGrey[700],
                        padding: EdgeInsets.all(8),
                        child: Icon(
                          Icons.menu,
                          size: 25,
                        ),
                        onPressed: () => null),
                    SizedBox(
                      height: 3,
                    ),
                    Text(
                      'Log Activity',
                      style:
                          TextStyle(fontSize: 12, fontWeight: FontWeight.w600),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _associationsContainer() {
    return Container(
      child: Center(
        child: Text('Display Associations',
            style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
      ),
    );
  }

  Widget _aboutContainer() {
    return Container(
      child: Column(
        children: <Widget>[
          SizedBox(
            height: 10,
          ),
          Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
            SizedBox(
              width: 3,
            ),
            Text('About Contact',
                style: TextStyle(
                    fontSize: 17,
                    color: Colors.blueGrey[700],
                    fontWeight: FontWeight.bold)),
            SizedBox(
              width: 90,
            ),
            Container(
              width: 100,
              height: 30,
              child: RaisedButton(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(5.0),
                    side: BorderSide(color: Colors.blueGrey[700])),
                onPressed: () {},
                color: Color(0xFFC9E8E9).withOpacity(0.5),
                textColor: Colors.blueGrey[700],
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text("Edit Contact",
                        style: TextStyle(
                            fontSize: 12, fontWeight: FontWeight.bold)),
                  ],
                ),
              ),
            ),
            SizedBox(
              width: 3,
            ),
          ]),
          SizedBox(height: 10,),
          Padding(
            padding: const EdgeInsets.all(3.0),
            child: TextFormField(
              keyboardType: TextInputType.text,
              decoration: InputDecoration(
                  labelText: 'First Name',
                  fillColor: Colors.white,
                  filled: true,
                  contentPadding: EdgeInsets.all(8)),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(3.0),
            child: TextFormField(
              keyboardType: TextInputType.text,
              decoration: InputDecoration(
                  labelText: 'Last Name',
                  fillColor: Colors.white,
                  filled: true,
                  contentPadding: EdgeInsets.all(8)),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(3.0),
            child: TextFormField(
              keyboardType: TextInputType.text,
              decoration: InputDecoration(
                  labelText: 'Email',
                  fillColor: Colors.white,
                  filled: true,
                  contentPadding: EdgeInsets.all(8)),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(3.0),
            child: TextFormField(
              keyboardType: TextInputType.text,
              decoration: InputDecoration(
                  labelText: 'Phone Number',
                  fillColor: Colors.white,
                  filled: true,
                  contentPadding: EdgeInsets.all(8)),
            ),
          ),
        ],
      ),
    );
  }

  Widget _attachmentsContainer() {
    return Container(
      child: Center(
        child: Text('Display Attachments',
            style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
      ),
    );
  }
}

NEED TO HIDE _topContainer() WIDGET AND THE AppBar AND ALLOW SCROLLING THE _bottomContainer() AS IT WILL HAVE MORE FIELDS AFTER FIRST NAME , LAST NAME ETC FROM THE CODE ABOVE

Answer 1

Check this, SliverAppBar Class

Sample Code:

CustomScrollView(
  slivers: [
    /* app bar goes here */
    SliverAppBar(),
    /* list view */
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return ListTile();
        },
        childCount: 1,
      ),
    ),
  ],
);