So, Buttons behave in a way that will make the user know that he/she clicked the button[The button changes its foreground color briefly when clicked.]
Now my questions is how do i do it on a container in the way that when user clicks the widget, it becomes responsive[foreground darkens], and when user lifts finger from the widget[becomes normal]?
my Code for the Widget is below:
Container(
height: 60,
width: double.infinity,
margin: EdgeInsets.all(10.0),
child: Material(
borderRadius: BorderRadius.circular(10.0),
elevation: 1,
shadowColor: Colors.black,
child: Padding(
padding: EdgeInsets.only(left: 8),
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text(
'Click Me',
style: TextStyle(
fontFamily: 'Poppins',
fontSize: 14,
),
),
),
Align(
alignment: Alignment.centerRight,
child: Icon(
CupertinoIcons.right_chevron,
color: color_primary,
),
)
],
),
),
),
)
Add an InkWell with a non-null onTap parameter around your Padding widget.
Container(
height: 60,
width: double.infinity,
margin: EdgeInsets.all(10.0),
child: Material(
borderRadius: BorderRadius.circular(10.0),
elevation: 1,
shadowColor: Colors.black,
child: InkWell(
borderRadius: BorderRadius.circular(10.0),
onTap: () {
// do something on tap
},
child: Padding(
padding: EdgeInsets.only(left: 8),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: Text(
'Click Me',
style: TextStyle(
fontFamily: 'Poppins',
fontSize: 14,
),
),
),
SizedBox(width: 10.0),
Icon(
CupertinoIcons.right_chevron,
color: Theme.of(context).primaryColor,
),
],
),
),
),
),
),
Also please take a look at a way you can achieve the same result without using a Stack (since it might be an overhead for this situation).
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다