Skip to content

Instantly share code, notes, and snippets.

@jjjlyn

jjjlyn/data_collection_page.dart

Created March 18, 2020 14:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jjjlyn/82bc323c23682d9581d83f6861db2cc5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jjjlyn/82bc323c23682d9581d83f6861db2cc5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jjjlyn created this gist Mar 18, 2020.
    344 changes: 344 additions & 0 deletions data_collection_page.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,344 @@
    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)),
    ],
    ),
    ),
    ],
    ),
    ),
    );
    }
    }