[英]Flutter change color of Container inside GestureDetector when it is focused
I am trying to use GestureDetector
to display a button using a Container, since I don't like the splash animation from the FlatButton
nor Inkwell
, what i want to do is to make the user know when the color is being pressed or focused by making the background color of the Container
darker, I am using this code below, but I know that this will change the color when pressed and not come back to the regular color when not being pressed.我正在尝试使用GestureDetector
使用 Container 显示按钮,因为我不喜欢来自FlatButton
或Inkwell
的飞溅 animation ,我想做的是让用户知道何时按下或聚焦颜色Container
的背景颜色较深,我在下面使用此代码,但我知道这会在按下时改变颜色,并且在不按下时不会恢复到常规颜色。 Is there a way to code it so the color changes to darker only when pressed or focusing, and changes back to the regular color when released pressing.有没有办法对其进行编码,以便仅在按下或聚焦时颜色变暗,并在释放按下时变回常规颜色。
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatefulWidget {
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
bool isTouching = true;
handleTouch(bool confirmTouch) {
setState(() {
isTouching = confirmTouch;
});
}
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
body: new GestureDetector(
onTap: () {
handleTouch(false);
},
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(25, 15, 20, 8),
height: 58,
width: 58,
child: Icon(
Icons.add,
color: Colors.white,
size: 28,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
color: isTouching == true ? Colors.green : Colors.red,
),
),
],
),
),
),
),
);
}
}
Wrap your container with a Listener
and use onPointerDown
and onPointerUp
:用Listener
包裹你的容器并使用onPointerDown
和onPointerUp
:
Listener(
child: Container(
margin: EdgeInsets.fromLTRB(25, 15, 20, 8),
height: 58,
width: 58,
child: Icon(
Icons.add,
color: Colors.white,
size: 28,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
color: isTouching == true ? Colors.green : Colors.red,
),
),
onPointerDown: (event) => setState(() {
isTouching = true;
}),
onPointerUp: (event) => setState(() {
isTouching = false;
}),
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.