Flutter expand TextField using dragging and button click

Question

How can I increase/decrease the number of maxLines in TextField with dragging and clicking button?

Answer 1

Screenshot:

---

Full code:

class YourPage extends StatefulWidget {
  @override
  _YourPageState createState() => _YourPageState();
}

class _YourPageState extends State<YourPage> {
  double _maxHeight = 200, _minHeight = 44, _height = 44, _dividerHeight = 56, _offset = 19;
  int _maxLines = 1;
  static final Duration _fixDuration = Duration(milliseconds: 500);
  Duration _duration = _fixDuration;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: SizedBox(
          height: _maxHeight,
          child: Column(
            children: <Widget>[
              AnimatedContainer(
                duration: _duration,
                height: _height,
                child: TextField(
                  decoration: InputDecoration(hintText: "Enter a message"),
                  maxLines: _maxLines,
                ),
              ),
              Container(
                height: _dividerHeight,
                width: 200,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    IconButton(
                      icon: Icon(Icons.arrow_downward),
                      onPressed: () {
                        if (_height <= _maxHeight - _offset - _dividerHeight) {
                          setState(() {
                            _duration = _fixDuration;
                            _height += _offset;
                            _maxLines++;
                          });
                        }
                      },
                    ),
                    GestureDetector(
                      child: Icon(Icons.drag_handle),
                      onPanUpdate: (details) {
                        setState(() {
                          _height += details.delta.dy;
                          _duration = Duration.zero;

                          // prevent overflow if height is more/less than available space
                          var maxLimit = _maxHeight - _dividerHeight;
                          var minLimit = 44.0;

                          if (_height > maxLimit)
                            _height = maxLimit;
                          else if (_height < minLimit) _height = minLimit;

                          _maxLines = 100;
                        });
                      },
                    ),
                    IconButton(
                      icon: Icon(Icons.arrow_upward),
                      onPressed: () {
                        if (_height >= _minHeight + _offset) {
                          setState(() {
                            _duration = _fixDuration;
                            _height -= _offset;
                          });
                        }
                      },
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}