[전체 코드]

data_collection_page.dart

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_practice/config/constants.dart';
import 'package:flutter_practice/http/nais_api.dart';
import 'package:flutter_practice/model/commodity.dart';
import 'package:flutter_practice/pages/common/login_page.dart';
import 'package:flutter_practice/res/colours.dart';
import 'package:flutter_practice/res/dimens.dart';
import 'package:flutter_practice/res/styles.dart';
import 'package:flutter_practice/utils/token_manager.dart';
import 'package:flutter_practice/utils/utils.dart';
import 'package:flutter_practice/widgets/widgets.dart';

class DataCollectionPage extends StatefulWidget {
  @override
  _DataCollectionPageState createState() => _DataCollectionPageState();
}

class _DataCollectionPageState extends State<DataCollectionPage> {
  ScrollController _scrollController;
  bool _isSilverCollapsed = false;
  String _toolbarTitle = '';
  String _toolbarSubtitle = '';
  GlobalKey _stickyKey = GlobalKey();
  GlobalKey _stickyKey2 = GlobalKey();
  GlobalKey _stickyKey3 = GlobalKey();
  GlobalKey _stickyKey4 = GlobalKey();
  FocusNode _retailNode;
  FocusNode _wholesaleNode;
  FocusNode _farmgateNode;
  double _dynamicTotalHeight;
  List<double> _childWidgetHeights  = List();
  bool _isVisible = true;

  @override
  void initState() {
    super.initState();
    _retailNode = FocusNode();
    _wholesaleNode = FocusNode();
    _farmgateNode = FocusNode();
    _scrollController = ScrollController();
    WidgetsBinding.instance.addPostFrameCallback(_getTotalHeight);
  }

  double _getWidgetHeight(GlobalKey key) {
    RenderBox renderBox = key.currentContext.findRenderObject();
    return renderBox.size.height;
  }

  _getTotalHeight(_) {
    _dynamicTotalHeight = 0;

    _childWidgetHeights.add(_getWidgetHeight(_stickyKey));
    _childWidgetHeights.add(_getWidgetHeight(_stickyKey2));
    _childWidgetHeights.add(_getWidgetHeight(_stickyKey3));
    _childWidgetHeights.add(_getWidgetHeight(_stickyKey4));

    for (double height in _childWidgetHeights) {
      _dynamicTotalHeight = height + _dynamicTotalHeight;
    }

    setState(() {
      _isVisible = false;
    });

    _dynamicTotalHeight = _dynamicTotalHeight + kToolbarHeight + Dimens.gap_dp20;
    return _dynamicTotalHeight;
  }

  @override
  void dispose() {
    super.dispose();
    _scrollController.dispose();
    _retailNode.dispose();
    _wholesaleNode.dispose();
    _farmgateNode.dispose();
  }

