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

mznpcxlj  于 2022-11-30  发布在  Flutter
关注(0)|答案(3)|浏览(216)

我需要帮助我的应用程序。我新的Flutter,并想尝试使一个有趣的按钮主页。我设计了我的主页在figma,但我真的不知道如何使按钮是相同的,所以这里是我的figma UI设计,我想实现

我使用SVG图标作为按钮。
到目前为止,在我的代码中,我的HomePage只看起来像这样

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

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: () {},
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

谢谢你们的关注,任何帮助对我来说都很重要,谢谢

lndjwyie

lndjwyie1#

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

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

2uluyalo2#

我假设您的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");
      }),

cngwdvgl

cngwdvgl3#

把你想做成按钮的小部件用墨水盒包起来,你就可以随心所欲地做成按钮了。

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

相关问题