Flutter: How to make a button like this?-CodePudding

I tried to use TextButton.Icon to make the effect as following. But I found that the words can only be at the left or right of the icon. How can I put the words under the icon? Thanks a lot. enter image description here

CodePudding user response：

You can use Column Widget and populate its children with Icon and TextField. Then Wrap the whole widget with GestureDetector for on pressed functionality. You can also wrap it with InkWell and Material to get splash effect like in other buttons.

CodePudding user response：

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

CodePudding user response：

I think GirdView Widget the best way to make button like this-

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. If this answer helped you .please upvote the answer . Thanks!