I created a drop down widget but when I touch widgets like Text widgets or free space inside it drop down height jump to touched position. How to ignore this touches?
I used IgnorePointer widget but it also disabled Switch widgets.
Also, how to detect outside touches to close the drop down widget?
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:movie_god/MyApp.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget{
@override
State<StatefulWidget> createState() => MyAppState();
}
class MyAppState extends State<MyApp>{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter!'),
),
body: Stack(
children: <Widget>[
Container(
color: Colors.blueGrey[200],
child: Center(
child: Text('Widgets'),
),
),
BottomFilter()
],
),
),
);
}
}
class BottomFilter extends StatefulWidget{
@override
State<StatefulWidget> createState() => BottomFilterState();
}
class BottomFilterState extends State<BottomFilter> with SingleTickerProviderStateMixin{
double _minHeight = 20;
double _height;
double _maxHeight = 200;
double _transparentHeight = 30;
AnimationController _controller;
Animation _animation;
Map<String,dynamic> _switches = {
'switch1' : false,
'switch2' : false,
'switch3' : false,
'switch4' : false,
'option' : null
};
List<String> _options = <String>[];
@override
void initState() {
_controller = AnimationController(vsync: this,duration: Duration(milliseconds: 500));
_animation = Tween(begin: _minHeight+_transparentHeight, end: _maxHeight).animate(CurvedAnimation(parent: _controller, curve: Curves.easeOut));
super.initState();
}
@override
Widget build(BuildContext context) {
Size _size = MediaQuery.of(context).size;
return GestureDetector(
onVerticalDragUpdate: (drag){
setState(() {
_controller.reset();
double _postion = drag.globalPosition.dy-kToolbarHeight-_minHeight-_transparentHeight;
print(_postion.toString());
if(_postion<0){
_height=_minHeight+_transparentHeight;
} else if(_postion>_maxHeight){
double _newHeight = _maxHeight+_transparentHeight+_minHeight + ((_size.height-_postion)/_size.height)*((_postion-_maxHeight));
_height < _newHeight ? _height = _newHeight: null;
} else{
_height = _postion+_transparentHeight+_minHeight;
}
_animation = Tween(begin: _height, end: _maxHeight).animate(CurvedAnimation(parent: _controller, curve: Curves.easeOut));
});
},
onVerticalDragEnd: (drag){
if(_height>_maxHeight || _height>=_maxHeight/2){
_animation = Tween(begin: _height, end: _maxHeight).animate(CurvedAnimation(parent: _controller, curve: Curves.easeOut));
_controller.forward();
}else if(_height<_maxHeight/2){
_animation = Tween(begin: _height, end: _minHeight+_transparentHeight).animate(CurvedAnimation(parent: _controller, curve: Curves.easeOut));
_controller.forward();
}
},
child: AnimatedBuilder(
animation: _controller,
builder: (context,Widget child){
return Stack(
children: <Widget>[
Positioned(
bottom: _size.height - (kToolbarHeight + 20 + _animation.value),
child: child,
)
],
);
},
child: Container(
height: 400,
width: _size.width,
color: Colors.transparent,
child: Padding(
padding: EdgeInsets.only(bottom: _transparentHeight),
child: Container(
height: 300,
alignment: Alignment.bottomCenter,
width: _size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(bottom: Radius.circular(20))
),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text('switch1',style: TextStyle(color: Colors.blueGrey[800]),),
Switch.adaptive(
inactiveThumbColor: Colors.blue,
value: _switches['switch1'],
onChanged: (value){
setState(() {
_switches['switch1'] = value;
});
},
),
Text('switch2',style: TextStyle(color: Colors.blueGrey[800]),),
Switch.adaptive(
value: _switches['switch2'],
onChanged: (value){
setState(() {
_switches['switch2'] = value;
});
},
),
Text('switch3',style: TextStyle(color: Colors.blueGrey[800]),),
Switch.adaptive(
value: _switches['switch3'],
onChanged: (value){
setState(() {
_switches['switch3'] = value;
});
},
),
],
),
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.white,
brightness: Brightness.light
),
child: Row(
children: <Widget>[
DropdownButton<String>(
value: _switches['option'],
hint: Text('sample1',style: TextStyle(color: Colors.blueGrey[800]),),
style: TextStyle(
color: Colors.blueGrey[800]
),
onChanged: (String value){
if(value != null){
setState(() {
_switches['option'] = value;
print(_switches['option']);
});
}
},
items: <String>['option1','option2','option3','option4','option5','option6'].map<DropdownMenuItem<String>>((value){
return DropdownMenuItem<String>(
value: value,
child : Align(child: Text(value),alignment: Alignment(1, 0),)
);
}).toList(),
),
],
),
),
Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.white,
brightness: Brightness.light
),
child: Row(
children: <Widget>[
DropdownButton<String>(
hint: Text('sample2',style: TextStyle(color: Colors.blueGrey[800]),),
style: TextStyle(
color: Colors.blueGrey[800]
),
onChanged: (String value){
if(value != null){
_options.indexOf(value)<0?
setState(() {
_options.add(value);
}) : null;
}
},
items: <String>['option1','option2','option3','option4','option5','option6'].map<DropdownMenuItem<String>>((value){
return DropdownMenuItem<String>(
value: value,
child : Align(child: Text(value),alignment: Alignment(1, 0),)
);
}).toList(),
),
],
),
),
],
),
SizedBox(
height: 50,
child: ListView(
shrinkWrap: false,
scrollDirection: Axis.horizontal,
children: _genresGenerator(),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(horizontal: 40),
child: Divider(
color: Colors.blueGrey[500],
height: 10,
indent: 5,
),
),
Icon(FontAwesomeIcons.angleDoubleDown,size: 15,color: Colors.blueGrey[500],)
],
),
)
],
),
),
)
),
),
);
}
List<Widget> _genresGenerator() {
List<Widget> _optionsWidgets = _options.map<Widget>((String name) {
return InputChip(
key: ValueKey<String>(name),
label: Text(name),
onDeleted: () {
setState(() {
_removeTool(name);
});
});
}).toList();
return _optionsWidgets;
}
void _removeTool(String name) {
_options.remove(name);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}
