如何在 flutter 中制作自定义按钮？

Question

我的应用程序需要帮助。 我是 flutter 的新手，想尝试制作一个带有有趣按钮的主页。 我已经在 figma 中设计了我的主页，但我真的不知道如何使按钮相同，所以这是我想要实现的 figma UI 设计

我使用 SVG 图标作为按钮。

到目前为止，在我的代码中，我的主页看起来像这样

顺便说一句，这是我的主页代码

import 'package:flutter/material.dart';
import 'package:get/get_navigation/get_navigation.dart';
import 'package:medreminder/NewsArticle/news_home.dart';
import 'Reminder/ui/home_reminder.dart';
import 'Reminder/ui/widgets/button.dart';
import 'package:medreminder/main_reminder.dart';
import 'package:medreminder/home_page.dart';

void main() {
  // debugPaintSizeEnabled = true;
  runApp(const HomePage());
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Medicine Reminder App'),
        ),
        body: Column(
          children: [
            Stack(
              children: [
                Image.asset(
                  'images/MenuImg.jpg',
                  width: 600,
                  height: 200,
                  fit: BoxFit.cover,
                ),
              ],
            ),
            const SizedBox(height: 10.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                ElevatedButton(
                  child: const Text('Reminder'),
                  onPressed: () {
                    Navigator.of(context, rootNavigator: true).push(
                      MaterialPageRoute(builder: (context) => const ReminderHomePage()),
                    );
                  },
                ),
                ElevatedButton(
                  child: const Text('News & Article'),
                  onPressed: () {
                    Navigator.of(context, rootNavigator: true).push(
                      MaterialPageRoute(builder: (context) => const NewsHomePage()),
                    );
                  },
                ),
                ElevatedButton(
                  child: const Text('Healty Food Recipe'),
                  onPressed: () {},
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

谢谢大家的关注，任何帮助对我来说都意义重大。 谢谢你

Answer 1

我假设您的asset文件夹中有这些图像，因此您可以使用此小部件来构建自定义按钮：

Widget buildCustomButton(String imagePath, String title, Function()? onTap) {
    return InkWell(
      onTap: onTap,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            clipBehavior: Clip.antiAlias,
            height: 50,
            width: 50,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
            ),
            child: Image.asset(imagePath, fit: BoxFit.none),
          ),
          SizedBox(
            height: 8,
          ),
          Text(
            title,
            textAlign: TextAlign.center,
          )
        ],
      ),
    );
  }

并像这样使用它：

buildCustomButton('assets/images/reminder.png', 'Reminder', () {
        print("Reminder click");
      }),

Answer 2

用inkwell把你想做按钮的widget包起来，你可以随心所欲地制作按钮。

InkWell(
              onTap: () {},
              child: Container(
                child: FlutterLogo(
                  size: 80,
                ),
              ))

Answer 3

根据需要进行设计，然后像这样用 GestureDetector 包裹该图像。

     GestureDetector (onTap:()
                     {Your Method('Where you want to naviagate')},
                     child:Your Design})