图标按钮上的填充和文本 - 颤动答案

【问题标题】：Padding and text on Icon Button - flutter图标按钮上的填充和文本 - 颤动
【发布时间】：2023-02-07 04:17:03
【问题描述】：

我正在使用 IconButton 创建一个菜单，但我想减少按钮之间的空间。目前它看起来像这样：

但我想要这个：

另外，我想知道如何将文本放在每个按钮下方，就像图像一样。我尝试过使用其他类型的按钮，但没有用。

这是 Menu.dart 代码：

import 'package:flutter/material.dart';

void main() => runApp(Menu());

class Menu extends StatefulWidget {
  const Menu({super.key});

  @override
  State<Menu> createState() => _MenuState();
}

class _MenuState extends State<Menu> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color.fromARGB(255, 160, 244, 230),
        elevation: 0,
      ),
        body: Container(
        padding: EdgeInsets.symmetric(horizontal: 90),
        decoration: BoxDecoration( 
            gradient:  LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Color.fromARGB(255, 160, 244, 230), Color.fromARGB(255, 92, 172, 178)]
            )
          ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                  icon: Image.asset("assets/entrada.png"),
                  iconSize: 190,
                  onPressed: () {},
                  ),
                IconButton(
                  icon: Image.asset("assets/saida.png"),
                  iconSize: 190,
                  onPressed: () {},
                  
                  ),
                IconButton(
                  icon: Image.asset("assets/categorias.png"),
                  iconSize: 190,
                  onPressed: () {},
                )
              ]
            )
        )
    );
  }
}

【问题讨论】：

标签： flutter dart

【解决方案1】：

首先，您需要像这样构建自定义按钮：

Widget customButton(
      {required String image,
      required String title,
      required Function() onTap}) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        color: Colors.transparent,
        child: Column(
          children: [
            Image.asset(
              image,
              height: 150,
              width: 150,
            ),
            Text(title),
          ],
        ),
      ),
    );
  }

然后像这样使用它：

Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      customButton(
        image: "assets/entrada.png",
        title: 'some text',
        onTap: () {},
      ),
      customButton(
        image: "assets/saida.png",
        title: 'some text 2',
        onTap: () {},
      ),
      customButton(
        image: "assets/categorias.png",
        title: 'some text 3',
        onTap: () {},
      ),
    ],
  )

【讨论】：