  @override
  Widget build(BuildContext context) {

    final Map<String, dynamic> arguments =
        ModalRoute.of(context).settings.arguments;
    Commodity commodity = arguments['commodity'];
    String marketName = arguments['market_name'];

    setToolbarTitle(commodity);

    return Stack(
      overflow: Overflow.visible,
      children: <Widget>[
        Visibility(
          visible: _isVisible,
          child: Material(
            child: Container(
              padding: EdgeInsets.only(
                  left: Dimens.gap_dp20,
                  bottom: Dimens.gap_dp20,
                  top: kToolbarHeight),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    commodity.category.vn,
                    key: _stickyKey,
                    style: TextStyle(
                        color: Colors.white, fontSize: Dimens.font_sp14),
                  ),
                  Text(commodity.name.vn,
                      key: _stickyKey2,
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: Dimens.font_sp30,
                          letterSpacing: -0.4)),
                  Text(commodity.id,
                      key: _stickyKey3,
                      style: TextStyle(
                          color: Colors.white, fontSize: Dimens.font_sp14)),
                  Text(marketName,
                      key: _stickyKey4,
                      style: TextStyle(
                          color: Colors.white, fontSize: Dimens.font_sp14)),
                ],
              ),
            ),
          ),
        ),
        SafeArea(
          child: Material(
            child: CustomScrollView(
              controller: _scrollController,
              slivers: <Widget>[
                _HeaderBar(
                    expandedHeight: _dynamicTotalHeight,
                    commodity: commodity,
                    marketName: marketName,
                    toolbarTitle: _toolbarTitle,
                    toolbarSubtitle: _toolbarSubtitle),
                SliverFillRemaining(
                  child: Column(
                    children: <Widget>[
                      Container(
                        padding: EdgeInsets.only(
                            left: Dimens.gap_dp20,
                            right: Dimens.gap_dp20,
                            top: Dimens.gap_dp50),
                        child: Column(
                          children: <Widget>[
                            PriceInputForm(
                              focusNode: _retailNode,
                              formKind: PriceInputFormKind.RETAIL,
                              color: Colors.pink,
                            ),
                            Gaps.vGap50,
                            PriceInputForm(
                              focusNode: _wholesaleNode,
                              formKind: PriceInputFormKind.WHOLESALE,
                              color: Colors.green,
                            ),
                            Gaps.vGap50,
                            PriceInputForm(
                              focusNode: _farmgateNode,
                              formKind: PriceInputFormKind.FARMGATE,
                              color: Colors.blue,
                            ),
                          ],
                        ),
                      ),
                      Expanded(
                        child: Container(),
                      ),
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.end,
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          Expanded(
                            child: Container(
                              height: Dimens.gap_dp50,
                              child: FlatButton(
                                onPressed: () {},
                                color: Colours.gray_cc,
                                child: Text(
                                  'CANCEL',
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontSize: Dimens.font_sp16),
                                ),
                              ),
                            ),
                          ),
                          Expanded(
                            child: Container(
                              height: Dimens.gap_dp50,
                              child: FlatButton(

                                onPressed: () {},
                                color: Colors.deepPurpleAccent[700],
                                child: Text(
                                  'SAVE',
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontSize: Dimens.font_sp16),
                                ),
                              ),
                            ),
                          ),
                        ],
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ],
    );
  }

  void setToolbarTitle(Commodity commodity) {
    _scrollController.addListener(() {
      // collapsing
      if (_scrollController.offset > 120 &&
          !_scrollController.position.outOfRange) {
        if (!_isSilverCollapsed) {
          _isSilverCollapsed = true;
          _toolbarTitle = commodity.name.vn;
          _toolbarSubtitle = commodity.id;
          setState(() {});
        }
      }

      // expanding
      if (_scrollController.offset <= 120 &&
          !_scrollController.position.outOfRange) {
        if (_isSilverCollapsed) {
          _isSilverCollapsed = false;
          _toolbarTitle = '';
          _toolbarSubtitle = '';
          setState(() {});
        }
      }
    });
  }
}

class _HeaderBar extends StatefulWidget {
  _HeaderBar(
      {Key key,
        @required this.expandedHeight,
        @required this.commodity,
        @required this.marketName,
        @required this.toolbarTitle,
        @required this.toolbarSubtitle});

  final Commodity commodity;
  final String marketName;
  final String toolbarTitle;
  final String toolbarSubtitle;
  final double expandedHeight;

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

class _HeaderBarState extends State<_HeaderBar> {
  @override
  Widget build(BuildContext context) {
    print('height: ${widget.expandedHeight}');

    return SliverAppBar(
      pinned: true,
      expandedHeight: widget.expandedHeight,
      title: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            widget.toolbarTitle,
            style: TextStyle(fontSize: Dimens.font_sp18, color: Colors.white),
          ),
          Text(
            widget.toolbarSubtitle,
            style: TextStyle(fontSize: Dimens.font_sp12, color: Colors.white),
          ),
        ],
      ),
      flexibleSpace: FlexibleSpaceBar(
        background: Stack(
          fit: StackFit.passthrough,
          overflow: Overflow.visible,
          children: <Widget>[
            CachedNetworkImage(
              fit: BoxFit.fill,
              color: Colors.black.withOpacity(0.2),
              colorBlendMode: BlendMode.darken,
              imageUrl:
              // {{url}}/v1/image/commodity/01010101
              '${NaisApi.BASE_URL}${NaisApi.COMMODITY_IMAGE}${widget.commodity.id}',
              httpHeaders: {
                'Authorization':
                'Bearer ${TokenManager.getString(Constants.ACCESS_TOKEN)}',
              },
              placeholder: (BuildContext context, String url) {
                return Container(child: ProgressView());
              },
              errorWidget: (BuildContext context, String url, Object error) {
                return Container(
                    child: Image.asset(Utils.getImgPath('ic_crop')));
              },
            ),
            Container(
              padding: EdgeInsets.only(
                  left: Dimens.gap_dp20,
                  bottom: Dimens.gap_dp20,
                  top: kToolbarHeight),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    widget.commodity.category.vn,
                    style: TextStyle(
                        color: Colors.white, fontSize: Dimens.font_sp14),
                  ),
                  Text(widget.commodity.name.vn,
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: Dimens.font_sp30,
                          letterSpacing: -0.4)),
                  Text(widget.commodity.id,
                      style: TextStyle(
                          color: Colors.white, fontSize: Dimens.font_sp14)),
                  Text(widget.marketName,
                      style: TextStyle(
                          color: Colors.white, fontSize: Dimens.font_sp14)),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}