如何在 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})