我需要帮助我的应用程序。我新的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: () {},
),
],
),
],
),
),
);
}
}
谢谢你们的关注,任何帮助对我来说都很重要,谢谢
3条答案
按热度按时间lndjwyie1#
根据需要进行设计,然后像这样用GestureDetector包裹图像。
2uluyalo2#
我假设您的
asset
文件夹中有这些图像,因此您可以使用此小部件构建自定义按钮:并像这样使用它:
cngwdvgl3#
把你想做成按钮的小部件用墨水盒包起来,你就可以随心所欲地做成按钮了。