在颤动中向上/向下滚动另一个底部容器后，在顶部隐藏/显示一个容器

Question

如何在向上滚动底部容器时隐藏 Container 和 AppBar 并在向下滚动时显示动画。 我还在中间使用了TabBar，当底部向上滚动时，它应该出现在屏幕顶部。

这是一张照片：

这是我的代码：

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

需要隐藏_topContainer() 小部件和AppBar 并允许滚动_bottomContainer()，因为在上面的代码中FIRST NAME、LAST NAME 等后面会有更多字段

Answer 1

检查一下，SliverAppBar Class

示例代码：

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