Flutter expand TextField using dragging and button click - flutter

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