[英]Flutter: How to make a button like this?
class Test extends StatelessWidget {
const Test({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
const SizedBox(height: 10,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
IconWithTextButton(icon:const Icon(Icons.lock, color: Colors.red,),text: "Lock",onClicked: (){},),
IconWithTextButton(icon:const Icon(Icons.alarm, color: Colors.amber),text: "Alarm",onClicked: (){},),
IconWithTextButton(icon:const Icon(Icons.call, color: Colors.green),text: "call",onClicked: (){},),
IconWithTextButton(icon:const Icon(Icons.wrong_location_sharp, color: Colors.greenAccent),text: "location",onClicked: (){},),
IconWithTextButton(icon:const Icon(Icons.add, color: Colors.tealAccent),text: "Add",onClicked: (){},),
],
),
const SizedBox(height: 20,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
IconWithTextButton(icon: const Icon(Icons.lock, color: Colors.red,),text: "Lock",onClicked: (){},),
IconWithTextButton(icon:const Icon(Icons.alarm, color: Colors.amber),text: "Alarm",onClicked: (){},),
IconWithTextButton(icon:const Icon(Icons.call, color: Colors.green),text: "call",onClicked: (){},),
IconWithTextButton(icon:const Icon(Icons.wrong_location_sharp, color: Colors.greenAccent),text: "location",onClicked: (){},),
IconWithTextButton(icon:const Icon(Icons.add, color: Colors.tealAccent),text: "Add",onClicked: (){},),
],
)
],
),
),
);
}
}
class IconWithTextButton extends StatelessWidget {
String text;
Icon icon;
VoidCallback onClicked;
IconWithTextButton({Key? key, required this.text, required this.onClicked, required this.icon}) : super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onClicked,
child: Container(
child: Column(
children: [
icon,
const SizedBox(height: 10,),
Text(text),
],
),
),
);
}
}
You can use Column Widget and populate its children with Icon and TextField.您可以使用 Column Widget 并使用 Icon 和 TextField 填充其子项。 Then Wrap the whole widget with GestureDetector for on pressed functionality.
然后用 GestureDetector 包裹整个小部件以实现按下功能。 You can also wrap it with InkWell and Material to get splash effect like in other buttons.
你也可以用 InkWell 和 Material 包裹它,以获得像其他按钮一样的飞溅效果。
You need not wrap with column.你不需要用柱子包裹。
TextButton(
onPressed:(){},
child: Column(
children: [
Icon(Icons.play_arrow,color:Colors.green),
Text(
'Hello',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
I think GirdView Widget the best way to make button like this-我认为 GirdView Widget 是制作这样的按钮的最佳方式-
GridView.count(
crossAxisCount: 4,
children: List<Widget>.generate(16, (index) {
return GridTile(
child:GestureDetector(
onTap:(){
print(index.toString());
},
child: Card(
color: Colors.blue.shade200,
child: Column(
children:[ Text('tile $index'),
Icon(Icons.alarm)
])
)),
);
}),
),
With help of index parameter you can pass function according to button type.借助索引参数,您可以根据按钮类型传递 function。 If this answer helped you.please upvote the answer.
如果这个答案对您有帮助,请给答案点赞。 Thanks!
谢谢!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.